Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #11774

    Hi, I’m wondering if it’s possible to create seperate blocks in the sidebar. This means the different blocks would look something like:

    Right now the website with newscast is:

    Where and how can I add the ‘table’ style for the blocks in the sidebar? This so I can add background colors to the table header/rows




    With the current layout of Newscast I think it will be difficult to replicate the layout of




    Thanks for the response, but I don’t want to replicate (I know the styles are totally different).

    But is there a way to create more discrepancy between the items in the sidebar?

    For example by giving a background color to the widget headers? (In my case the ‘Volg ons’ etc. on

    Or do you know another way to make more distinction between the different widgets in the sidebar?


    Hi rwdroge,

    What you would need to do is find the class name of the area you want to format then add a custom style to your custom.css or Quick CSS option in your theme options that targets that class name.

    For example, on you have the widget “Volg ons”, “Nieuwsbrief”, “@BijVanAtten”, and “Populair”. Now the words “Volg ons”, “Nieuwsbrief”, “@BijVanAtten”, and “Populair” are considered the widget title and have the class name “widgettitle” applied to them. So if you wanted to change the background color of those you would add this CSS.

    .widgettitle { background-color:#000000; }

    What that does is tell the browser to set the background color of the widget title to black. You of course could change the color.

    If you wanted to change the background color of the boxes you would have to locate the class name of the DIV, FORM or UL that surrounds the content. For example, “Volgs on” content has a DIV that surrounds them called “socialmedia-buttons” so in order to style that content I would use this.

    .socialmedia-buttons { background-color:#EEEEEE; border:1px solid #CCCCCC; }

    This would add a light grey background with a slightly darker grey border around the icons.

    Now widget titles always use the same class name. The name you use for the content box is a bit trickier because each widget receives its own class or ID name depending on what it is. For instance, I used “socialmedia-buttons” for the “Volgs on” but the name for “Nieuwsbrief” iwould be “ns_widget_mailchimp_form-2”. So you would have to look at the source code in order to find them.

    To get you started, here’s the class or ID names you would need to add to your custom CSS:

    .socialmedia-buttons {
    background-color: #000000;

    #ns_widget_mailchimp_form-2 {
    background-color: #000000;

    .widget_twitter ul {
    background-color: #000000;

    .tw-tabs {
    background-color: #000000;

    Hope this helps!




    Thanks Mya for your answer.

    I’ll see if I find some time to apply this and post the result when done!


    Ok Mya, with your tips I made some progress. Still one issue remaining though.

    As you can see on the social media button box is well bordered without overlapping the border of the widget title.

    Though the same code is used for the second and third box in the sidebar you can see that the right and left border are overlapping those borders of the widget title.

    Any ideas?


    Hi rwdroge,

    What is it that you are needing to do now?




    As is stated above…remove the ‘double’ table borders in de sidebar



    You can remove the borders with following css code:

    .sidebar {
    border: none !important;

    I’d add this code to style.css.

    Best regards,


Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Sidebar in table style’ is closed to new replies.