How to change the nav

A place for all those CSS headaches, tips, tricks and help

How to change the nav

Postby franticisme » Tue Apr 07, 2009 2:14 am

Hi there i am not quite familiar with Razor CMS but I must say I like its flexibility i just have a quick question
I am trying to edit my nav from the bullet points I want to change the bullet points to the double arrow symbol eg ยป

I am wondering where do I start with this change

regards
Frantic
franticisme
 
Posts: 5
Joined: Tue Apr 07, 2009 1:36 am

Re: How to change the nav

Postby smiffy6969 » Tue Apr 07, 2009 8:08 am

Hi,

you need to alter your css, do you have any experience with css??.

The double chevron is not in the standard list of options for bullet point types (http://www.w3schools.com/Css/css_list.asp), in a list (which is what a nav is, a list) you can have any of the following

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

These are standard types of bullet, in addition to this you can use your own, by using an image in place of the bullet.

First go create a small image for your bullet (the two chevrons), make it a jpg or gif, then next you have two options on how to implement this

First option you could try which is the correct way to do it, is to use the list-style-image property

you need to alter the css in your css theme,

Code: Select all
list-style-image: url(bullet.jpg);


the above is the correct way to use a user defined image as a bullet, if you have your image in a different place to the css file, you may need to alter the path in front of the filename.

The above option is not always consistent though, stupid ay different browsers render the image differently (different places), it all depends on your li css, and how you have heights set up. in this case you could try the next option.

Code: Select all
ul {
    list-style: none;
}
 
ul li {
    background: url(bullet.jpg) no-repeat 0 .5em;
    padding-left: 17px;
}


this would tell the unordered list to have no style, then the second declaration would create a background using your bullet image, and padd it, meaning you get consistency in all browsers (well near enough).

hope theres some food for thought there for you.

smiffy
smiffy6969
 
Posts: 1866
Joined: Sat May 24, 2008 8:18 am
Location: Loughborough, UK

Re: How to change the nav

Postby smiffy6969 » Tue Apr 07, 2009 8:09 am

Moving to css play forum.

smiffy
smiffy6969
 
Posts: 1866
Joined: Sat May 24, 2008 8:18 am
Location: Loughborough, UK

Re: How to change the nav

Postby franticisme » Tue Apr 07, 2009 2:47 pm

Hi I solved it i edited one of the core files and it worked i just removed your <ul> bit with the chevron and it worked fine

only other thing is i have a footer nav which is displayed like About Us | Sitemap | Contact Us | etc

How can i create a nav like that or have i just messed up things by changing the core file with the <ul> bit?????

sorry for messing with your wonderful work

LINKS REMOVED

regards
Shane
Last edited by franticisme on Mon Jun 22, 2009 6:58 pm, edited 1 time in total.
franticisme
 
Posts: 5
Joined: Tue Apr 07, 2009 1:36 am

Re: How to change the nav

Postby smiffy6969 » Tue Apr 07, 2009 3:26 pm

Hi,

Removing the UL bit is going to break your code, you will end up with invalid code (see w3c validation), this means you will get all sorts of crazy things happening (if you didn't remove the closing ul tag), you will also have li elements not surrounded by a ul parent element, so this my cause errors in how it looks across different browsers too......

The menu system works on a automatic creation system, where by the links are dynamically created, if you want to do something like

hello | another | footer | link

then you will need to hack the core code, as this type of layouts is more destined for static layouts. You could just remove the footer navigation and change the copyright footer in the settings manager to contain the links you want, but then this sort of defeats the abject of having a cms that auto generates menus.

To be completely honest those little | do not really solve any purpose do they, do you really need them, what purpose do they serve??.

If you want to do these changes you will need to alter the core code, plus you need to remember that when updates come through for new releases, you will need to track your changes if you wish to upgrade (or your changes will get lost), if your not proficient in php I would not recommend making changes to core code, but hey it's your bag so you are free to do as you wish.

I can't really find the time at the mo, as I am bogged down with a lot, including the next version, your requests will need changes to be made, and they will not be completely straightforward either (as the side bar and nav use same code, but you want them to display differently).

My best answer, use css to style links, not html (using >> or |), use css styling like borders, bullets, bullet images etc, this is the correct way to style (not by adding extra characters), and this way would be supported by future upgrades of core :)

just my 2 pence

smiffy
smiffy6969
 
Posts: 1866
Joined: Sat May 24, 2008 8:18 am
Location: Loughborough, UK

Re: How to change the nav

Postby franticisme » Wed Apr 08, 2009 5:11 am

hi
thanks very much for the reply unfortunatly its not for myself its an existing website i was asked to take over and put a cms in place but not lose the design. the web hosting doesnt even have mysql or email accounts and shes paying 300 quid a year for it. it is unacceptable but has to be dealt with. im fairly farmiliar with php and css but not at an advanced level. if you could point me in the right direction for the bottom nav i would really appreciate it. im not asking for a rewrite just a quick solution as i am not even getting paid for the job. i like razor cms and its functionality and will be developing blade packs for the core system.
thanks
shane
franticisme
 
Posts: 5
Joined: Tue Apr 07, 2009 1:36 am

Re: How to change the nav

Postby douglasmanee » Sat Sep 27, 2014 8:11 am

Try this CSS Navigation

Douglas
douglasmanee
 
Posts: 1
Joined: Sat Sep 27, 2014 8:08 am


Return to CSS Support



Who is online

Users browsing this forum: No registered users and 1 guest

cron