How would I get this: alt text

To look like this:

alt text

The second screenshot is my forum. The first screenshot is Wordpress and the second is SMF. I know how to use SSI, but where would I place it in order to get it exactly positioned there on my Wordpress? I'm trying to place my menu bar on my main page, exactly like how it is on the forum. The look of the buttons and all.

3 answers

0
points

Fortunately, Wordpress is very simple to theme as it uses pure PHP. Simply copy the HTML (or PHP) of the menu and put it in the exact same place in your Wordpress theme. This will very likely be inside header.php in the root of your theme. Remember to make sure that the menu links are not relative. Also, make sure that the proper style sheet is linked so that it is styled correctly.

Edited 7/8/10:

There are a couple of ways to make your menu look nice like the one shown. You will almost certainly want to apply the style list-style: none; To make the menu horizontal, you might try either li { display: inline; }, which is easiest, or perhaps li { display: block; height: px; width: px; float: left; } depending on your needs. Place the menu below the rest of your header, perhaps sharing a container div with it.

The best way to make it look the same is to open the other page in a browser (SSI and PHP are both server side, they won't be seen by your browser), view source, and then copy the menu code into the same place in your source code. You will then want to find which style sheet controls the menu styles and copy those styles also. Personally, when I want to know what styles affect an element, I use Web Developer add-on in Firefox which lets you inspect each element for the styles which act upon it.

Answered over 6 years ago by kainosnous
  • Thanks for the response!! I use SSI from my forum and am able to get the menu bar to show up as links like this: ![alt text][1] See how it's hypertext and bland? How do I make it look like the one on my forum and move it/ make it horizontal (not vertical)? [1]: http://img248.imageshack.us/img248/8173/helpoz.jpg shade3134 over 6 years ago
0
points

Sorry about the comment, can't embed images. Thanks for the response!! I use SSI from my forum and am able to get the menu bar to show up as links like this:

alt text

See how it's hypertext and bland? How do I make it look like the one on my forum and move it/ make it horizontal (not vertical)?

Answered over 6 years ago by shade3134
Simon 75
0
points

Hi Shade,

Lets have some patience, and get into the code.

You'll need to structure your header.php file so that the HTML sits underneath the main header image.

To make it appear less bland and horizontal, you're going to use some CSS to tell the browser how to display it.

Your navigation is based around a list, and that's what we'll hook into the style it - this is a great skill to learn and lets you create effects like the one I did below.

alt text

Here are some pointers on how to get to where you wanna go.

HTML

<ul id='nav'>
<li>News</li>
<li>Forum</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>

CSS

#nav ul { list-style: none; display: block; } //this will get rid of the dots next to the items and make it fill 100% width

#nav ul li { display: inline; float: left; margin-left: 15px; }  //makes the items sit to the left and next to each other - little margin adjust

#nav ul li a { text-decoration: none; color: #000 } //kills the text underline and makes it black

This way, you can get the list items to sit next to each other. You'll want to play around with the margins of the list items to get them spread out nicely

If you want further help, post your header.php file from your wordpress folder.

Good luck,

Simon

Answered over 6 years ago by Simon
  • Where would I place that code? You mentioned copying the menu source code from my forum and placing it within my Wordpress? Is that correct? If so, where in my Wordpress would I place it? The div id that controls my forum bar is main_menu. What from this would I copy and where would I place it? Sorry for these questions, I'm just trying to grasp all this fully. shade3134 over 6 years ago