CSS snippet for Vantage sidebar

Open 3 replies pluginplugin-siteorigin-cssquestion
dhitchcock
23 days ago · Last reply by Andrew Misplon 21 days ago

I read through the page (https://siteorigin.com/vantage-documentation/css-snippets/) and googled the topic, which provided weird info.

How do you add a simple border around the sidebar?
Added a text widget to the sidebar widget, but CSS not working.

Thx

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 21 days, 10 hours ago

    Hi,

    In Vantage, the main sidebar uses the #secondary selector, so the CSS should be added in AppearanceCustomizeAdditional CSS or the SiteOrigin Custom CSS editor, not in the Text widget content.

    To add a simple border around the entire sidebar, try:

    #secondary {
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 20px;
}

    If you\’d like rounded corners, add border-radius, for example:

    #secondary {
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 20px;
}

    A few border-radius options:

    – 4px for a slight curve
    – 8px for a softer look
    – 12px for more rounded corners

    If you only want the border around the Text widget itself, use:

    #secondary .widget {
	border: 1px solid #d9d9d9;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 6px;
}

    Cheers
    Andrew

  2. dhitchcock 21 days, 7 hours ago

    Andrew,
    Thank you very much. This was EXACTLY what I needed to make the sidebar appear differently than the main page content.
    Yes, I removed the “text” widget from the sidebar widget and added this code to the overall site CSS settings.

  3. Andrew Misplon Staff 21 days, 5 hours ago

    Super, glad that helped!

    Cheers

    Andrew

Please log in to post on our forums. Signing up is free.

Have a different question or issue?

Start New Thread