• Hey, Im working with the FREEmium theme, but can’t make the sidebars smaller and get them to the right a bit more..

    This is the theme I’m taking about.

    Click Here

    This is the css it’s probably in:

    #content { width: 560px; _width: 449px; padding: 16px 15px 16px 14px; color: #55554e; font-size: 1.2em; line-height: 1.2em; float: left; display: inline; }
    #home #content { width: 348px; padding: 16px; _padding: 15px; }
    
    .sidebar { font-size: 1.2em; line-height: 1.2em; float: left; width: 228px; padding: 16px; position: relative; display: inline; }
    
    .sidebar h2 { position: absolute; top: -26px; left: 16px; }
    
    .sidebar li { margin-bottom: 2em; position: relative; }
    
    #sidebar2 { float: left; font-size: 1.2em; line-height: 1.2em; padding: 16px; _padding: 10px; width: 288px; display: inline; }
    
    .sidebar, #sidebar2 { ?padding-top: 44px; }
    
    /* Widgets */
    .sidebar .widget { background: url("img/sidebar_right.png") right bottom no-repeat #f6f6e8; margin: 26px 0 48px -15px; width: 230px; position: relative; padding-bottom: 4px; }
    .sidebar .widget ul, .sidebar .widget div.textwidget, #calendar_wrap { background: url("img/sidebar_right.png") right top no-repeat #f6f6e8; font-size: 1.2em; padding: 1em 16px; }
    .sidebar .widget a { color: #89897c; float: left; text-align: left; _height: 1%; }
    .sidebar .widget a:hover { text-decoration: none; color: #d8d8c7; }
    .sidebar .widget a:hover span { text-decoration: underline; }
    .sidebar .widget small { float: right; color: #d8d8c7; }
    .sidebar .widget h2 small { float: left; }
    .sidebar .widget ul li { background: url("img/li.gif") 0 8px no-repeat; margin: 0; padding-left: 16px; line-height: 26px; border-bottom: 1px solid #e7e7da; color: #D8D8C7; text-align: right; }
    .sidebar .widget ul li:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; width: 0; }
    .sidebar .widget div.textwidget { color: #55554E; }
    
    #sidebar2 .widget { margin-left: -16px; width: 300px; background: none; }
    #sidebar2 .widget ul, #sidebar2 #calendar_wrap { background: none; }
    #sidebar2 .widget a:hover { color: white; }
    
    .sidebar .widget_archive ul { font-size: 1em; }
    
    .sidebar .widget_rss ul { padding-top: .5em; }
    .sidebar .widget_rss ul li { height: auto; background-position: 0px 10px; text-align: left; font-size: .8em; line-height: 1.3em; padding: 8px 0 8px 16px; color: #55554E; }
    .sidebar .widget_rss h2 img { vertical-align: top; position: relative; top: 1.5px; margin-right: 4px; }
    .sidebar .widget_rss h2 a { color: #E7E7DA; }
    .sidebar .widget_rss a { float: none; }
    .sidebar .widget_rss cite { display: block; text-align: right; }
    
    .sidebar .widget_recent_comments a { float: none; }
    .sidebar .widget_recent_comments ul li { text-align: left; color: #55554E; }
    
    .sidebar .widget_recent_entries ul li { text-align: left; }
    
    #calendar { ?margin-top: -24px; }
    #calendar h2 { ?display: none; }
    #calendar_wrap { font-size: 1em; }
    #calendar_wrap table { width: 100%; }
    .sidebar .widget_calendar caption { position: absolute; left: 18px; top: -26px; line-height: 17px; height: 17px; padding: 0 7px 0 6px; font-size: .8em; text-transform: lowercase; color: #E7E7DA; background: transparent url(img/highlight.gif) repeat right top; }
    .sidebar .widget_calendar td, .sidebar .widget_calendar th { width: 28px; height: 24px; text-align: center; line-height: 24px; color: #89897c; border-top: #e7e7da 1px solid; padding: 2px 0; }
    .sidebar .widget_calendar tbody a { float: none; background: url("img/today.gif") no-repeat; display: block; width: 28px; height: 24px; color: white; }
    .sidebar .widget_calendar thead { color: #89897c; font-style: italic; text-transform: lowercase; }
    .sidebar .widget_calendar th { font-weight: normal; border: 0; }
    .sidebar .widget_calendar tfoot a { color: #b4b463; float: none; font-size: .85em; }
    .sidebar .widget_calendar #prev { text-align: left; }
    .sidebar .widget_calendar #next { text-align: right; }
    
    .sidebar .widget_tag_cloud { padding: 16px 16px 32px 16px; width: 198px; line-height: normal; }
    .sidebar .widget_tag_cloud a { margin-right: .5em; font-style: italic; float: none; vertical-align: middle; }
    
    #sidebar2 .widget_tag_cloud { width: 268px; }
    
    .sidebar .widget_search { display: none; } /* Sorry, no search in the sidebar! */
    
    #sidebar2 .widget_links { background: none; width: 310px; }
    #sidebar2 .widget_flickrRSS { width: 305px; }
    #sidebar2 .widget_links ul, #sidebar2 .widget_flickrRSS ul { margin: 0 -7px; background: none; _height: 1%; padding: 0; margin-left: 9px; }
    #sidebar2 .widget_links ul:after, #sidebar2 .widget_flickrRSS ul:after { content: "."; visibility: hidden; display: block; clear: both; height: 0; width: 0; }
    #sidebar2 .widget_links li, #sidebar2 .widget_flickrRSS li { float: left; margin: 7px; ?margin: 5px; height: auto; line-height: normal; border: 0; background: none; padding: 0; }
    #sidebar2 .widget_links img, #sidebar2 .widget_flickrRSS img { border: 6px solid #c3c3b1; display: block; }
Viewing 1 replies (of 1 total)
  • That’s the only code you need to modify:

    #container { margin: 40px auto; width: 960px; background: url("img/content_bg.png"); }
    #home #content { width: 348px; padding: 16px; _padding: 15px; }
    .sidebar { font-size: 1.2em; line-height: 1.2em; float: left; width: 228px; padding: 16px; position: relative; display: inline; }
    #sidebar2 { float: left; font-size: 1.2em; line-height: 1.2em; padding: 16px; _padding: 10px; width: 288px; display: inline; }

    Actually leave #container as it is. It’s only to show that the the width of this theme is 960px.
    Adding the widths of #home #content, .sidebar and #sidebar2 you will see that it’s 348+228+288=864px, but there’s another 96px from padding so alltogether it’s 960. What you’ll add to 348, you have to substract from the other two. That will only modify the homepage, to make changes to post/page part of the theme modify the #content (without the #home). Remember that on single page there is no .sidebar, only #content and #sidebar2. Keep in mind that the backgound images will need some modifying too. Hope that helps.

Viewing 1 replies (of 1 total)
  • The topic ‘Theme FREEmium can’t get sidebars to the right.’ is closed to new replies.