WordPress Front Page Banner – Advance Tutorial [Custom Style Sheet]

In previous tutorials,  I have explained the basic configuration for Wordpress FrontPage Banner plugin. In this tutorial, I will explain you how to use Custom Style Sheet.

To use custom style sheet, you need to have a basic knowledge of CSS. There is a simple tutorial available at w3schools.com, I have also started from there only.

Wordpress FrontPage Banner plugin by  default allow you to have two styles  Plain,  Media.

Following is the default CSS, which works behind the scene .

<style>
.fpb_media
{
padding: 5px;
margin: 5;
}
.fpb_plain
{
background: #F3F3F2;
padding:5px;
margin:3px;
border:1px solid #E3E1DB;
}
</style>

Let me break the code the very first <style> tag is used to start the definition of style sheet.  .fpb_media and .fpb_plain are CSS classes which are selected as per your input.

.fpb_media class only defines padding and margin as there is no need to change the background as well as border while using images, adsense or any other media.

.fpb_plain class adds background and border to isolate textbanner/ announcement, it helps to get attention from viewer.

Remaining all of the classes and style’s are inherited from your theme’s style sheet.

In order to use Custom Style Sheet, first enable Custom Style Sheet from plugin configuration panel and put CSS code in text-area and We are done.

Let me give you a example:  I want to use announcement on my blog and the heading color should be Red with the text size of 24px and the block background should be Gray and the text color should be White and the border of box should be thick.

First set Plain as default style sheet and enable Custom Style Sheet and enter the following code

<style>
.fpb_plain
{
background: #828282; /*color code for gray*/
padding:5px; /* this padding and margin is fine */
margin:3px;
border:5px solid #E3E1DB; /* box border size and color*/
}
.myheading /* to change heading style as by default it inherits theme*/
{
color:#FF0000; /* red color */
font-size: 24px /* change font size */
}
.mytext /* to change text */
{
color:#ffffff;
}
</style>

We are done with  Style Sheet, now we need some tweaking in our custom code. The code should now use this style sheet, let see how it would be.  I  am taking the same code which I have used in Announcement Configuration tutorial, we need minor changes in it.

<h2 class="myheading">Announcement</h2>
<p class="mytext">Welcome to my blog, this is announcement area here you will see latest notes, competitions information. Keep watching</p>

see the below Screen-shot, how these settings looks  in configuration panel.

And here how it looks on blog’s front-page.

If you find any problem in using this method or if you have any queries, feel free to comment here