css for widget color

• 

  bezego · Member · Feb 28, 2014 at 6:28 pm

  • Copy link
  • Add topic to favorites

  Hello, I am trying to introduce color when hovering over links in my widgets. I have managed to achieve it in my old theme (origin) using this code:

  .sidebar .widget ul li a:hover {
  color: #9a1313;

  I substitute what I got with firebug from opti theme and get:

  .aside .widget-wrap ul li a:hover (
  color: #1899cb;
  }

  but it gets me nowhere :( I tried using # and other various permutations. Still no luck. What am I doing wrong…?

  What’s weird I tried the same with links in the featured categories column on the left handside of the main page – and it works! However in case of categories titles it changes into blue for a split second only. Is it a bug…? Or me again…?

  Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Mar 5, 2014 at 2:39 pm

  • Copy link

  CSS is theme specific, so you may have just had the wrong syntax before or it wasn’t specific enough. What I do is right-click the element in question (the widget link in this case) and select the “Inspect Element” option and then look in the Styles panel to see what selector the theme is using. Then copy that and paste it into the CSS editor with some adjustments.

  You might like:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  There are two mistakes in the example you posted:

  .aside .widget-wrap ul li a:hover (
  color: #1899cb;
  }

  First, the first brace is actually a parentheses mark “(” but should be a curly brace “{“

  Second, aside is an element, not a class. Classes start with a “.” in CSS, but elements shouldn’t have one. So instead of “.aside” it should be “aside” without the dot at the beginning.

  What’s weird I tried the same with links in the featured categories column on the left handside of the main page – and it works! However in case of categories titles it changes into blue for a split second only. Is it a bug…? Or me again…?

  I see you currently have this in your custom CSS:

  #featured-cats h5 a:hover {
  	color: #1899cb;
  }

  [EDIT: forget that part about the “dark” class name, that was for links, not link hovers.]

  But there’s something even more specific further up in your custom CSS that’s overriding both of those:

  .wf-active .headlines a:hover {
  	color: #1899cb;
  }

  So, if you wanted to override all of those and change the hover link color ONLY in the Featured Categories module in the left sidebar, you could do something like this:

  body #featured-cats .headlines a:hover {
  	color: red;
  }

  Change “red” to a color code.

  Now, you probably don’t want to keep adding competing rules, so just be aware of how competing rules in CSS affect each other.

  Here is a good guide:
  http://www.htmldog.com/guides/css/intermediate/specificity/

  And here’s a guide that’s a little more fun :) which explains CSS specificity in Star Wars terms:
  http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html