Using widget in two sidebar areas on same page

  • Is it possible to use the widget in two separate sidebar areas on the same page?

    When i try this they will not assume separate styling. the styling (background color in this case) for the widget placed second assumes the styling of the widget placed first. i cannot get them to display individual styling.

    I’m using the Maker Pro genesis theme.

    • This topic was modified 8 years, 4 months ago by inoutdoor.
Viewing 4 replies - 1 through 4 (of 4 total)

  • @inoutdoor, I just ran into this issue today, where I’m including the widget in two different widget areas on different pages.

    It looks like the first widget you create, anywhere on the site, gets its styling included in the <head> section of the site (rather than being nested with the widget).

    You can work around this by using some custom CSS, either by page, widget area ID or individual widget id.

    giddymoon

    (@giddymoon)

    Hi @ancawonka or anyone with a good css workaround,

    Can you post the custom CSS you used? I’ve not been successful with my attempts.

    Thanks!

    ancawonka

    (@ancawonka)

    Hi @giddymoon,

    The custom CSS depends on where you’re including your second widget, so this may not apply to your specific case. But suppose that you include the Simple Social Icons widget in a sidebar, and then inside a footer widget area.

    For the footer, you would do something like this:

    
.footer-widgets-1 .simple-social-icons ul li a, 
.simple-social-icons ul li a:hover {
   font-size: 20px;
   color: #ff00ff !important; /* need this here b/c SSI adds it in header */
}

    Again, the actual CSS you need will depend on where you include you second widget. Use the Web inspector to figure out which rules are triggered and override them as needed.

    giddymoon

    (@giddymoon)

    Thank you @ancawonka!

    I’m using SSI in the primary sidebar widget area, but on different pages. This is the css I tried, but it’s not working.

    The inspector shows:
    The section id= simple-social-icons-2 class=.widget.simple-social-icons
    or section#simple-social-icons-2.widget.simple-social-icons

    Here’s what I tried.

    #simple-social-icons-2.widget.simple-social-icons .simple-social-icons ul li a, simple-social-icons ul li a:hover, simple-social-icons ul li a:focus {
    background-color: #03958f !important;
    background_color_hover: #24504c !important;
    border-radius: 30px;
    color: #ffffff !important;
    border: 1px #ffffff solid !important;
    font-size: 15px;
    padding: 8px;
    }

    or

    simple-social-icons-2 .simple-social-icons ul li a, simple-social-icons ul li a:hover, simple-social-icons ul li a:focus {
    background-color: #03958f !important;
    background_color_hover: #24504c !important;
    border-radius: 30px;
    color: #ffffff !important;
    border: 1px #ffffff solid !important;
    font-size: 15px;
    padding: 8px;
    }

    Thanks again for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using widget in two sidebar areas on same page’ is closed to new replies.