Site Links
Home
Features
Documentation
Pricing & Order
Members Area
Support Options
UBBDev.com
UBBWiki.com
Who's Online Now
5 registered members (Yarp™, isaac, mgellan, peter gariepy, Geoff), 62 guests, and 395 spiders.
Key: Admin, Global Mod, Mod
Member Spotlight
Mark S
Mark S
Liverpool : England : UK
Posts: 4,715
Joined: July 2006
Show All Member Profiles 
Top Posters(30 Days)
isaac 58
Gizmo 43
Geoff 35
Morgan 30
ECNet 17
Ruben 14
Mark S 11
JAISP 10
Bert 8
Latest Photos
Chinese Buddhist temple.
My buddha beads.
Rendered Walls
Multi-Screen wallpaper
Stockholm Metro
Previous Thread
Next Thread
Print Thread
Adding A CSS Navigation Bar To My Forums? #242715
04/20/11 08:19 PM
04/20/11 08:19 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
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?


Express Hosting
Express Hosting "We are the official hosting company of UBB.threads. Ask us about our free migration services to migrate your UBB.threads installation."
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242716
04/20/11 10:02 PM
04/20/11 10:02 PM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
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 Web

I'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.


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242719
04/20/11 10:32 PM
04/20/11 10:32 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
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

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242720
04/20/11 10:40 PM
04/20/11 10:40 PM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
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)


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242721
04/20/11 10:49 PM
04/20/11 10:49 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
can you lay out where you would put the code on the left on this page in what box?


http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242722
04/20/11 10:51 PM
04/20/11 10:51 PM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
style code in the header insert

the list code in the default header


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: Gizmo] #242723
04/20/11 10:54 PM
04/20/11 10:54 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
ok thanks let me try

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242724
04/20/11 10:56 PM
04/20/11 10:56 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
No luck the code is affecting the entire page and not only the header.

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242725
04/20/11 10:59 PM
04/20/11 10:59 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
yeah the entire forum disappears after adding the code

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242726
04/20/11 11:05 PM
04/20/11 11:05 PM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
their css is effecting every instance of the tags; they're pretty common tags. I'd take and do:

Header Insert
Code
<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
Code
<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>


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242727
04/20/11 11:11 PM
04/20/11 11:11 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
Thanks mate that worked!!! - I didnt add those nav id tags was the problem

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242728
04/20/11 11:15 PM
04/20/11 11:15 PM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
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 tongue


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242729
04/21/11 12:04 AM
04/21/11 12:04 AM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
so does the white wrapper help hold everything together on your sites?

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242730
04/21/11 01:44 AM
04/21/11 01:44 AM
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Gizmo Offline
UBB.threads Developer
Gizmo  Offline
UBB.threads Developer
Joined: Jun 2006
Posts: 16,833
Portland, OR; USA
Well, the white area is a div that wraps the entire ubb, the rest are other divs lol; lots and lots of divs!


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Forums: A Gardeners Forum Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242737
04/21/11 02:43 PM
04/21/11 02:43 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
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?

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242738
04/21/11 02:55 PM
04/21/11 02:55 PM
Joined: Dec 2003
Posts: 5,842
Lutz,FL
Ruben Offline

Ruben  Offline


Joined: Dec 2003
Posts: 5,842
Lutz,FL
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
Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242739
04/21/11 03:02 PM
04/21/11 03:02 PM
Joined: Apr 2011
Posts: 152
S
ShiftKnowledge Offline OP
member
ShiftKnowledge  Offline OP
member
S
Joined: Apr 2011
Posts: 152
I want to put one at the top right, one on the side, and one on the bottom.

Re: Adding A CSS Navigation Bar To My Forums? [Re: ShiftKnowledge] #242741
04/21/11 03:11 PM
04/21/11 03:11 PM
Joined: Dec 2003
Posts: 5,842
Lutz,FL
Ruben Offline

Ruben  Offline


Joined: Dec 2003
Posts: 5,842
Lutz,FL
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

Shout Box
Today's Birthdays
No Birthdays
Recent Topics
Upgrade 7.5.5 -> 7.6.1 Missing Files
by mgellan. 01/23/18 01:05 PM
Moderators Cant See Forums
by peter gariepy. 01/22/18 10:26 PM
Moderator 7.6.1.1 - Adding Issue?
by Geoff. 01/22/18 03:34 PM
Active Links - reduce the length?
by peter gariepy. 01/22/18 12:53 AM
Upgrading from 7.6.0 to 7.6.1
by Baldeagle. 01/20/18 01:07 PM
Forum Statistics
Forums36
Topics35,053
Posts190,808
Members12,052
Most Online978
Jun 24th, 2007
Random Image
Powered by UBB.threads™ PHP Forum Software 7.6.1.1