Templates versus grassroot design

marked

New member
After finishing the phish-proof (virtually, if not 100% practically) login system, I am thinking about putting my js projects details and designing steps online as tutorials. After viewing several tutorial websites for display themes, I have decided on the general theme of my site. I then tried finding a template for my site (to be honest, I feel it a shameful act to try and build my site on a predefined template by someone else, but oh well :sorry:)

I tried several template sites but strangely enough, there was none that I found satisfactory. They simply had too many objects on the screen, namely, a top menu (horizontal), a left side menu (vertical), a footer menu-like linkbar and several sidebars (probably divs) in the main body. I want a site that is rather simple. One simple top (horizontal) primary navigation menu (without drop-down expansions), a simple (vertical) secondary navigation menu on the left (vertical) and that's all. Of course there would need to be a main body section.

What I wanted to ask here is, should I try and edit the templates that I have available and go on editing them or try and build my own template? The problem with building my own template is that when I create individual objects (menus and font styles and borders etc) they look very graceful and simple, but when I put two or more of them together on one page, they look so stupid and out-of-sync with one another :cry:

How do you guys go about with your visual designs?
 

Genesis

Administrator
Staff member
I'd go for a WordPress script and theme and make it a static Website. You can do it with the Softaculous creator in your cPanel Control Panel. Just remember to click on "Advance" when you load the script from Softaculous as it then gives you additional options to have the script and plugins automatically updated, so you don't have to worry about that.

If you want feedback on your tutorials you can keep the WordPress comments turned on (they are turned on by default), but if not you can turn them off in the settings/discussion. You can also have a blog in addition to the static page.

Just make sure you load a really good security plugin first. Like Wordfence.

The default theme should be OK for you to work with, but if you like simplicity, a good bare bones simple theme is Generate Press. If you want to get more fancy with plugins, then you have to pay for them, but if you want to keep it simple as you say you want to, this works out of the box and really looks good.

You actually don't need any support for a site like that as all you need is to Google your subject and there are loads, and literally loads of documentation that are available. Best is to work with plugins from wordpress.org as there is a good rating system there and one can immediately see if the plugin is up to date and well supported.
 

marked

New member
What do you mean by "a security plugin"?

P.s. my site isn't hosted with wordpress support. Do I have to download and install the wordpress framework on my site first before I go on with their themes and stuff?

So far I have downloaded some themes of navigation icons and I'm currently deciding on which theme to use. Plus I am wondering if I should boost my buttons and menus with css style borders or go the fancy way and present them as images. I have designed the core page layout of my site but I am not sure how it would look on different screen resolutions and mobile/tablet screens :search:
 

Genesis

Administrator
Staff member
Right. WordPress is a script that you can download with the assistance of the Softaculous tool in your cPanel here at Gigarank. Softaculous is in the software section of cPanel. Just click on it, and the first icon you'll notice is a WordPress icon. Most themes that come with WordPress are mobile and tablet responsive.
 

marked

New member
Great!

How is web programming different in wordpress framework?

Also. Would I have security issues if i design my template myself in clean php? :undecided:
 

Yozora

Moderator
marked said:
Great!

How is web programming different in wordpress framework?

Also. Would I have security issues if i design my template myself in clean php? :undecided:

The HTML & CSS part is similar, but the PHP is kind of different from non-WordPress PHP.
I would look at the examples in the codex.

For making your own theme, I would start with a blank starter theme like underscores, and play around with it.
 

marked

