S2Bloggish

... but I'm driving myself crazy with this. I can't seem to align my journal (mod_squad)to the center to fit properly in the background. I added a 100px wide background image to the container attribute and set my pagebody to 900px. It fits fine when it comes to width, but it keeps aligning to the left. I can't seem to get it to align center within the container.

Any ideas?

Hi! I've found this comm very useful in the past, but this time I can't find what I need.

I want to erase my username from the banner. I can change the size, the alignment, the font . . . but I can't figure out how to remove it entirely.

Please help?



- I'm paid, BTW.

I've noticed that there is a great demand to make the Bloggish layout "wider" (or smaller). This can be accomplished very easily for all account types by using a small bit of CSS.

Take into account that if you are using a default bloggish style, the background image is created for the default layout width. You will have to do away with the background image or create your own background that is suited to the width you desire.

Basic Code:

/* ENTER WIDTH HERE */
#container{
width:1024px;
background:white;
}

/* THE REST */
#pagebody, #banner{
width:auto;
margin:0;
}
#alpha{
width:75% !important;
margin:0;
}
#beta{
width:25% !important;
margin:0;
}

» If you have your sidebar on the left side, you would flip-flop the codes so #beta is 75% and #alpha is 25%.

» If you are using the three column layout, you would set #alpha to 25%, #beta to 50% and add a new identifier: #gamma at 25%.



If you want to keep the "separated" look, there are a few different methods:

Method #1 Add borders that match the #container background. Use #alpha-inner if your sidebar is on the right. Use #beta-inner if it's on the left. Use #alpha-inner and #gamma-inner for 3 column style.

#alpha-inner{
border-right:15px solid white;
}
#pagebody{
border-top:15px solid white;
}
#container{
border:15px solid white;
}
#gamma-inner{
border-left:15px solid white;
}


Method #2 Move your background colors to the inner div's and use actual margins. (This is the "right" way...) Example colors based on the Powell Street theme.

/* GET RID OF ORIGINAL BACKGROUND */
#alpha, #beta, #banner{
background:none !important;
}

#alpha-inner{
background: #e7e7ec !important;
margin:15px;
}
#beta-inner{
background: #E7E2C6 !important;
margin:15px;
margin-left:0;
}
#banner-inner{
background:#527276 !important;
margin:15px;
margin-bottom:0;
}

/* NOT SURE WHY THIS IS NEEDED, BUT IT IS */
#banner{
padding-top:1px;
}


Method #3 This is the easiest way, but also the least reliable. Remove the margin:0; from the codes, and make the 75% smaller (something like 71% seems to work.) I don't really recommend using this method unless you can not understand the two previous methods.

#alpha{
width:71% !important;
}
#beta{
width:25% !important;
}

For some unkown reason, the navigation links are absent on the one column Bloggish layout. Here is a code you can use in a paid user layer to replace them.


#### This is just CSS. Change the green parts. ####
set custom_css = "
#banner-links li{display:inline; background:none;}
#banner-links ul{background:#527276;padding:2px 0;margin:0 15px;}
#banner{margin:0px auto !important;}
";



#### Add the code to the banner. ####
function print_banner(Page p) {
    container_open("banner");
      "<h1 id='banner-header'>$p.global_title</h1>";
      "<h2 id='banner-description'>$p.global_subtitle</h2>";
    container_close();
      

"<div id='banner-links'>";
    var string[] links = [];
    foreach var string k ($p.views_order) {
        $links[size $links] = """<a href="$p.view_url{$k}">"""+lang_viewname($k)+"""</a>""";
    }

    print_module_list($links);

"</div>";
}