So I've added a text widget with a javascript 'job search' box on my site. The theme is making the text in the widget box greyscale until you hover over it. I'm not sure why?

I tried disabling the greyscale image 'on hover' in the postformat - but obviously that wasn't the issue. Can anyone offer any suggestions as to the issue? it is at www dot landmaninsider dot com

Edit: It also looks like it's using the two theme colors (blue and black), instead of the colors I've defined for it. If that helps anyone narrow down where the issue might lie.

Originally Posted by ryoung

So I've added a text widget with a javascript 'job search' box on my site. The theme is making the text in the widget box greyscale until you hover over it. I'm not sure why?

I tried disabling the greyscale image 'on hover' in the postformat - but obviously that wasn't the issue. Can anyone offer any suggestions as to the issue? it is at www dot landmaninsider dot com

Edit: It also looks like it's using the two theme colors (blue and black), instead of the colors I've defined for it. If that helps anyone narrow down where the issue might lie.

I ran into the same problem. Montezuma has quite specific css. In order to override it, even with a later css declaration, you have to be at least as specific. Here's a simple article about css specificity.

I don't like to touch theme css files, so I use the lazyest stylesheet, which always comes up last. As long as you put equal or greater specificity later, it will override anything earlier. The other thing I like about the lazyest stylesheet is that it keeps all my custom css in one place.

Here's what I used to get my widget text larger and always black (and it worked):

.widget p 
{
font-size: 110%;
color: black;
}

Why do I put my opening brace on a separate line? It makes it very easy to see all my braces that way, and to make sure that each declaration list is properly opened and closed. The overhead of the extra carriage return and line feed in the css file is negligible and, to me, well worth it. Having the opening brace on it's own line also clearly separates the declarations from the selectors.

Why don't I indent the declarations? I use a zero indent coding style, which uses carriage returns and line feeds instead of indents to group things. Look at the above code. Even if there were more selectors and declarations, it would still be quite easy to tell which was which.

You can certainly use that plugin or even Jetpack which has a CSS module. However Montezuma stores the CSS changes made to the virtual CSS files in the database so won't get overwritten in an upgrade. I suspect what you want to change is some of the color attributes in the widgets.css virtual file in the CSS Files section of the theme options.

Ok, so I've been playing with the widgets.css; I think I understand what I need to do but no changes are happening

I'm adding at the bottom of the widgets.css:

#widget #text-5 .widget a {
color: #009200;
}

What I'm trying to do in this instance is change the color of all links inside the text-5 widget. But no dice Am I doing this wrong?

Originally Posted by ryoung

Ok, so I've been playing with the widgets.css; I think I understand what I need to do but no changes are happening

I'm adding at the bottom of the widgets.css:

#widget #text-5 .widget a {
color: #009200;
}

What I'm trying to do in this instance is change the color of all links inside the text-5 widget. But no dice Am I doing this wrong?

That will change the color of the a element (usually a link):

• within something with a .widget class,
• within something with a text-5 id,
• within something with a widget id.

Is that what you're trying to change?

I was able to change my link colors in widgets with only this (and it worked):

.widget a
{
color: #0090D3;
}

yes, I've been able to change the background color and put a box around the widget (just as a test):

#text-5 {
  border: 1px solid #000000;
.widget a { 
  	color: 				#009200;
}
.widget:hover a { 
  	color: 				#009200;
}
}

It adds the border in the right place, but it doesn't change the link text color.

Originally Posted by ryoung

yes, I've been able to change the background color and put a box around the widget (just as a test):

#text-5 {
  border: 1px solid #000000;
.widget a { 
  	color: 				#009200;
}
.widget:hover a { 
  	color: 				#009200;
}
}

It adds the border in the right place, but it doesn't change the link text color.

I see possible bracketing errors. Syntax errors will not work, but not give error messages.

It's always a good idea to validate your css (particularly if it's not working like you think it should). The direct input route lets you copy and paste your custom code into the validator.

In your case I would use something like the following for the selectors in that area.

#jbb_widget_customizable

as the base selector
and

#jbb_widget_customizable li a

for links
and

#jbb_widget_customizable li a:hover

for hover on links

well I got it to validate like this:

#text-5 {
  border: 1px solid #000000;
}
#text-5 .widget a { 
  	color: 				#009200;
}
#text-5 .widget:hover a { 
  	color: 				#009200;
}

But the link colors still dont change ;(


Edit: AHA!

#text-5 a:link {color:#009200;}      /* unvisited link */
#text-5 a:visited {color:#009200;}  /* visited link */