I like the bullets in my theme. How can I make the plugin match?

  • Resolved DarrylR

    (@darrylr-1)


    8 years, 6 months ago

    Great job on the plugin! It worked “right out of the box”!

    We’re using the Inceptio theme. You can see the sidebar bullet style that it uses on our blog archive page at http://www.mindandhand.com/blog-archives/. I’d like to add a Posts in Sidebar widget to our sidebar and have its items match other widgets in the sidebar (e.g. “> post title”).

    I read a lot of support posts about suppressing the bullets (which you addressed very elegantly in the latest version with the “Try to remove the bullets and the extra left space from the list elements” checkbox, which works for me). I also read posts about modifying the theme that you’re running. However, I haven’t seen any posts (or documentation) on making the style of the plugin match a theme. I’m sure it’s possible using CSS, but I’m not sure what to add to the Custom Styles text area in the widget to do it.

    Thanks,
    Darryl R.

    https://wordpress.org/plugins/posts-in-sidebar/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Aldo Latino

    (@aldolat)

    8 years, 6 months ago

    Hi @darrylr-1
    add a Posts in Sidebar widget to your sidebar and in the panel “Custom Styles” paste these lines:

    .widget ul.pis-ul {
list-style: none;
margin: 0;
padding: 0;
}

.widget ul.pis-ul li {
border-bottom: 1px solid #e5e5e5;
}

.widget ul li.pis-li > a {
color: #333;
display: block;
padding: 8px 0 8px 11px;
background: url(images/bullets/list-arrow.png) no-repeat left 1.166em;
}

    Let me know.

    If it does not work as expected, leave the widget active and tell me back here. I’ll reply as soon as possible.

    Thread Starter DarrylR

    (@darrylr-1)

    8 years, 6 months ago

    Hi, aldolat,

    Thanks for the reply. I almost have it working using the following CSS:

    .widget ul.pis-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .widget ul.pis-ul li {
    border-bottom: 1px solid #e5e5e5;
    }
    .widget ul.pis-ul li > p {
    margin-bottom: 10px;
    }
    .widget ul.pis-ul li > p > a, .widget ul.pis-ul li > p > a > * {
    color: #333;
    }
    .widget ul.pis-ul li > p > a {
    display: block;
    padding: 8px 0px 0px 11px;
    background: url(http://localhost/list-arrow.png) no-repeat left 1.166em;
    }
    .widget ul.pis-ul li > p > a:hover {
    color: #2A8FBD;
    }

    I’m using a PIS widget in a different sidebar on another page, and the styles above changed the appearance of the widget on that sidebar also. This would have been OK if I had not chosen to suppress the bullets on the other PIS widget (because it displays the featured image of each post). I ended up with a combination of bullets and featured images, which doesn’t look good. How do I incorporate the widget ID (e.g. #pis_posts_in_sidebar-3) into the styles above?

    Thanks,
    Darryl R.

    Thread Starter DarrylR

    (@darrylr-1)

    8 years, 6 months ago

    I tried the following syntax examples, and neither worked:

    #pis_posts_in_sidebar-3 ul.pis-ul li > p > a:hover {
    color: #2A8FBD;
    }

    #pis_posts_in_sidebar-3.pis-ul li > p > a:hover {
    color: #2A8FBD;
    }

    Plugin Author Aldo Latino

    (@aldolat)

    8 years, 6 months ago

    Simply prepend the ID selector to every class selector, for example:

    #pis_posts_in_sidebar-13 .pis-title {
font-size: 18px;
}

    Let me know.

    If you give the URL of the page you are editing I can help you better.

    Thread Starter DarrylR

    (@darrylr-1)

    8 years, 6 months ago

    Hello, Aldo,

    I achieve the appearance that I want using this CSS:

    .pis-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .pis-ul li {
    border-bottom: 1px solid #e5e5e5;
    }
    .pis-ul li > p {
    margin-bottom: 10px;
    }
    .pis-ul li > p > a, .pis-ul li > p > a > * {
    color: #333;
    }
    .pis-ul li > p > a {
    display: block;
    padding: 8px 0px 0px 11px;
    background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
    }
    .pis-ul li > p > a:hover {
    color: #93ac12;
    }

    However, when I prepend the ID selector (like the example below) in our theme (Inceptio), the list reverts to a standard unordered list, suggesting that the ID isn’t valid. When I tried it in the Twenty Fifteen theme, it worked. Is it possible that Inceptio strips out the prepended ID?

    #pis_posts_in_sidebar-2 .pis-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #pis_posts_in_sidebar-2 .pis-ul li {
    border-bottom: 1px solid #e5e5e5;
    }
    #pis_posts_in_sidebar-2 .pis-ul li > p {
    margin-bottom: 10px;
    }
    #pis_posts_in_sidebar-2 .pis-ul li > p > a, #pis_posts_in_sidebar-2 .pis-ul li > p > a > * {
    color: #333;
    }
    #pis_posts_in_sidebar-2 .pis-ul li > p > a {
    display: block;
    padding: 8px 0px 0px 11px;
    background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
    }
    #pis_posts_in_sidebar-2 .pis-ul li > p > a:hover {
    color: #93ac12;
    }

    You can see the page with the ID selector prepended in the Inceptio theme at http://sandbox2.mindandhand.com/blog-overview/. Let me know if it would be helpful to see it in the Twenty Fifteen theme (where it works).

    Thanks,
    Darryl R.

    Thread Starter DarrylR

    (@darrylr-1)

    8 years, 6 months ago

    Aldo, honestly, I think you anticipated everyone’s needs with this plugin.

    I added a global container named “pis_posts_in_sidebar-3-container” for the widget using the “Add a global container with this CSS class” field in the Extras section. Then I prepended the styles with that class as follows, and it worked:

    .pis_posts_in_sidebar-3-container .pis-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .pis_posts_in_sidebar-3-container .pis-ul li {
    border-bottom: 1px solid #e5e5e5;
    }
    .pis_posts_in_sidebar-3-container .pis-ul li > p {
    margin-bottom: 10px;
    }
    .pis_posts_in_sidebar-3-container .pis-ul li > p > a, .pis_posts_in_sidebar-3-container .pis-ul li > p > a > * {
    color: #333;
    }
    .pis_posts_in_sidebar-3-container .pis-ul li > p > a {
    display: block;
    padding: 8px 0px 0px 11px;
    background: url(../wp-content/themes/inceptio/images/bullets/list-arrow.png) no-repeat left 1.166em;
    }
    .pis_posts_in_sidebar-3-container .pis-ul li > p > a:hover {
    color: #2A8FBD;
    }

    The styles above only affect the widget on the blog-overview page, and the other widget is unaffected!

    Thanks,
    Darryl R.

    Plugin Author Aldo Latino

    (@aldolat)

    8 years, 6 months ago

    You made a great work and I’m happy you find this plugin useful! 🙂

    May I consider the topic as resolved?

    Thread Starter DarrylR

    (@darrylr-1)

    8 years, 6 months ago

    Yes. It’s resolved. Thanks again.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘I like the bullets in my theme. How can I make the plugin match?’ is closed to new replies.