remove gray box on right & then change right margin to fill that space

  • Unknown's avatar
    kkalavessios · Member ·

    Hi. I’m using the flounder theme. Link to the page I’m trying to edit: http://raisingorthodoxchristians.com/what-do-you-see-at-liturgy/

    On all the posts & pages there is a column on the right (its called a sidebar when I inspect the element). The posts have a green column & the pages have a grey column. I want to remove the grey column only on pages and then make the right margin of text flow into the area I deleted. I read about having to enter the page ID and I think it is 245 but it didnt work for me. I figured out how to get rid of the grey sidebar & how to move the text, but it does it for all posts & pages.

    Here’s the code I used:

    REMOVE SIDEBAR
    .sidebar-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    background: red;
    padding: 0;
    margin: 0 0 10px px;
    }

    MOVES TEXT TO RIGHT
    .hentry.type-page .entry-meta, .hentry.error404 .entry-meta, .hentry.no-results .entry-meta {
    display: none;
    }
    .entry-header, .entry-content, .entry-summary, .comment-links, .comments-area {
    margin-right: 0;
    }
    .type-page .entry-header {
    padding-right: 0;
    }

    I like the right column for the posts, but was wondering if there was a way to make it skinnier or to push it a little more to the right so my photos would be bigger.

    How can I change the color of the big circle and headers?

    Thanks for reading!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    Try this to target individual pages and make the changes you were working on:

    .page-id-245 .sidebar-bg{
    display:none;

}
.page-id-245 .entry-content{
    width: 98%;
}

    This should make the green sidebar smaller:

    footer.entry-meta, .entry-meta.sidebar-bg{
    width: 20%;
	  float: right;

    This should make the posts take up some of the extra space created:

    .entry-meta{
    width: 75%;
    }
    Here’s how to change the color of the big circle: 

    .site-title{
	background-color:green;
	border-radius: 100%
}

    The green I chose is terrible, but put any color you like there.

    Changes the header color: 

    .hentry header.entry-header{
	background-color: black;
}
  • Unknown's avatar
    lizthefair · Member ·

    Also did you mean for your content to cover up the grey widget bar (different from the sidebar we just removed)? Here’s a screen-shot of where it peaks through:

    If you want the bar back:

    #content{
    margin-right:20% !important;

}

    If you want to hide it all together:

    .side-widget-area{
display: none;
}

    hope that helps!

  • Unknown's avatar
    kkalavessios · Member ·

    Thank you SO much!! This worked perfectly. I really appreciate you taking the time to respond. I’ve been trying to figure this out all day. Thanks

  • The topic ‘remove gray box on right & then change right margin to fill that space’ is closed to new replies.