tuviaserber

Same here, please help!

Had to change the following entry:

/* Site title. */
#site-title {
	margin-right: 0% !important;
	width: 90% !important;
}

Hi, just one more detail. In order to have the color change when you hover the mouse, add the following (I’m just working with the secondary menu, so I don’t touch the primary menu):

/* Sub-nav indicator. */
#menu-secondary ul a:hover {
        background: #555 !important;
}

Thanks again!

Sorry, forgot to point out that the main line is:

#menu-secondary li a:hover {
        background: #000000 !important;
	color: #ffffff !important;
	font-weight: bold;
}

This line modifies the menu when you are on top of it.

OK! I’ve got it! Here comes the solution: I had to separate some css definitions. Not shure exactly how they work all together, but I tested using weird colors (like green and violet) until I found out which definition is doing what. Here’s the final code:

/* Menu */
#menu-secondary {
        display: block;
        padding: 0 2% 1em;
        width: 96%;
        height: 2em; /* 32px / 16px = 2 */
	background: #ffffff !important;
}

#menu-secondary li a {
        color: #000000 !important;
        font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
        letter-spacing: 1px;
        margin-bottom: 0.363636364em; /* 4px / 11px = 0.363636364 */
        padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182  */
        text-transform: uppercase;
}

#menu-secondary li.sfHover a {
        background: #ca4842;
	color: #ffffff !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

#menu-secondary li.current-menu-item a {
        background: #000000 !important;
	color: #ffffff !important;
}

#menu-secondary li a:hover {
        background: #000000 !important;
	color: #ffffff !important;
	font-weight: bold;
}

#menu-secondary li.sfHover a {
        background: #000000 !important;
        color: #ffffff !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

/* Menu mobile */
#menu-secondary-title a {
        background: #000000 !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color: #fff !important;
        font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
        letter-spacing: 1px;
        padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182  */
        text-transform: uppercase;
}

You can see that the lines that have !important are the added or modify lines. Also the mobile menu has to be changed, to keep consistency.

Thank you Robin for the tips and time!!!!

I can’t do that… my supervisor will kill me if I do that…. sorry. Can I send you by email the files of the theme + the child theme?

Ok, what do you think I should do? Any ideas?

Hi there,
I tried your code, no results though. I’m not sure how to check for duplicate entries in the CSS, since I left the original CSS that comes with the Theme untouched, and just added my own CSS in the child directory with the entries I’d like to modify.

I’m adding here the original code from the style.css of the Theme:
For reference:
#ca4842 = red
#e9edf1 = grey
#404040 = dark grey

/* Menu secondary. */
#menu-secondary {
display: block;
padding: 0 2% 1em;
width: 96%;
height: 2em; /* 32px / 16px = 2 */
}
#menu-secondary .wrap {
margin: 0 auto;
}
#menu-secondary ul {
padding: 0;
}
#menu-secondary li {
display: inline;
margin-left: 1em;
}
#menu-secondary li:first-child {
margin-left: 0;
}
#menu-secondary li a {
color: #ca4842;
font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
letter-spacing: 1px;
margin-bottom: 0.363636364em; /* 4px / 11px = 0.363636364 */
padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182 */
text-transform: uppercase;
}
#menu-secondary li li a {
margin-bottom: 0;
}
#menu-secondary li li {
margin-left: 0;
}
#menu-secondary li.current-menu-item a,
#menu-secondary li a:hover,
#menu-secondary li.sfHover a {
background: #ca4842;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
}
#menu-secondary li a:hover,
#menu-secondary li.sfHover a {
text-decoration: none;
}
#menu-secondary li li a,
#menu-secondary li.sfHover li a,
#menu-secondary li li.sfHover li a {
background: #e9edf1;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
color: #ca4842;
border-bottom: 1px solid #fff;
padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
}
#menu-secondary li li.current-menu-item a,
#menu-secondary li li.sfHover li.current-menu-item a {
color: #404040;
}
#menu-secondary li li a:hover,
#menu-secondary li li.sfHover a,
#menu-secondary li li.sfHover li a:hover {
background: #fff;
color: #404040;
}

/* Drop-down styles. */
#menu-secondary li:hover ul,
#menu-secondary li.sfHover ul {
top: 2.0625em; /* 33px / 16px = 2.0625 */
}
#menu-secondary li:hover li ul,
#menu-secondary li.sfHover li ul {
top: -999em;
}
#menu-secondary li li:hover ul,
#menu-secondary li li.sfHover ul {
margin-left: 0;
padding-bottom: 0;
top: 0;
}

/* Sub-nav indicator. */
#menu-primary ul .menu-item-parent > a:after,
#menu-secondary ul .menu-item-parent > a:after {
content: "02B"; /* Plus sign. */
float: right;
padding-left: 8px;
padding-left: 0.5rem;
position: absolute;
}
#menu-primary ul .menu-item-parent > a,
#menu-secondary ul .menu-item-parent > a {
padding-right: 24px;
padding-right: 1.5rem;
}
#menu-primary ul ul .menu-item-parent > a:after,
#menu-secondary ul ul .menu-item-parent > a:after {
position: static;
}
#menu-primary ul ul .menu-item-parent > a,
#menu-secondary ul ul .menu-item-parent > a {
padding-right: 8px;
padding-right: 0.5rem;
}
.

I do see duplicate entries, but they modify each one a different attribute. Don’t know…

Any idea?

I’d prefer the following:
Default: menu background white, text blue. The selected menu should be background light blue, same text color.
When you hover over a dropdown item, the text should be blue and the background white. However this should only apply to the item right under the mouse, the rest of the dropdown should be background light blue and text blue.

Hope I’m being clear….

If I change the second CSS to:
/* Dropdown menu */
#menu-secondary li li a,
#menu-secondary li.sfHover li a,
#menu-secondary li li.sfHover li a {
background: #ffffff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
color: #ca4842;
border-bottom: 1px solid #fff;
padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
}

All the menus under the main menu item become white….

OK! Thank you for the quick response. I changed the CSS to the following (in child theme):
/* First menu item */
#menu-secondary li.current-menu-item a,
#menu-secondary li a:hover,
#menu-secondary li.sfHover a {
background: #e9edf1 !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
}

/* Dropdown menu */
#menu-secondary li li a,
#menu-secondary li.sfHover li a,
#menu-secondary li li.sfHover li a {
background: #e9edf1 !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
color: #ca4842;
border-bottom: 1px solid #fff;
padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
}

Colors are fine, however the problem persists: the menu item under the mouse should have background in white, while the others the light blue.

Please see https://www.jabadlaplata.org.ar for example of this behavior.

Same problem here… Any Haiku past six doesn’t allow to play the file. The plugin appears, but it doesn’t play….

Help please!!!

Hi, check file content.php under themes/path, there you’ll find the ‘bylines’ that define what comes before and after each post.

I really recommend Sami’s solution of a child theme. My site grew already too much to use it, so I ended up modifying (a lot!) Sami’s theme to fit my needs.

Be well,

Ok. Thank you very much for your speedy answers. I think I’ll try the child theme before my site grows too much…

Thanks again!

I see. I’ll try to make all this changes. To be honest, it scares me a little since the site is working like I at it to right now… and the menu is quite big to re-do it…

What do you think? Is it worth doing all the changes just for code’s sake?

Thank you!