Hide sidebar in Digg 3 Column

  • Unknown's avatar
    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

  • Unknown's avatar
    cpcoolpoo78 · Member ·

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

  • Unknown's avatar
    cpcoolpoo78 · Member ·

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

  • Unknown's avatar
    designsimply · Member ·

    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;
}
  • Unknown's avatar
    cpcoolpoo78 · Member ·

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

  • Unknown's avatar
    designsimply · Member ·

    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/

  • Unknown's avatar
    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;
    }

  • Unknown's avatar
    cpcoolpoo78 · Member ·

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

  • Unknown's avatar
    cpcoolpoo78 · Member ·

    Nevermind… Visitors said they want 2 sidebars.

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