S2Bloggish

Does anyone know how to change the color of the text in an entry title?

I would also like to know how to change the color of the text in the titles of the modules (i.e. Page Summary, Tags), if anyone knows that.

Thanks!

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;
}

In response to a post in another community. This tutorial will show you how to move the "Posted at" line to the top of the entry. This tutorial deals with the function Page::print_entry. If you already have this function, then all you have to do is delete the current date code (shown in red) and replace it where indicated with the code in green. If you do not have that function in your theme layer, then just copy and paste the following code into your theme layer.

( Read more... )

This tutorial will show you how to replace your comment links with images. There are actually five different areas we will be working on.

1. The permalink
2. The "Post comment" link
3. The "Read comments" link
4. The entry linkbar (aka "the rest").
5. The separator |

( Read more... )

Using the following code in a theme layer will float your mood icon over to the left of the mood and music (see example). If you do not want a mood icon at all, remove everything in red.

An interesting oversight (?) in the layer prevents you from using the "normal" method to change the mood/music/location labels in Bloggish. kunzite1 posted the solution in s2bloggish. I am reposting it here before it gets buried.


-------------------------------------------

Use this code in your layer. Replace the words in green with your own.

set text_meta_mood = "Schmood";
set text_meta_music = "Schmusic";
set text_meta_location = "Schmocal";

function Entry::print_metadata() {
    if (size $.metadata) {
        """<div class="metadata">\n""";
        foreach var string m ($.metadata) {
            "<div><strong>"; print lang_metadata_title($m); "</strong>: ";
            if ($m == "mood") {
                " $.mood_icon ";
            }
            print $.metadata{$m}; "</div>\n";
        }
        "</div>\n";
    }
}

This is in response to a post in another community. You can change your mood, music and location words into images if you want to.



In the example pic, I've also moved the mood icon over to the left. That is reflected in the code as well.

function Entry::print_metadata() {
    if (size $.metadata) {
        """<div class="metadata">""";
                            
####### mood icon here.  delete if you don't want this.######

"""<div style="float:left; padding-right:10px;">""";
if(($.mood_icon)) {
print "$.mood_icon";
                }
"</div>";

#############################################################


        foreach var string m ($.metadata) {
            var string val  = $.metadata{$m};
            var string moodimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009f257'>";
            var string musicimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009gxyz'>";
            var string locimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009e5dd'>";

    if ($m == "mood") {
             print """<div>${moodimg} $val</div>""";
            }

    if ($m == "music") {
             print """<div>${musicimg} $val</div>""";
            }

    if ($m == "location") {
             print """<div>${locimg} $val</div>""";
            }

        }
            """<div style="clear:both;"></div></div>""";
    }

}