Since it is weekend so we should better not let it go in vain. I played around that Text Resizer widget we published today and managed to create different color themes of the same widget. Since blogger templates used by you all comes in various backgrounds therefore it was important to create a ready made code. The themes below are just what I thought would look good, in case you want to customize anyone of them then feel free to let me know. I will be discussing the customization guide too so that you may know how to make your preferred changes. To understand this tutorial you will first need to carefully understand the instructions mentioned on my earlier post. So kindly read that first.
Tutorial: Add Fluid Text Resizer To Blogger
Customization Guide
The CSS code in step#5 for Fluid text resizer that I shared in earlier tutorial looks like this,
<style type='text/css'>
/*----- Text Resizer By MBT ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}.mbt-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}#mbt-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='fluidtextresizer.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 10, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
})</script>
We are interested only in the upper highlighted CSS part so we would ignore the rest. Lets discuss this CSS part.
<style type='text/css'>
/*----- Text Resizer By MBT ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}.mbt-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}#mbt-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
}
</style>
Note these:
- To change color, font size, font family of the RESET text edit .mbt-text-resizer
- To change border colors, background colors of the box that contains everything within it edit #mbt-text-resizer-container
Now lets discuss the HTML code in step#7 of the previous tutorial
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-text-resizer-container'>
<div class='controlstyle' id='sizecontroldiv'>
<font style='color:#666; font-weight:bold;'>Adjust the font size:</font> <a class='mbt-text-resizer' href='#smaller'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXWP5c6ILOjFub0rivpbgHFntzVdZx_zY_NEVAVQHZnAWEerbrP5aA0_GBwO4_Y2wozAGqOjZaYu2PtzI4X6FBEEC2vKYLJRl9a5eDQGZPRYFv3LknF_sCzBiTGG6qbHBb1vCRO19Qn0/s400/oranged.png'/> </a> <a class='mbt-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIheQa08a-NBfP1quJpLZJbt4jeF5rGdbqouzza_b-EYynVDlc4XaE6Tr_F3iZ45lRMVTD31X5zQYWi9HTfISle-yP8KETZDHYwjkmnfGe94XzG43fGamU2xOJ2wPBQd00iZEFFJhcYM/s400/orangei.png'/>  </a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset ↕</a>
</div>
</div></b:if>
Note these:
- To change the color of the text "Adjust the font size" simply edit color:#666; font-weight:bold;
- To change the image of A- change the image link in orange color with an image of your choice.
- To change the image of A+ change the image link in blue color with an image of your choice.
That's all for customization. You only need to edit the CSS and HTML part in the full code I shared in the previous post. Lets see some sample color themes to give you an idea of what you can do.
Dark Theme
CSS Code
<style type="text/css">
/*----- Text Resizer By MBT ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}.mbt-text-resizer {
font-weight:bold; color:#66B7E7; text-decoration:none; font-family:arial,tahoma; font-size:16px;
}#mbt-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #66B7E7;
border-bottom:1px solid #66B7E7; width:100%; -moz-box-shadow:0px 0px 20px #333;
background:#333;
}</style>
HTML Code
<b:if cond='data:blog.pageType == "item"'>
<div id="mbt-text-resizer-container">
<div id="sizecontroldiv" class="controlstyle">
<font style="color:#E4E4E4; font-weight:bold;">  Adjust the font size:</font> <a class="mbt-text-resizer" href="#smaller"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXWP5c6ILOjFub0rivpbgHFntzVdZx_zY_NEVAVQHZnAWEerbrP5aA0_GBwO4_Y2wozAGqOjZaYu2PtzI4X6FBEEC2vKYLJRl9a5eDQGZPRYFv3LknF_sCzBiTGG6qbHBb1vCRO19Qn0/s400/oranged.png" /> </a> <a class="mbt-text-resizer" href="#bigger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIheQa08a-NBfP1quJpLZJbt4jeF5rGdbqouzza_b-EYynVDlc4XaE6Tr_F3iZ45lRMVTD31X5zQYWi9HTfISle-yP8KETZDHYwjkmnfGe94XzG43fGamU2xOJ2wPBQd00iZEFFJhcYM/s400/orangei.png" />  </a><a rel="nofollow" class="mbt-text-resizer" href="javascript:mytextsizer.setFontLevel(0)">Reset ↕</a></div></div>
</b:if>
Light Theme
CSS Code
<style type="text/css">
/*----- Text Resizer By MBT ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}.mbt-text-resizer {
font-weight:bold; color:#7BB626; text-decoration:none; font-family:arial,tahoma; font-size:16px;
}#mbt-text-resizer-container {
margin:4px 0px 4px 5px;
padding:4px;
border-top:1px solid #7BB626;
border-bottom:1px solid #7BB626; width:100%;
background:#fff;
border-radius:10px;
-moz-border-radius:10px;
}</style>
HTML Code
<b:if cond='data:blog.pageType == "item"'>
<div id="mbt-text-resizer-container">
<div id="sizecontroldiv" class="controlstyle">
<font style="color:#289728; font-weight:bold;">  Change Font Size:</font> <a class="mbt-text-resizer" href="#smaller"><img src="file:///c:/Users/mustafa/Desktop/images2/greend.png" /> </a> <a class="mbt-text-resizer" href="#bigger"><img src="file:///c:/Users/mustafa/Desktop/images2/greenI.png" />  </a><a rel="nofollow" class="mbt-text-resizer" href="javascript:mytextsizer.setFontLevel(0)">« Reset »</a></div></div>
</b:if>
Text Resizer Icons
Right click and select "Save Image as"
How did you find them?
The efforts we put in in bringing these widgets make no sense without your feedback and consistent motivation. Do let me know if I could be of any assistance. Try them on your blogs and give your blogs a new dress and color. Peace pals. :>