New member
Many thanks for the links. I visited both links. I did not find any difference in the output of the main wordpress html and other sites (which of course I won't know whether are built with the framework or without). Currently I am designing the top section of my template (the logo, the header and nav bar etc). It is very easy to do that for a computer browser with js enabled but I don't know to what extent it would be responsive for smaller sized display devices possibly without js support :fool:

I'm asking a lot of questions here and on other web support platforms about the issues I am facing on the matter. Recently I got to learn how to put divs of unknown size in the middle of the page without using tables :cool:

I've finally decided to reinvent the wheel and design my site all from the scratch. Npp and all. Let's see how the adventure goes.:crazy:
 

Yozora

Moderator
marked said:
Many thanks for the links. I visited both links. I did not find any difference in the output of the main wordpress html and other sites (which of course I won't know whether are built with the framework or without). Currently I am designing the top section of my template (the logo, the header and nav bar etc). It is very easy to do that for a computer browser with js enabled but I don't know to what extent it would be responsive for smaller sized display devices possibly without js support :fool:

I'm asking a lot of questions here and on other web support platforms about the issues I am facing on the matter. Recently I got to learn how to put divs of unknown size in the middle of the page without using tables :cool:

I've finally decided to reinvent the wheel and design my site all from the scratch. Npp and all. Let's see how the adventure goes.:crazy:

Good luck! The output of the HTML isn't different, but when coding you may need to add the php code for the widget & menu areas into header.php and/or footer.php if the theme you're using doesn't have them. If you have any more questions, feel free to ask!
 

marked

New member
The questions are endless :smile:

For example ... is it possible to add 4 gradients to a webpage's background simultaneously? As in, a gradient that goes fading inside from all page borders (top, left, right, bottom)? As far as I have researched, it looks like gradients only go dimensional for any given background.

Actually I am looking to make a sub navigation menu on the left side of the page. I have a gradient fading downwards to the page's main background color. I want to make the sub navigation menu be slightly prominent, but not really shockingly and childishly shouting for attention.

What I have so far is http://marked.gi9.co/sa

Any ideas?
 

Yozora

Moderator
For multiple gradients, you should be able to:
https://developer.mozilla.org/en-US...nd_and_Borders/Using_CSS_multiple_backgrounds
And it looks like it's supported in everything but IE 8:
http://caniuse.com/#feat=multibackgrounds

For having things stand out slightly, I like using box-shadow:
http://www.cssmatic.com/box-shadow
If you set the vertical and horizontal length to 0, and then make the shadow color white-ish, then it doubles as a glow effect.

For a sub-menu, I might try making it a widget area instead of a menu, and then adding the custom menu widget. That way you can add other things like social media icons, etc. http://codex.wordpress.org/Widgetizing_Themes

If you really want to make it a menu, here's the link: https://codex.wordpress.org/Navigation_Menus

Let me know if you have any more questions!

EDIT: I realized a radial gradient would probably work better for what you want to do, so try that first:
http://www.w3schools.com/css/css3_gradients.asp
 

marked

New member
Wah! Great links!!

Although I am not going to use their (wordpress) code for that, I did get a great idea about the visual theme on the matter :drinks: I have decided on the font style (using some of online google fonts for that) and the colors. All that is left for the sub-menu is the styling. I have decided to keep no flashy styles for my menu and simply go with defining the a.link and a.vlink items in the CSS. That alone can be used for creating very pleasing effects (where the link appears to come forward with a larger font and a more prominent color etc).

Any ideas for the footer?

As in, what I should put in the footer? I mean ... all the navigation is already presented in the main and side nav bars. Mostly for corporate websites, they post affiliate links and copyrights info and stuff in the footer which somehow makes the site look cool and professional looking. Any ideas for me?
 

Yozora

Moderator
Glad they helped!^-^
Hmm, well if you don't have any ideas for the footer, you could always just put copyright info & leave it at that. It depends what you'd like to do with your site, but I tend to think of the footer as the place to put things that aren't important enough, or small enough to go in the header or sidebar, but are still somewhat important.

EDIT: You might want to look through footer showcase articles to get ideas:
http://www.1stwebdesigner.com/footer-designs-showcase/
http://footerlove.com/
http://devisefunction.com/45-creative-examples-in-footer-design/
 

marked

New member
Now I have hit another stump. Sigh!

I have three main div's in the body section:

Code:
#menudiv{
	width:20%;
	padding:3px;
	float:left;
	height:100%;
	font-family:ubuntu;
	font-size:25px;
	color:#404040;
}

#contentdiv{
	font-family:verdana;
}

#footer{
	position:relative;
	display:flex;
	clear:both;
	margin-bottom:20px;
	margin-top:-20px;
	justify-content:space-between;
}

Now the problem is that the footer is jumping down really low and there is a lot of gap (margin) between footer div and contentdiv. If I remove clear:both; from footer style, then it goes up gracefully but it gets placed under contentdiv alone and the space left to it (which is menudiv) gets a stupid blank.

Any help?

Ic59U.png
 

Yozora

Moderator
@"marked" Hmm, I'm on my tablet, at the moment, and having a little trouble scrolling your code box down, so I'll look at it when I'm on my computer. One thing I would try is playing around with the CSS & substituting various values using your browser's developer tools. Usually that helps me debug things.
 

marked

New member
I wish ... although I'm quite at home with javascript, CSS isn't really my thing. I often have to look up for references and instructions about CSS objects and their properties to get things right. And still I am posting a lot of display related questions and issues on forums (like here) and dev groups lol

It looks like there are certain ways which can help me resolve my issue on this, but that required me to use specific values for the menu div. This means I would have to keep on editing that value for each and every page in my site. I don't like that idea.
 

Genesis

Administrator
Staff member
marked said:
I wish ... although I'm quite at home with javascript, CSS isn't really my thing. I often have to look up for references and instructions about CSS objects and their properties to get things right. And still I am posting a lot of display related questions and issues on forums (like here) and dev groups lol

It looks like there are certain ways which can help me resolve my issue on this, but that required me to use specific values for the menu div. This means I would have to keep on editing that value for each and every page in my site. I don't like that idea.
If you get a really good Code Editor like Sublime, CSS should be a piece of cake. I'm using Microsoft Expression Web 4 that is for free. One still needs to know a little of the code, but the specifics are intuitive.

You could also put yourself through a basic course. I did this one for real basics hands on with Timothy Bedlow. The CSS portion of the course starts with the Chapter below. It says Expression Web but you can do the course with basically any code editor.

 

marked

New member
Code editor as in .......... Notepad ++?

Or something that comes loaded with predefined code and stuff?
 

Genesis

Administrator
Staff member
marked said:
Code editor as in .......... Notepad ++?

Or something that comes loaded with predefined code and stuff?
Right. Most people seem to be favouring Sublime these days. Or Adobe Brackets.