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.


Need Menu Appearance Customization Help

Login / Search

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

Honoured member

I have been having some issue customizing the look of the menu's, dropdown menu's specificity. I am attempting to add additional CSS code to emboss the buttons to look more modern and clean. However after a lot of trial and error, I have yet to find the specific CSS category associated with the menu buttons... as no changes I make are visibly rendered.

So simply put, my question what is the exact CSS category I can add appearance CSS code to change the buttons on the menu. For a specific reference I am trying to implement this code. Can anyone give me a hand with this?
Back to the top
 
Posted
Item has a rating of 5 (Liked by Chris Graham)  
Rating:
#107447
Avatar

Community saint

In global.css, try this section:

Code

.menu_type__top li, .menu_type__dropdown li.toplevel {
    float: {!en_left};
    border-{!en_left}: 1px solid {$GET,standard_border};
    margin-{!en_right}: -1px;
    margin-bottom: 0;
    {+START,IF,{$MOBILE}}
        font-size: 0.9em;
    {+END}
    {$BETA_CSS_PROPERTY,transition: color\,background-color 0.5s linear;}
}

for the main row of menu buttons. Add something like:

box-shadow: inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.8);

to that section.

For the drop-down portion of the menu, also in global.css, try this section:

Code

.menu_type__popup .menu_spacer, .menu_type__popup li, .menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {
border-bottom: 1px solid {$GET,standard_border};
}

And add the same box-shadow CSS code to that section.

I tested this using the Google Chrome browser developer tool to manipulate the CSS code in the web browser. I didn't test it in an actual ocPortal global.css file and I'm not sure if editing these sections will cause any undesirable effects elsewhere.
Back to the top
 
Posted
Rating:
#107448
Avatar

Honoured member

Gave it a try but the CSS dosn't seem to recognize box-shadow:. I wonder if its even compatable with OCPoratal… I tried simply useing Inset as well, neather gave any visable change in firefox or IE.
Back to the top
 
Posted
Rating:
#107449
Avatar

Honoured member

Seems its a $BETA_CSS_PROPERTY, I can't seem to get it to work properly with buttons… it works fine to frame the wevsite but I can't seem to get it to work on the buttones themseves without breaking things.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jason Verhagen)  
Rating:
#107450
Avatar

Honoured member

It seems i have gotten it to work properly, not sure what i did diffrently, but reading a few CSS tutorials have given me examples that work. Thanks for the feedback.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: