Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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:

    http://www.dikkevettecourgette.com

    Right now the website with newscast is:

    http://bijvanatten.nl

    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

    Thanks!

    #72997

    Hello,

    With the current layout of Newscast I think it will be difficult to replicate the layout of http://dikkevettecourgette.com/.

    Regards,

    Ismael

    #72998

    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 http://bijvanatten.nl)

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

    #72999

    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 http://bijvanatten.nl 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!

    Regards,

    Mya

    #73000

    Thanks Mya for your answer.

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

    #73001

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

    As you can see on http://www.bijvanatten.nl 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?

    #73002

    Hi rwdroge,

    What is it that you are needing to do now?

    Regards,

    Devin

    #73003

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

    #73004

    Hey!

    You can remove the borders with following css code:

    .sidebar {
    border: none !important;
    }

    I’d add this code to style.css.

    Best regards,

    Peter

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

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