B2sq Theme

 

Introduction

This is the theme I use here and on a few other sites. Currently I only have the fluid layout uploaded to gpEasy. I will add a fixed width shortly.

The theme works in IE6+ and all modern browsers. Of course, IE doesn't render all the shadows and transitions that are in the theme. 

If you would like to add your own styling it's best to add a new folder and @import the blue style.css file. This way when an upgrade to the theme takes place your styles should be fine, I think.

Header

The header doesn't have a lot of styling applied to it. Best to add a div with an ID or class and add your styles either inline or in your own custom style.css.

Styles

Look in the /B2sq/Blue/style.css file and at the bottom you will see a few extra classes that you can use to remove effects such as text-shadow, box-shadow, and transitions. Just add the class to any element you want to have that styling removed from. Currently the style.css file is a bit rough. I rebuilt the entire theme to ensure comparability with gpEasy 2.2 and IE6+. . . which was a major pain. BTW, the theme is fluid in IE6.

I will be updating the theme as I work on it and find areas I missed.

Please let me know if you think something on this theme ought to be different.

 

Below you can see what different elements are styled like in this theme.

 

Images In Editable Text Sections

Images have a shadow applied to them by default. Linked images also have a transition when you hover over them--they increase size by 50%. You can use .img_border (class="img_border") to apply an already styled image border like the two lower images. The background color of the image border is transparent and on mouse-over as the image increases you can see through the border area. I used the same image so you can see the differences. The image with class="img_border" also gets the shadow that is applied to images. The left hand images are linked images. Images without a link will NOT have the transition effects.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

Image Gallery Section

This section gives examples of the spacing of headings.

About gpEasy CMS H1

Pellentesque magna nibh, ultricies non mattis ac, rhoncus eu neque. Aliquam rutrum tortor sollicitudin est dapibus interdum. Sed ac metus nulla, non fermentum libero. Sed nec orci neque. Integer odio nibh, tincidunt sed suscipit ac, volutpat et velit. 

About gpEasy CMS H2

Praesent nisl ligula, laoreet a vehicula non, accumsan eu tortor. Morbi eleifend, purus quis interdum mollis, justo libero vestibulum odio, sit amet tincidunt eros arcu ut ante. Fusce condimentum nulla urna, sed aliquam eros. 

About gpEasy CMS H3

Morbi congue ullamcorper orci vitae suscipit. In imperdiet metus eu nunc vehicula eu semper mauris interdum. Aliquam sed turpis at nisl laoreet pellentesque et in diam. Cras faucibus lacinia erat at accumsan.  

About gpEasy CMS H4

Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. Sed mi dui, porttitor ut vulputate eget, hendrerit ut diam. 

About gpEasy CMS H5

Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. Sed mi dui, porttitor ut vulputate eget, hendrerit ut diam. 

About gpEasy CMS H6

Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. 

 

The following are headers followed by a DIV

 

About gpEasy CMS H1

Pellentesque magna nibh, ultricies non mattis ac, rhoncus eu neque. Aliquam rutrum tortor sollicitudin est dapibus interdum. Sed ac metus nulla, non fermentum libero. Sed nec orci neque. Integer odio nibh, tincidunt sed suscipit ac, volutpat et velit. 

About gpEasy CMS H2

Praesent nisl ligula, laoreet a vehicula non, accumsan eu tortor. Morbi eleifend, purus quis interdum mollis, justo libero vestibulum odio, sit amet tincidunt eros arcu ut ante. Fusce condimentum nulla urna, sed aliquam eros. 

About gpEasy CMS H3

Morbi congue ullamcorper orci vitae suscipit. In imperdiet metus eu nunc vehicula eu semper mauris interdum. Aliquam sed turpis at nisl laoreet pellentesque et in diam. Cras faucibus lacinia erat at accumsan.  

