October 16, 2011

Color Variations For Fluid Text Resizer Widget


FLUID TEXT RESIZER

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&#39;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: &quot;sizecontroldiv&quot;, //id of special div containing your resize controls. Enter &quot;&quot; if not defined
    targets: [&quot;body&quot;], //target elements to resize text within: [&quot;selector1&quot;, &quot;selector2&quot;, etc]
    levels: 10, //number of levels users can magnify (or shrink) text
    persist: &quot;session&quot;, //enter &quot;session&quot; or &quot;none&quot;
    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&#39;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 == &quot;item&quot;'>

<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='http://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='http://3.bp.blogspot.com/-ZCdAqxALWFQ/TprlYKwK4QI/AAAAAAAAFRI/YBkNpOf3AHo/s400/orangei.png'/>&#160;&#160;</a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset &#8597;</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

dark theme for font resizer

 

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 == &quot;item&quot;'>
<div id="mbt-text-resizer-container">
<div id="sizecontroldiv" class="controlstyle">
<font style="color:#E4E4E4; font-weight:bold;">&#160;&#160;Adjust the font size:</font> <a class="mbt-text-resizer"  href="#smaller"><img src="http://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png" />&#160;</a>  <a  class="mbt-text-resizer"  href="#bigger"><img src="http://3.bp.blogspot.com/-ZCdAqxALWFQ/TprlYKwK4QI/AAAAAAAAFRI/YBkNpOf3AHo/s400/orangei.png" />&#160;&#160;</a><a rel="nofollow" class="mbt-text-resizer" href="javascript:mytextsizer.setFontLevel(0)">Reset ↕</a>

</div></div>
</b:if>

 

 

Light Theme

light theme for text resizer

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 == &quot;item&quot;'>
<div id="mbt-text-resizer-container">
<div id="sizecontroldiv" class="controlstyle">
<font style="color:#289728; font-weight:bold;">&#160;&#160;Change Font Size:</font> <a class="mbt-text-resizer"  href="#smaller"><img src="file:///c:/Users/mustafa/Desktop/images2/greend.png" />&#160;</a>  <a  class="mbt-text-resizer"  href="#bigger"><img src="file:///c:/Users/mustafa/Desktop/images2/greenI.png" />&#160;&#160;</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"

blueDblueIgreendgreenIorangedorangei

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. :>





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

7 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Very nice jobs congratulation in brazil is Like this.. Thanks
    www.atualizacoes.net

    ReplyDelete
  2. when i save the template it gives error how to remove this error

    http://internetricks4u.blogspot.com/

    ReplyDelete
  3. @adm
    My pleasure dear friend. :>

    @Malik


    Make sure you are not directly pasting the Javascript coe inside your template. Don't do that. simply replace src='fluidtextresizer.js' with the link of your uploaded javascript.

    ReplyDelete
  4. Successfully Tested This Widget and it work Perfectly. Thanks Mohammad Bhai.

    ReplyDelete
  5. Just Spotted an error...
    in the light template, the images are linked locally, and are not hosted on the web... and you haven't specified them to change...

    The one thing that I chose your blog is that you don't hide links in the code (which I have to remove manually in others)

    Also, try using disqus on your blog... It rocks!

    ReplyDelete
  6. This is cool, thanks for the trick.

    ReplyDelete