Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Theme is applying "hover" logic to my widget


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 10, 2013, 11:43 AM
ryoung
 
32 posts · Nov 2012
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.

Last edited by ryoung; Jan 10, 2013 at 11:48 AM.
  #2  
Old Jan 10, 2013, 12:57 PM
jerryc
 
367 posts · Oct 2012
Florida
Quote:
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):

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.
  #3  
Old Jan 10, 2013, 01:24 PM
lmilesw's Avatar
lmilesw
 
9,961 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Jan 10, 2013, 01:52 PM
ryoung
 
32 posts · Nov 2012
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?
  #5  
Old Jan 10, 2013, 02:41 PM
jerryc
 
367 posts · Oct 2012
Florida
Quote:
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):

Code:
.widget a
{
color: #0090D3;
}

Last edited by jerryc; Jan 10, 2013 at 02:50 PM.
  #6  
Old Jan 10, 2013, 02:44 PM
ryoung
 
32 posts · Nov 2012
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.
  #7  
Old Jan 10, 2013, 02:53 PM
jerryc
 
367 posts · Oct 2012
Florida
Quote:
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):

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.
  #8  
Old Jan 10, 2013, 03:01 PM
lmilesw's Avatar
lmilesw
 
9,961 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Jan 10, 2013, 03:06 PM
ryoung
 
32 posts · Nov 2012
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 */

Last edited by ryoung; Jan 10, 2013 at 03:09 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] how to remove "display:block" from "div.widget ul li{" floralprints Sidebars & Widgets 1 Sep 17, 2012 06:35 AM
Can the Meta widget be added to "bar1", "bar2" or another type of header menu bar? TotalBalance Header configuration & styling 4 Mar 28, 2012 03:06 PM
Set a color for an "active" or "current" link in a sidebar widget. artaud Sidebars & Widgets 8 Oct 11, 2011 04:57 AM
[SOLVED] Sidebar widget not getting "theme styles" jmc34 Sidebars & Widgets 2 Dec 20, 2010 02:25 AM


All times are GMT -6. The time now is 03:24 PM.


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