Intro to the "Shades of" theme (H1)

Coming soon. . .

This theme makes liberal use of transparency, shadows, and transitions. This theme looks best in a modern web browser; Chrome, Firefox, or Opera. The headings on this page are designed to give you an example of what the different headings, H1-H6, look like. Remember you can always add inline styles to override the default style.css file.

Overall Design (H2)

The overall design is rather simple, two columns with a header. The navigation column is fixed width while the content column is fluid. The entire theme has a minimum width of 960px.

Header (H3)

The header is the top horizontal area with the title of your site. It also contains a menu as you can see here. You need to know that this menu + site title cannot exceed the minimum width of the theme or the menu will break. It is best to use a custom menu for this area with only a few links. Currently I've designed the top menu for ONLY one level.

Site Title (H4)

You can change the text of the site title however you cannot move it or delete it. While this is a simple way to ensure formatting and easily allow you to change the text it does have limitations. Maybe in the future if people don't like this setup I'll work on a more "normal" header content area however, I do like the ease of use of this feature.

Content & Side Panel (H5)

As stated above, the side panel is a fixed width area of 240px while the main content area is fluid. the minimum width of the theme is 960px. If the browser window is reduced to a size smaller than 960px the lower horizontal browser scroll bar will appear. In the future I will add other styles to this theme.

Footer & Admin Links (H6)

The footer is where you would expect it, at the bottom of the page. It also contains the admin links and site map link. I've tried to style the non-footer text & admin links in a way that is less obtrusive but still accessible. This is also true for the credits for the theme at the bottom of the page. Please do leave the credits, thanks.

Features

Please select the other pages under the "Shades of" page link in the navigation on the right to see the different features, styling, and browser comparability.

Enjoy.

The theme will be released after gpEasy 2.2 is released.

The following section gives examples of what this theme looks like for images, galleries, tables, lists, etc.

 

 

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

 

 

Header Three (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod enim a urna sodales eu ultricies quam mollis.

Header Four (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header Five (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header Six (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Unordered list in side panel.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vivamus euismod
    • Lorem ipsum dolor
      • From this level on bullets are the same.
        • Lorem ipsum
          • dolor sit amet
  • consectetur adipiscing elit.
  • Vivamus euismod enim a

Some links

True Acupuncture Page

gpEasy CMS Page

gpEasy Tutorials Page

gpEasy "Shades of" Theme by CS @True Acupuncture with graphics by F. Yip @Acupuncture N Herbs