Hide sidebar in Digg 3 Column

  • Author
    Posts
  • #1218003

    cpcoolpoo78
    Member

    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?

    Thanks

    #1218042

    cpcoolpoo78
    Member

    Typo. I meant to put ‘the right sidebar’, not ‘a the right sidebar’.

    #1218049

    cpcoolpoo78
    Member

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

    #1218185

    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:

    .narrowcolumnwrapper,
    .narrowcolumn,
    .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:

    .narrowcolumnwrapper,
    .narrowcolumn,
    .content {
    	background: none;
    }
    .narrowcolumnwrapper {
    	border: 1px solid #bcbcbc;
    	border-radius: 6px;
    }
    #1218196

    cpcoolpoo78
    Member

    This is what happened with the code you gave me…
    http://prntscr.com/10z6km

    #1218197

    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 WordPress.com blog with Digg 3. That should work.

    If you need in-depth design work done for you, consider checking out this service: http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    #1218203

    cpcoolpoo78
    Member

    My custom CSS (without the code you provided):
    post-body blockquote {
    color: #000;
    background: #fff;
    border: 3px solid #B1DBF7;
    padding: 1em;
    }

    .post {
    border: 6px solid #A0C8E9;
    background: #E8F1F8;
    margin: 0 0 10px;
    }

    .widget {
    border: 2px solid #A0C8E9;
    background: #E8F1F8;
    margin: 0 0 10px;
    }

    img {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    }

    .post h2 {
    text-shadow: 1px 1px 0 #1C87FF;
    color: blue;
    font-family: arial;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.4em;
    }

    h2 {
    text-shadow: 1px 1px 0 #1C87FF;
    color: blue;
    letter-spacing: 0;
    font-family: arial;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 1.4em;
    text-transform: none;
    }

    #1218204

    cpcoolpoo78
    Member

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

    #1218205

    cpcoolpoo78
    Member

    Nevermind… Visitors said they want 2 sidebars.

The topic ‘Hide sidebar in Digg 3 Column’ is closed to new replies.