Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Need to add a border/background/wrapper to the main post and sidebar areas.

  1. profsanders
    Member

    Hello - I would like to add a border/background/wrapper (I'm not sure which is the right term) to the main post and sidebar areas. The two blogs below are very similar in how they've done this, in adding a double-border shaded area behind the main posts and sidebar. This sets these areas apart from the overall background color.

    http://www.geoffsnyder.com/
    http://michaelhyatt.com/

    I would like my blog to have a similar format, but can't figure out how to do it! Thanks so much!

    The blog I need help with is kentsanders.net.

  2. thesacredpath
    Member

    Give this a try and see what you think. I had to adjust a few other things to get it to look right, and you can change the colors and border width as you desire.

    #wrapper .row {
background: #CCCCCC;
border: 8px solid #666666;
}

#head-wrapper .container .row {
background: #FFFFFF;
}

.span4 {
padding-top: 20px;
width: 265px;
}

#main {
margin-top: 14px;
}

  3. profsanders
    Member

    Thank you so much!!!! That is exactly what I needed. I changed the colors a bit and I think it looks. I wouldn't have figured this out for myself.

    Another question: When I look at an individual post, there is a rectangular box at the bottom of the page with nothing in it. It's the same color as the outside border of the posts/sidebar.

    I also have a couple of other questions about formatting my blog, but they are not related. Do I need to post a new question?

  4. timethief
    Member

    @kentsanders
    If your question is not a CSS question but is a general support one then yes please do start another thread.
    http://en.forums.wordpress.com/?new=1

    gowever, if it's a theme specifc question then you are better off posting to the premium support forum. Read-access to the premium themes forum is now open to all users so you can search to see if your question has been previously asked and answered there. The premium theme forums are at http://premium-themes.forums.wordpress.com/ with separate sections for each theme.

    If you are not successful when searching there is a link for the specific Premium Theme support forum for your theme under Appearance -> Themes in your blog’s Dashboard, but do note that the premium theme must be active and you must be signed in as the user who purchased it in order to see it and post to it.

  5. thesacredpath
    Member

    Ah, that sometimes happens where something sneaks in with a change. It has to do with them using the same class for a lot of things. Add this to get rid of that box.

    #single-post-nav {
border: none !important;
}

  6. profsanders
    Member

    @thesacredpath, Thanks for the help. Worked like a charm!

    @timethief, Thanks also - will do.

    One of the things I'd like to do is add bigger social media icons, since Standard theme lets you add them, but they are small by default. I know there is an option to do this under the Standard theme Admin panel. If I go to standardtheme.com and click the Admin Panel box, it shows a screen shot. However, I cannot figure out where to access this specific Admin panel on WordPress. Is this specific Admin panel (for Standard theme) only available if you are self-hosting?

  7. thesacredpath
    Member

    There are differences between the themes in the wild out on the internet for self-hosted sites, and for the sites here on wordpress.com. WordPress will remove some things and add others so that they work for the system here, so you can't go by what is on the theme designer's site.

    I tried a couple tricks to enlarge the social media icons, but was not able to do it. Even if I had been able to, it would have pixelated them since the size you see is the size if the image.

  8. profsanders
    Member

    Thanks again! I have downloaded larger social media icons - is it possible to use those instead of the small ones that are included with Standard theme?

  9. thesacredpath
    Member

    The icons at the top right of the theme are in the theme PHP script files, NOT in the CSS, so they cannot be replaced.

    You could hide the ones at the top, put the new icons into a text widget in the sidebar and then use some positioning tricks to move that text widget up and into that area. If you want to do that, get the icons into the text widget and linked to your social media pages and then post back here and we can help move them.

  10. profsanders
    Member

    I put larger icons on the sidebar, with each of them (which have proper links embedded) in an image widget. I couldn't figure out how to place a picture into the text widget. Will this work? The icons are 40x40, which seemed like a good size.

    Additionally, I couldn't remove the small RSS icon at the top (and can't get it to work).

    Thank you so much for your patience and help!

  11. thesacredpath
    Member

    It's better to have them all in a single text widget. The easiest way to do that and to link them is to do it first in a draft post, then switch to the HTML tab, copy out all the code and then paste that code into the text widget.

    To remove the social media icons from the top, use this:

    #social-networking {
display: none;
}

  12. thesacredpath
    Member

    Here is a support document on creating text widget links using the post/page editor: http://en.support.wordpress.com/links/text-widget-links/ .

  13. profsanders
    Member

    Thanks! That all seemed to work, and the icons (with accompanying links) are in a text widget sidebar now. However, I'm not sure how to get rid of the white space around some of the icons. I know it's part of the image.The original images are bigger, but I shrunk these to 35 px squares, which seemed to be about the right size to be included in the nav bar.

  14. designsimply
    Staff

    You need to edit an image directly in a graphics program in order to get rid of any white space in them. I would suggest trying to find a different icon set that has transparent backgrounds instead of a white background. Or, you can give the widget area some layout using the overflow property and that will make it so the background behind the widgets is white:

    #text-3 {
	overflow: hidden;
}

  15. profsanders
    Member

    Thanks - found a different set and put them (and links) on a widget on the side. What is the easiest way to move these to the navigation bar?

  16. designsimply
    Staff

    Here's an example you can start with:

    #text-3 {
	top: 204px;
	display: block;
	position: absolute;
	border: inherit;
	background: none !important;
}

    Adjust the top value as necessary.

  17. profsanders
    Member

    Thanks - where in the code do I put the html text that is currently in the text widget?

  18. profsanders
    Member

    Looks like it worked - thanks!

  19. designsimply
    Staff

    Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags