Need help? Check out our Support site, then

Hide sidebar in Digg 3 Column

  1. Hi.

    I use the Digg 3 Column with custom CSS. I was wondering if there was a CSS code to remove a the right sidebar in this theme?


  2. Typo. I meant to put 'the right sidebar', not 'a the right sidebar'.

  3. Actually, I want to hide the left sidebar. Not the right.

  4. I can help you get started and give you some instructions when it comes to learning CSS.

    This will hide the left sidebar in the Digg 3 theme:

    .obar {
    	display: none;

    To find that selector, I right-clicked on the left sidebar and looked at the HTML until I found the top level element for the left sidebar. In this case it is:

    <div class="obar">

    And that's how I knew to use ".obar" as a class selector.

    Then if you want to adjust the spacing to make the main column bigger, you could start with something like this:

    .content {
    	width: 692px;
    .entry {
    	max-width: 667px;

    After that, you'll notice that the Digg 3 Column theme uses images as backgrounds on several wrapper elements to get a rounded corner affect. You can approximate the same thing using CSS with the "border-radius" property. Here is an example:

    .content {
    	background: none;
    .narrowcolumnwrapper {
    	border: 1px solid #bcbcbc;
    	border-radius: 6px;
  5. This is what happened with the code you gave me...

  6. I can only give pointers and offer a place to start. The screenshot you provided looks like it may have other custom CSS involved, and I based my previous reply on the Digg 3 Column demo site. Try deleting all the other CSS you had and just preview the changes I gave on a blog with Digg 3. That should work.

    If you need in-depth design work done for you, consider checking out this service:

  7. My custom CSS (without the code you provided):
    post-body blockquote {<br /> color: #000;<br /> background: #fff;<br /> border: 3px solid #B1DBF7;<br /> padding: 1em;<br /> }</p> <p>.post {<br /> border: 6px solid #A0C8E9;<br /> background: #E8F1F8;<br /> margin: 0 0 10px;<br /> }</p> <p>.widget {<br /> border: 2px solid #A0C8E9;<br /> background: #E8F1F8;<br /> margin: 0 0 10px;<br /> }</p> <p>img {<br /> -webkit-border-radius: 25px;<br /> -moz-border-radius: 25px;<br /> border-radius: 25px;<br /> }</p> <p>.post h2 {<br /> text-shadow: 1px 1px 0 #1C87FF;<br /> color: blue;<br /> font-family: arial;<br /> font-size: 22px;<br /> font-weight: bold;<br /> letter-spacing: 0;<br /> line-height: 1.4em;<br /> }</p> <p>h2 {<br /> text-shadow: 1px 1px 0 #1C87FF;<br /> color: blue;<br /> letter-spacing: 0;<br /> font-family: arial;<br /> font-size: 18px;<br /> font-style: normal;<br /> font-variant: normal;<br /> font-weight: bold;<br /> line-height: 1.4em;<br /> text-transform: none;<br /> }

  8. I just found out that it works when I hide the left sidebar, but not the right sidebar.

  9. Nevermind... Visitors said they want 2 sidebars.

Topic Closed

This topic has been closed to new replies.

About this Topic