About gpEasy CMS H4

Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. Sed mi dui, porttitor ut vulputate eget, hendrerit ut diam. 
About gpEasy CMS H5
Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. Sed mi dui, porttitor ut vulputate eget, hendrerit ut diam. 
About gpEasy CMS H6
Cras ultricies auctor odio, quis lobortis eros convallis id. Mauris tincidunt, est id posuere laoreet, odio erat sagittis nulla, eu pulvinar nulla nunc a ante. Sed egestas accumsan nisi euismod faucibus. 
 

Example of headings followed by another heading.

About gpEasy CMS H1

About gpEasy CMS H2

About gpEasy CMS H1

About gpEasy CMS H3

About gpEasy CMS H1

About gpEasy CMS H4

About gpEasy CMS H1

About gpEasy CMS H5

About gpEasy CMS H1

About gpEasy CMS H6

 

 

About gpEasy CMS H2

About gpEasy CMS H2

About gpEasy CMS H3

About gpEasy CMS H2

About gpEasy CMS H4

About gpEasy CMS H2

About gpEasy CMS H5

About gpEasy CMS H2

About gpEasy CMS H6

 

 

About gpEasy CMS H3

About gpEasy CMS H3

About gpEasy CMS H2

About gpEasy CMS H3

About gpEasy CMS H4

About gpEasy CMS H3

About gpEasy CMS H5

About gpEasy CMS H3

About gpEasy CMS H6

 

 

This section gives examples of lists with headers.

Unordered List gp (H1)

  1. Vivamus euismod enim a urna sodales eu ultricies quam mollis.
    1. Vivamus euismod enim a urna sodales eu ultricies quam mollis.
      1. Vivamus euismod enim a urna sodales eu ultricies quam mollis.
        1. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis.
          1. Etiam sodales dapibus purus in suscipit.
            1. Quisque orci odio, commodo quis elementum sed, iaculis a sapien.
              1. Suspendisse ut felis mi, ac venenatis velit.
              2. Pellentesque et ultricies arcu.
      2. Nunc sed quam quis lectus congue cursus.
  2. Nam in erat turpis, eu tempor dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

Unordered List gp (H1)

  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
    • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

Unordered List g (H2)

  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Unordered List (H3)

  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Unordered List (H4)

  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
Unordered List (H5)
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
Unordered List (H6)
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis. Curabitur blandit pharetra nulla, at dapibus enim eleifend a. Fusce ornare convallis odio, ac luctus enim tristique quis. Pellentesque ultricies tortor lacinia magna hendrerit ut rutrum metus sagittis. Etiam sodales dapibus purus in suscipit. Quisque orci odio, commodo quis elementum sed, iaculis a sapien. Suspendisse ut felis mi, ac venenatis velit. Pellentesque et ultricies arcu. Nunc sed quam quis lectus congue cursus. Nam in erat turpis, eu tempor dui. Sed ut mi vitae nulla molestie aliquet nec sed augue. Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
    • Vivamus euismod enim a urna sodales eu ultricies quam mollis.
  • Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Definition List(H3)

Definition
Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi. 
Definition
Phasellus blandit fringilla pellentesque. Pellentesque velit ipsum, molestie imperdiet commodo nec, interdum vitae metus. Sed nec metus arcu, sed bibendum mi.

This sections gives examples of tables.

Default formatting for a table. (H2)

You can always add inline styles to change the look.

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

A transition takes place when you hover over a cell.

Default formatting for a table with a heading. (H3)

As above, you can add your own inline styles. Note that the header row is given extra space in Chrome. Best not to use a header as it only makes the text bold and centers it, which is easily done manually.

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table. (H1)

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table with a heading. (H2)

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table. (H3)

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table with a heading. (H4)

Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table. (H5)
Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

Default formatting for a table with a heading. (H6)
Row One Cell One Row One Cell Two
Row Two Cell Three Row Two Cell Four
Row Three Cell Five Row Three Cell Six

 

 

gpEasy B2sq Theme by CS @True Acupuncture