Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
To find the origins of a style quickly:
– Open the webpage in Google Chrome.
– Right click on the page element you want to find CSS for.
– Select ‘Inspect element’.
– A new toolbar appears. Look at the right column. It shows CSS. It should show the origins of the CSS too.
You don’t have to worry about the origins of the styles, because its discouraged you edit the theme’s files at all.
Make your changes through a Custom CSS Manager plugin‘s section of the dashboard. That should override (providing you use specific or more specific selectors) the theme’s original styles.
if the widgets do not have individual css ids, then it is caused by the way the theme does the register_sidebar() in functions.php;
http://codex.wordpress.org/Function_Reference/register_sidebar
try to add the id="%1$s" to the 'before_widget' parameter.
Hey Guys, thanks for the help so far. Still plugging away at it though.
Andrew, thank you for the advice, but altering the CSS isn’t the issue. What I want to be able to do is add an ID or a Class.
In other words: I have two boxes. The CSS colors them both. They both have the same ID and Class. I want to add one more ID or Class to just one of the boxes. Then duplicate the CSS line that styles both boxes, add my new ID or Class to the duplicated line, and thus have one box be one color, the other some other color.
AlchyMyth, thank you as well. Took a look at the Functions.php. Doesn’t look like that is giving the sidebar widgets any ID
if (function_exists(‘register_sidebar’)) {
$args = array(‘name’ => ‘Home’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ‘before_widget’ => ‘<div class=”widget box”><div>’, ‘after_widget’ => ‘<div class=”clear nodisplay”></div></div></div>’);
register_sidebar($args);
}
Again, so much thanks to everyone. Just gonna keep tearing through this code, see what I can make of it.
try and change that to:
if (function_exists('register_sidebar')) {
$args = array('name' => 'Home', 'before_title' => '<h3>', 'after_title' => '</h3>', 'before_widget' => '<div id="%1$s" class="widget box"><div>', 'after_widget' => '<div class="clear nodisplay"></div></div></div>');
register_sidebar($args);
}
then check with a browser inspection tool what css ids the widgets have.
Fantastic! Thank you Alchymyth! I was able to get the ID and then able to write a CSS line for just that ID.
Can I ask you, why does adding id=”%1$s” allow me to see the IDs? I guess, just basically, what does adding that id do?
Thanks again!!!
