Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   Theme is applying "hover" logic to my widget (http://forum.bytesforall.com/showthread.php?t=19302)

ryoung Jan 10, 2013 11:43 AM

Theme is applying "hover" logic to my widget
 
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.

jerryc Jan 10, 2013 12:57 PM

Quote:

Originally Posted by ryoung (Post 94756)
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):

Code:

.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.

lmilesw Jan 10, 2013 01:24 PM

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.

ryoung Jan 10, 2013 01:52 PM

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?

jerryc Jan 10, 2013 02:41 PM

Quote:

Originally Posted by ryoung (Post 94763)
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):

Code:

.widget a
{
color: #0090D3;
}


ryoung Jan 10, 2013 02:44 PM

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

Code:

#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.

jerryc Jan 10, 2013 02:53 PM

Quote:

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

Code:

#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.

lmilesw Jan 10, 2013 03:01 PM

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

#jbb_widget_customizable
as the base selector
and
HTML Code:

#jbb_widget_customizable li a
for links
and
HTML Code:

#jbb_widget_customizable li a:hover
for hover on links

ryoung Jan 10, 2013 03:06 PM

well I got it to validate like this:

Code:

#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!

Code:

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



All times are GMT -6. The time now is 11:01 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.