Adding some classes or IDs

  • Hey there y’all.

    Oooooooo boy oh boy! I would love anyone who could help me out here. So I am very comfortable in editing. But I’m trying to wrap my head around some WordPress stuff here.

    For now, this is what I am working on and need help with: I am editing a theme for a buddy. There are two widgets in a sidebar. Both have a little “header” if you will, or title bar above the widget box. This is pulling it’s style of the stylesheet, and is pulling in a #color in the title bar.

    Okay. So I want the two widget title bars to be different colors. So in the style sheet I’ve added a new id. Example:

    #sidebar h3 {background: #1D3B4A;}
    I added:
    #sidebar #contact_newsletter h3 {background: #0DAACF;}

    Now I’m ready to add the ID of #contact_newsletter to the one widget that I want to change the color of. Sooooooo…..now I hit my wall. I understand that WordPress is PHP driven, and that the PHPs generate the HTML code. But I know somewhere there is some file that is telling wordpress that these widget areas should all have a “title bar” with H3 tag text, and #1D3B4A background.

    Does that make sense? Thanks everyone.

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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;
    https://codex.www.ads-software.com/Function_Reference/register_sidebar

    try to add the id="%1$s" to the 'before_widget' parameter.

    Thread Starter enigma2118

    (@enigma2118)

    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.

    Thread Starter enigma2118

    (@enigma2118)

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding some classes or IDs’ is closed to new replies.