|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
I've been trying to add a global navigation bar to my forums and I'm a bit confused and trying to avoid code conflicts. First, is it best to add the code to the header template or the header and footer boxes in the general html control panel?
This also brings up a few more concerns for me. I plan on adding banners with Google adsense and maybe some site stat plug-ins in the future. Is it best to code my own html with index/pages and embed the forum into the pages or is it best to just edit the templates in the control panel?
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
I'd say the header/footer includes in the control panel; it's how I've done my project sites My Service Family and Back of the WebI'd personally sway against hacking the templates, but if it has to be done, it has to be done. On a side note, my two project sites above where done entirely without hacking the forum templates.
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
Wow nice work. I like how you made your nav bar/ headers match the rest of the forum and I like the white box that ties it all together. Now, where do I start? I'm confused about if I need to add html tags to the header boxes etc. I HTML but I'm also learning how CSS works but I don't fully get the Div stuff. I'm trying to just add a simple nav bar and go from there but its not showing up. This is what I'm putting in the Header box: <link type="text/css" rel="stylesheet" href="forum/styles/newsurf.css" /> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> And here is the external CSS ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; } It should look something like this: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
I put the CSS code in the header insert section, and use a full url to the file. I'd put any external CSS in the header insert section as well.
Then the html i just add to the default header (or default footer, depending if you want it above or below the forum)
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
style code in the header insert
the list code in the default header
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
No luck the code is affecting the entire page and not only the header.
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
yeah the entire forum disappears after adding the code
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
their css is effecting every instance of the tags; they're pretty common tags. I'd take and do: Header Insert <style type="text/css">
#navigation ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#navigation li {
float:left;
}
#navigation a:link,a:visited {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#navigation a:hover,a:active {
background-color:#7A991A;
}
</style>
Default Header <div id="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
Thanks mate that worked!!! - I didnt add those nav id tags was the problem
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
Not a problem; I always try to make sure that any additions to coding I put in place keep separate than the native coding that already exists... It's a great rule of thumb
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
so does the white wrapper help hold everything together on your sites?
|
|
|
|
Joined: Jun 2006
Posts: 16,301 Likes: 116
|
Joined: Jun 2006
Posts: 16,301 Likes: 116 |
Well, the white area is a div that wraps the entire ubb, the rest are other divs lol; lots and lots of divs!
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
So if I want to put different java scripts for google ads where would be the best place to to past the code for individual forums?
|
|
|
|
Joined: Dec 2003
Posts: 6,566 Likes: 78
|
Joined: Dec 2003
Posts: 6,566 Likes: 78 |
Probably best would be the Custom Island Insert This will show up between the 1st and 2nd post of a topic. Usually the most effective place to put ads.
You would paste the code in several custom islands you create,one for each ad. Then under forum details/custom inserts select the island you want for that forum.
Blue Man Group There is no such thing as stupid questions. Just stupid answers
|
|
|
|
Joined: Apr 2011
Posts: 136
member
|
member
Joined: Apr 2011
Posts: 136 |
I want to put one at the top right, one on the side, and one on the bottom.
|
|
|
|
Joined: Dec 2003
Posts: 6,566 Likes: 78
|
Joined: Dec 2003
Posts: 6,566 Likes: 78 |
They are all different places. One on the side would still be a custom island. Unless you are not going to have any islands at all.
The top and bottom would be html includes Default header Default footer
Blue Man Group There is no such thing as stupid questions. Just stupid answers
|
|
|
|
Bots
by Outdoorking - 04/13/2024 5:08 PM
|
|
|
0 members (),
850
guests, and
177
robots. |
Key:
Admin,
Global Mod,
Mod
|
|
|
|