Saturday, November 24, 2007

Change main background color for Rounders template blogs

A blogger complained in my post How to change blog background color, fonts, etc that she could not find the option to change the main background color. I check the only blog I have which uses the Rounders template - Kids and teens - Tips and Tricks and confirmed that there was no option to change the main background color.

So while signed into my Blogger account and at the blog, there should be a "Customize" link at the top right corner of the page. I clicked "Customize" which gets me into the LAYOUT. I click the EDIT HTML sub-tab which opens the template editor. I found this code in the CSS (Cascading Style Sheet) of the template:

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">


and changed value="#ffffff" to value="#000000", preview and saw that the left sidebar and the main column (posts) background have changed to black. The right sidebar color remained original. So I discovered a way to change the main background color. However, since I have no intention to really change the color, I just click "Clear Edit" to get rid of the change and left the blog as it is.

If you want to learn more about HTML colors codes and how to get them, refer to HTML color codes, color charts and color pickers

If you have intention to change, perhaps you should also changing default="#fff" to some other color (note: the HTML color code #fff in this case contain only 3 alphabets {it can also be numeric}, but you can put either 3 or 6 alphabets or numerics or combination depending on what color you want, preview and see what changes you get. I have no interest, so I did not try.

IMPORTANT: It is always wise to backup your current template PLUS any Page Elements that can be backup before you tamper with the template. See Backup template PLUS Page Elements and edit template.

Peter Chen's nice graphic signature

Monday, November 05, 2007

eSnip Music Player in sidebar

I have previously published a post showing how to add an eSnip music player in a blog post at Add music to your blog another easy way using eSnip (click BACK button to get back to this page)
. The actual eSnip player was added to eSnip music player in a blog post.

A blogger ask how to fit the eSnip music player in a sidebar. I did a test and successfully fitted it into the bottom of the first left sidebar of Blogging Ideas.

You must first know the width of your sidebar. If you don't, you can get instruction in how to get them from How to find the width of your blog Header, main column (posts), sidebar (click BACK button to get back to this page).

Anyway this is a section from the template of Blogging Ideas:

.sidebar-wrapper {
margin-right: 14px;
width: 160px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}

That tells me that the width of the sidebar is 160 pixels. The width of the eSnip music player must be 160 pixels or less. Now the script for a selected song from eSnip is:

<table bgcolor="#000000" cellpadding="0" cellspacing="0"><tr><td><embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000" width="328" height="94" src="http://res0.esnips.com/escentral/images/widgets/flash/esnips_player.swf" flashvars="theTheme=blue&autoPlay=no&theFile=http://www.esnips.com//nsdoc/357ad475-5da9-44c1-864a-df7c17d61d69&theName=Carnivore&thePlayerURL=http://res0.esnips.com/escentral/images/widgets/flash/mp3WidgetPlayer.swf"></embed></td></tr><tr><td><table cellpadding="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:2px; color:#FFFFFF; text-decoration:none ; ; font-size:10px; font-weight:bold"><tr><td><a style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/CreateWidgetAction.ns?type=0&objectid=357ad475-5da9-44c1-864a-df7c17d61d69"> Get this widget </a></td><td style="font-size:7px; font-weight:normal;">|</td><td align="center"><a align="center" style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/doc/357ad475-5da9-44c1-864a-df7c17d61d69/Carnivore/?widget=flash_player_esnips_blue"> Track details </a></td><td style="font-size:7px; font-weight:normal;">|</td><td><a align="center" style="color:#FF6600; text-decoration:none" href="http://www.esnips.com//adserver/?action=visit&cid=player_dna&url=/socialdna"> eSnips Social DNA </a></td></tr></table></td></tr></table>


The width of the eSnip player (highlighted in red) is 328 pixels, and this is much too wide for the sidebar. I thus changed the width to 160 pixels (it can also be less, but not more), but left the height as 94 pixels. You can change the height of the player as well, but I wouldn't advice it. The edited script ended up as:

<table bgcolor="#000000" cellpadding="0" cellspacing="0"><tr><td><embed quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000" width="160" height="94" src="http://res0.esnips.com/escentral/images/widgets/flash/esnips_player.swf" flashvars="theTheme=blue&autoPlay=no&theFile=http://www.esnips.com//nsdoc/357ad475-5da9-44c1-864a-df7c17d61d69&theName=Carnivore&thePlayerURL=http://res0.esnips.com/escentral/images/widgets/flash/mp3WidgetPlayer.swf"></embed></td></tr><tr><td><table cellpadding="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:2px; color:#FFFFFF; text-decoration:none ; ; font-size:10px; font-weight:bold"><tr><td><a style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/CreateWidgetAction.ns?type=0&objectid=357ad475-5da9-44c1-864a-df7c17d61d69"> Get this widget </a></td><td style="font-size:7px; font-weight:normal;">|</td><td align="center"><a align="center" style="color:#FFFFFF; text-decoration:none " href="http://www.esnips.com/doc/357ad475-5da9-44c1-864a-df7c17d61d69/Carnivore/?widget=flash_player_esnips_blue"> Track details </a></td><td style="font-size:7px; font-weight:normal;">|</td><td><a align="center" style="color:#FF6600; text-decoration:none" href="http://www.esnips.com//adserver/?action=visit&cid=player_dna&url=/socialdna"> eSnips Social DNA </a></td></tr></table></td></tr></table>


I then sign into blogger.com (Dashboard) and click LAYOUT in the section for "Blogging Ideas", click "Add a Page Element" and chose HTML/Javascript. I pasted the edited eSnip script into the HTML/Javascript Page Element window and click "save changes". The Page Element for the eSnip music player appeared at the top of the first left sidebar of the LAYOUT. I hover the mouse over the new Page Element and the cursor changed to a cross. I dragged the new Page Element to the bottom of the first left sidebar in the LAYOUT, click SAVE at the top of the LAYOUT and you can see the result at Blogging Ideas (bottom of the first left sidebar at time of publishing).

The little test is successful in displaying the eSnip music player, but the PLAY button is very small. So if you don't mind that, then here you are. That is how to fit the eSnip music player into the sidebar. To see the difference, surf over to the two examples or go to eSnip music player in sidebar problem

Friday, November 02, 2007

Trouble shoot sidebar slide to bottom of page problem: An example

I have previously published two posts on the "sidebar slide to bottom of page" problem at Sidebar pushed to bottom of page: What to do? and Trouble shooting sidebar sliding to bottom of page problem (click BACK button to get back to this page). Problems like this are most frequent in Internet Explorer, but while they may not cause the sidebar to slide to the bottom of the page with other browsers like FireFox, they can cause other problems.

A blog reader recently asked for assistance for this problem and I thought it would be good to use his problem on how to go about solving the problem. His sidebar is at the moment at the bottom of the page and here is a screenshot of the cause of the problem:

cause of sidebar sliding to bottom of page

I have used the red error to show where his sidebar end, and the screenshot clearly shows the width of the "Favorite Songs" far exceeding the sidebar width. If I have access to his Blogger account, I will open the Page Element (widget) that had been added to display that "Favorite Songs" and also open the template editor to check what is the exact width of the sidebar. See How to find the width of the blog Header, main column (posts) and sidebar (click BACK button to get back to this page).


However, I have no access to his Blogger account, so I have to do the next best thing, that is, click VIEW > PAGE SOURCE in the menu bar at the top of the browser while at his blog. This is what the page source revealed:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px
color: #1c4676;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
}

