SnedekerDesignz.webs

Click here to edit subtitle

Classes of Navbar links and how to use FireBug to find the codes for each of the links in the nave bar. For S.B.2.0

Posted by cipsi-dj on November 7, 2012 at 9:25 PM

Classes of Navbar links and how to use FireBug to find the codes for each of the links in the nave bar. For S.B.2.0

Did you know that you can customize each link in the nav-bar?

Well below is A link to A text document with all of the codes for each of the different nav links to each of the apps.

If any are missing just let me (cipsi-dj) know so that I can find and add the codding to this list.

Thees codes go in the CSS box. http://members.webs.com/s/designer/

Click here for the link to the CSS codes for all of the codes for each of the different nav links to each of the apps.

How to use FireBug to find the codes for each of the links in the nav bar.

If you do not already have FireBug you can get this FREE FireFox add-on here: http://getfirebug.com/.

Note. The members page nav-link css class changes with each website. You will need to find the unique CSS class code for the members nav link using FireBug.

Also you can use FireBug to get the codes for the non app pages by following the tutorial below.

And note that if you change the page link name then the CSS class coding for that page will change also.

1st Using the FireFox web browser with the FireBug add-on you can right click on the link in the nav-bar that you want the CSS code for than Scroll up or down the list to were you see Inspect Element with Firebug and click on Inspect Element with Firebug.


2nd After clicking on Inspect Element with Firebug you will see A window popup at the bottom of the screen showing the HTML and CSS codes. It is the HTML codding you will need to get the CSS codding from by looking at the class name.

For example take A look at the HTML code for the forums link of my site.

<a class="section fw-class-d1327102c625731683ab8438b00a8baf" href="http://groupforwebswebdesigners.webs.com/apps/forums/">Forums</a>

In this code you would need to highlight

<a class="section fw-class-d1327102c625731683ab8438b00a8baf" href="http://groupforwebswebdesigners.webs.com/apps/forums/">Forums</a>

than past this in the CSS box and edit the code to look like this

a.section.fw-class-d1327102c625731683ab8438b00a8baf { }

You can see that I have removed class=" from the code, I have added A . in-front of the a an in-front of the fw-class-

d1327102c625731683ab8438b00a8baf and I have added { } at the end of the code.

3ed After pasting the coding you got from using FireBug into the CSS box and editing the coding to what it need

to be edited to you can start adding your own CSS coding between the { } to customize that nav link in the nav-bar.

For example you could make the Forums page nav-bar link have A custom background color and or image

like this.

a.section.fw-class-d1327102c625731683ab8438b00a8baf{background:red !important;}

4th To help you keep track of what each of the different CSS codes for the links in the nave-bar you can add something like this before the CSS code /* Forum's app link background */ and add this after the CSS code /* Forum's app link background end */ so that it will look like this.

/* Forum's app link background */

a.section.fw-class-d1327102c625731683ab8438b00a8baf{background:red !important;}

/* Forum's app link background end */

5th After you have don all of the above just save your changes.


Categories: General CSS Stuff, Tips, Tricks, and Mods, Uncategorized

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

Already a member? Sign In

3 Comments

Reply morales zapata mayra cristal
3:22 PM on November 25, 2012 
hola
Reply Errbay
9:29 PM on December 2, 2012 
Is there any way to switch a SB3 site to a SB2 site?
Reply cipsi-dj
11:14 PM on December 2, 2012 
Errbay says...
Is there any way to switch a SB3 site to a SB2 site?

Only if that site was built with SB2 and upgraded to SB3. If your site was started with SB2 and upgraded to SB3 but you want to go back that I think you should be able to by going to the site settings page. http://members.webs.com/s/account/myAccount There near the bottom right you should see an option to switch to site editor back to the SB2. I think. You would look for A box titled "More Settings" and in that box in the option is there than you'll see A drop down menu titled "Edit Mode:". Under it should be A drop down menu for "Site Language". I hope this helps.