Style your MyBlogLog Recent Readers Widget

By Dan | Published: 02/27/2008

If you prefer the old version of the Recent Readers widget and you are not happy with the default customization options offered by MyBlogLog, you can take it further and style your widget as you please. Unfortunately no matter what colors you choose if someone that isn’t logged in his MyBlogLog account views your page that person will see the text “You! Join Our Community” on a white background and if your widget is not positioned in an area that has a white background
it looks very nasty. On top of that you may want to customise your text link decoration, size of the images, borders, etc.

Instead of overwriting the declarations in the js generated by MyBlogLog i advise you to strip the code by deleting the variables related to colors:

  • c_color_bottom_bg
  • c_color_link
  • c_color_link_bg
  • c_color_heading
  • c_color_heading_bg

I’m not going to explain which variable does what because that’s irrelevant and anyway we will remove them from the js. It’s not a secret that you can do very little customization with them. Below you can see the original code and the stripped one:

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=000000&amp;c_color_heading=FFFFFF&amp;c_color_link_bg=FFFFFF&amp;c_color_link=FFFFFF&amp;c_color_bottom_bg=000000" type="text/javascript"></script>
1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;" type="text/javascript"></script>

You can see that my c_heading_text variable is empty as i don’t have a header text for my widget. Now here comes the actual customization process. I tried to make it as simple to understand as i possibly could and made a few comments on the code so that you can figure out which class is for what. There are a few declarations that i left out because they don’t really help much as their properties are inherited from the really important declarations that are listed below. The following code must be added in your style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/* start images related  */
body table#MBL_COMM img
{
border:1px solid black;
float:left;
height:24px;
padding:0px;
position:relative;
width:24px;
z-index:999;
}
body table#MBL_COMM td.mbl_join_img
{
background-color:black;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop images related  */
 
/* start of "You!" link */
body table#MBL_COMM td.mbl_join 
{
background-color:BLACK;
border-bottom:0pt none;
color:white;
cursor:pointer;
font-size:11px;
margin:0pt;
padding:2px;
text-align:left;
}
/* stop of "You!" link */
 
/* start the whole widget */
body table#MBL_COMM
{
background-color:black;
border:1px solid black;
font-family:Verdana,Arial,Sans-Serif;
font-style:normal;
font-weight:normal;
line-height:12px;
width:270px;
}
/* stop the whole widget */
 
/* start of the tds wrapping the images */
body table#MBL_COMM td.mbl_img
{
background-color:black;
border-top:0pt none;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop of the tds wrapping the images */
 
/* start of the three trs wrapping the bottom links */
body table#MBL_COMM td.mbl_fo_hidden 
{
background-color: black;
color:white;
cursor:pointer;
font-size:10px;
padding:2px;
text-align:center;
}
/* stop of the three table rows wrapping the three bottom links */
 
/* start of "Join My Community" link */
 body table#MBL_COMM td.mbl_join a
{
	color: white;
}
body table#MBL_COMM td.mbl_join a:hover
{
	color:#6C6C6C;
}
/* end of "Join My Community" link */ 
 
/* start of "Join This Commnunity" link */
body table#MBL_COMM td.mbl_fo_hidden a
  {
   color:white;
	}
body table#MBL_COMM td.mbl_fo_hidden a:hover
 {
	color:#6C6C6C;
}
/* end of "Join This Commnunity" link */
 
/* start of "View Reader Commnunity" and "Provided by MyBlogLog" links*/
body table#MBL_COMM td.mbl_fo_hidden a:visited
{
	color: white;
}
body table#MBL_COMM td.mbl_fo_hidden a:visited:hover
{
	color: #6C6C6C;
}
/* end of "View Reader Commnunity" and "Provided by MyBlogLog" links*/

That all. Refresh the page and voila ! You can see the outcome in my footer. Of course i used colors to best fit my blog design but feel free to play with the code until you get what you want.

Social bookmarking:
  • Digg
  • del.icio.us
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • Mixx
  • Sphinn
  • Reddit
  • Live
  • Twitter
  • Yahoo! Bookmarks

This entry was posted in css, tutorials and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • MyBlogLog has done a great job of not only building apps but building a community on there and being response to what the community wants. Truly a marriage of users and managers working together.
    Cheers,
    Jessica
    jessica@ forexsoftware-free.info
  • I enjoyed the post. I don't like the standard MyBlogLog widget, so I am in the process of changing the code now.
  • Thanx! :-)
  • Wow, cool man, big thanks! http://rltipbymolt.com
  • John
    I wasn't aware of this and it is something that I will look into shortly Ian, many thanks.
  • Dan
    Yes, indeed. But if you have a quick look in my footer you can see the widget. I tried to fit in the new widget but it didn't integrated so well with the design and all as it was too shiny and i didn't like how it looked. I'm sure i'm not the only one.
    I only need to show some small icons with some backlinks, and nothing more. However i may post an article about how to customize the new widget.
  • In fact, new MyBlogLog widget is most easy to personalize ; just need to hack one CSS class to skin it.

    Study LiFE2Front profiles like mine :
    http://life2front.com/oliezekat
  • Dan
    Big thanks Ian !
  • Thanks for the write-up. I've bookmarked it here:

    http://del.icio.us/mybloglog
blog comments powered by Disqus