The part in red tells me that the width of his sidebar is 268 pixels. Further down the page source is this script which is used to display the "Favorite Songs"

<h2 class="sidebar-title">FAVOURITE SONGS</h2>

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player-othersite.swf?config=http://www.profileplaylist.net/mc/config/config_blue.xml&mywidth=435&myheight=270&playlist_url=http://www.profileplaylist.net/loadplaylist.php?playlist=18021445" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><BR><a href=http://www.profileplaylist.net><img src=http://www.profileplaylist.net/mc/images/create_blue.jpg border=0></a><a href=http://www.profileplaylist.net/standalone/18021445 target=_blank><img src=http://www.profileplaylist.net/mc/images/launch_blue.jpg border=0></a><a href=http://www.profileplaylist.net/download/18021445><img src=http://www.profileplaylist.net/mc/images/get_blue.jpg border=0></a> </div>


There are 4 widths there highlighted in red (you will scroll horizontally to see the hidden one) and the problem here is I don't know which width to change. I would probably first leave the first one alone, and change the width of the other 3 so that it is equal or less than 268. If that still don't work, I will change the first width as well.

So now, all I can do is to refer that blogger to this post and hope he can solve his problem. As for you, I hope you have learned something about how go about solving similar problems.

Update 17 September 2010: A reader solved her "sidebar at the bottom" problem by reducing the number of posts in the homepage from 25 posts to 10. Each of those 15 posts was published individually (permalink) and was found to not have caused the sidebar to slide to the bottom. Thus the possibility of content in one or more of those 15 posts causing the sidebar at bottom of page problem was eliminated.

If you have many posts in your homepage and your sidebar is at the bottom of the page, you may want to try having less posts on your homepage.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics