HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


How to remove underlines and > (›) symbol from menu links

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#66206 (In Topic #14150)
Avatar

Community saint

Aloha from Hawaii,
In the templates I was able to figure out how to remove the >> symbol from dropdown menu top links. That was fairly easy. But where do we go to remove the single > symbol from links?

And how do you adjust template code so that links are not underlined until you roll over them?

Thank you
Back to the top
 
Posted
Rating:
#66209
Avatar

Community saint

Aloha Rishi,

Those modifications can be easily done by editing the global.css file of your current theme.
However, make sure not to change global.css from the default theme.

Code

.menu_type__tree {
    background: url('{$IMG;,menus/menu_bullet_expand}') no-repeat 0 5px !important;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
Edit global.css
Search for the above listed lines.
(check carefully, as there are 5 instances where you have to remove the background bullet image)

–>change background line for background: none !important;

–>change text-decoration line for text-decoration: none;

In order for the links not to be underlined until you roll over them, add the following line below the one you just edited, now to add the underline just for the hover instance:

Code

a:hover {
    text-decoration: underline !important;
}

Hope this will help!
Jean
Back to the top
 
Posted
Rating:
#66240
Avatar

Community saint

Aloha Jean,

Thank you very much for taking the time to explain how to do this! I was successful thanks to your clear instruction.
If I may ask another question, my main top horizontal dropdown menu looks like this with a dark black border around each menu item:



If I wanted to make the borders very light, so it doesn't stand out so much but still distinguishes each menu item, is this the place in global.css where I would edit?

menu_type__dropdown ul.nlevel, .menu_type__popup ul {
    line-height: 1.4em;
    border-top: 1px solid #c5aa84; /* */
    border-left: 1px solid #c5aa84; /* */
    border-right: 1px solid #c5aa84; /* */

Do I replace "solid" with something else, or change the Hex Value to another color?

(I don't currently have any tech know-how to help others on this forum, but at least I was able to offer support by hiring ocPortal to tweak some things for my site.)
Back to the top
 
Posted
Rating:
#66241
Avatar

Community saint

You will want to change the hex value. Here is a really handy tool I use a lot to help figure out what colors I want.

Color picker

This could be quite helpful to you as well.

w3schools
Back to the top
 
Posted
Rating:
#66261
Avatar

Community saint

Another great tool, if you use Firefox as your browser, is Firebug

It allows you to inspect, edit and monitor CSS, HTML, JavaScript and Net requests in any web page and see the result of your modifications before actually changing anything. It's a "sandbox" for web designers.
You will not want to part with it once you start using it to adjust your web elements, believe me!

Cheers!
Back to the top
 
Posted
Rating:
#66272
Avatar

Community saint

Thank you for the very helpful links, Brian.
Yes Jean, I use Firefox and have Firebug installed, just haven't really explored it yet. Will do.

Thank you both.
Back to the top
 
Posted
Rating:
#89408
Avatar

Fan in action

This is a very useful old post!

But HOW did you change the roll over colour from red to green ?

The menu_type_tree (at the end of global.css) does not have a convenient colour attribute to play with - like all the other menu types listed there - so where does it get its red roll over colour from ?

I can change every single other menu type on my page to green - except the main panel left.

Nick
Back to the top
 
Posted
Rating:
#89409
Avatar

Community saint

Nick said

This is a very useful old post!

But HOW did you change the roll over colour from red to green ?

The menu_type_tree (at the end of global.css) does not have a convenient colour attribute to play with - like all the other menu types listed there - so where does it get its red roll over colour from ?

I can change every single other menu type on my page to green - except the main panel left.

Nick
Hi Nick!

It is associated with the standardbox_links_classic where you will find the color values for a:link, a:visited and a:hover.

Search this line:

Code

.standardbox_links_classic a:link, .standardbox_title_panel a:link, .standardbox a:link, .standardbox_main_classic a:link {


Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#89472
Avatar

Fan in action

Thanks, that was the last piece of the puzzle I needed to complete the basic design of my new site bluejade.co.za . I'll improve the design as I go along - because this is my own permanent site.

I took the dramatic step today of actually registering Blue Jade as a company - may as well put my hardware knowlege to good use.

Nick
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: