Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #5286

    Hi. Love this the clean look of this theme, but I’m finding the code rather cryptic when it comes to customizing some pretty basic features such as the navigation colors. (hover effect, etc). How, where or what code can I change to add a blue glow or hover effect to the all grey menu of style1? I can find references here and there to “block”, and “left” in style.css display references. Some other references to lava lamp or something.

    I’ve searched this Cubit support top to bottom .. I can’t believe this hasn’t been asked a hundred times. I even searched every other theme support that looks similiar. It’s still a mystery!

    Can you help me out? What am I missing?




    the colors in the navigation are defined just by the “a” element.

    You can, however, target the navigation links specifically by putting the following code at the bottom of your style1.css file:

    #nav a {
    color: #ff0099;
    #nav a:hover {
    color: #c0c0c0;


    Thanks for your reply.

    This will change the color of the text, correct? But to change the background of the navigation on mouseover .. will it be a code for a background: color# I will change? or I need to replace a background image or both?


    My previous post was to change the text color.

    To change the background you can edit the following in your style1.css:

    #top #nav li.back, #top #nav .current_page_item a, #top #nav .current_page_parent a, #top #nav .current_page_ancestor a {
    background: url("LINK TO YOUR BACKGROUND LEFT PART") no-repeat scroll right -32px transparent;
    #top #nav li.back .left, #top #nav .current_page_item, #top #nav .current_page_parent, #top #nav .current_page_ancestor {
    background: url("LINK TO YOUR BACKGROUND RIGHT PART") no-repeat scroll left top transparent;

    LEFT PART & RIGHT PART stand for the borders, when you change them individually you’ll see what I mean.


    Sorry, for the delay. Went on vacation before I could figure this out. I’m delving back into it today and hopefully it will make sense to me. Thanks for the assistance.


    Hope it works for you :)


    Wrestled with this all day yesterday, and I’m still not getting it. Since the template is intended for the user to customize it themselves, shouldn’t the author be willing to provide clear instructions on how to do this? I spent a good deal of time online, yesterday, trying to figure out what I was missing; why I wasn’t able to “crack the code” to this silly thing. I read and watched a tutorial on Envato about creating a lavalamp navigation menu, so I could understand the code I was looking at. After several hours, I was finally able to change the background colors in the sub-nav, on hover.

    But the technique has no effect on the top level navigation, because (it appears) the lava.png image either overides it or covers it up. So, I went back into the psd for the lava image, to try to make sense of the layers. See what or where I could add a background color. Of course, there is no helpful notation for the user in that file either. All the labels are characteristically cryptic, just in case anyone is trying unravel the secret code.

    What the heck? What is the big secret? You’ve got hundreds of people people who have purchased this template, in order to begin customizing it for their needs. Why make it so dang difficult to do so? This task should have taken me 20 minutes or less. But I’m still trying to decipher the code days later.

    I’ve tried adding a colored background layer to the lava image, but what I don’t understand now … is what layers to hide before I save it, so that the color can appear behind the rounded tab. Do I then just save it as lava.png and upload to my images1 folder? I really, REALLY hope I can get a straight forward answer to this question.

    It is not clear to me what the code is fetching for the right curve of the tab, and what image it’s fetching for the left. Is it accessing two different layers of the same png file? Is that even possible?


    I forgot to mention, that I left the borders alone … as far as the color of left and right. The only thing I’ve been trying to alter is the background color of the menu on HOVER, whether that is top level or sub-nav. I also ended up changing the text color on hover, so it show up against a new bg color. And, then, because it looked strange if I didn’t do so, also changed the bg color of current active items.

    No matter what I change, nothing seems to have any effect on the bg color ot the top nav tab. As a result, I end up with my text disappearing on mouseover, in the top level navigation. Which doesn’t make for a very useful navigation bar!


    The easiest way to change the color:

    1) Open up lava.psd file.

    2) Click on Layer 2 Copy and afterwards click on the “Gradient” effect (I use the german version of photoshop so I’m not sure how the option is called in English). It’s the third layer effect from the top. You can change the opacity (slider) and the color by clicking into the color field/rectangle to the right. Change the color and click “ok”.

    3) Click on Layer 2 and afterwards click on the “Gradient” effect. Again it’s the third effect from the top. You can change the opacity (slider) and the color by clicking into the color field/rectangle to the right. Change the color and click “ok”.

    Now save the file as lava.png in themes/cubit/images1 – at the end the path should be themes/cubit/images1/lava.png


    I think this is what I need. Thank you very much!


    Glad that I could help you :)

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Customizing Colors for Cubit Menu / Navigation’ is closed to new replies.