Styling Page

The styles we are after are as follows:

3 Normal Button Styles
3 Small Button Styles
7 background colours (3 full, 3 muted, white=transparent)
Styled list option – all one colour or rotating 3 colour
H2 & H3 with lead coloured bullet/image – 4 colour
If possible, a full screen div with coloured options
Accordion plugin styled?

We can add these as additional CSS classes. For buttons, we would want to add a WP button, change to small (if appropriate) and then apply the CSS for colour change if needed.

Button 1

This button should be styled with the default BROWN button. This should be the default style for all buttons.

Button 2

This button should be styled with the TEAL coloured button, so we add an additional class to the button. – “teal”

Button 3

This button should be styled with a GREEN coloured button, so we add an additional class to the button. – “green”

small button for size

This button should be styled with the default BROWN button with the small button style selected. – “small-btn”

small button for size

This button should be styled with the TEAL coloured button and with the small button style selected. – “teal small-btn”

small button for size

This button should be styled with the GREEN coloured button and with the small button style selected. – “green small-btn”

This is a list
and it should be styled
so that each item defaults to the brown bullet
This should be the default list style (which I think it is!)

This is a list – “teal”
and it should be styled
so that each item defaults to the TEAL bullet colour

This is a list – “green”
and it should be styled
so that each item defaults to the DARK BLUE bullet colour

This is a list – “white”
and it should be styled
so that each item defaults to the WHITE bullet colour

This is a list – “multicoloured”
and it should be styled
so that each items bullet cycles in colour, BROWN, TEAL, GREEN. This can be used infinitely.
test
test
test
test
test
test

Follow tags are shown on Teal, to show the white levels

This should have a WHITE background colour, with padding. Link colour – “white-bkg padding”

This should have a WHITE 75% TRANSPARENCY background colour, with padding. Link colour – “white-bkg-75 padding”

This should have a 100% TRANSPARENT background colour, with padding. This will be used in conjunction with other coloured background to maintain layout. Link colour – “padding”

This should have a TEAL background colour, with padding. Link colour – “teal-bkg padding”

This should have a TEAL 50% TRANSPARENCY background colour, with padding. Link colour “teal-bkg-50 padding”

This should have a BROWN background colour, with padding. Link colour “brown-bkg padding”

This should have a BROWN 50% TRANSPARENCY background colour, with padding. Link colour – “brown-bkg-50 padding”

This should have a GREEN background colour, with padding. Link colour – “green-bkg padding”

This should have a GREEN 50% TRANSPARENCY background colour, with padding. Link colour – “green-bkg-50 padding”

This should have a GREY background colour, with padding. Link colour – “cream-bkg padding”

This should have a GREY 50% TRANSPARENCY background colour, with padding. Link colour “cream-bkg-50 padding”

This H2 Heading should have a leading BROWN bullet of appropriate size – “brown-circle”

This H2 Heading should have a leading TEAL bullet of appropriate size – “teal-circle”

This H2 Heading should have a leading DARK GREEN bullet of appropriate size – “green-circle”

This H2 Heading should have a leading WHITE bullet of appropriate size – “white-circle”

This H3 Heading should have a leading BROWN bullet of appropriate size – “brown-circle”

This H3 Heading should have a leading TEAL bullet of appropriate size – “teal-circle”

This H3 Heading should have a leading DARK GREEN bullet of appropriate size – “green-circle”

This H3 Heading should have a leading WHITE bullet of appropriate size – “white-circle”

This is an example of an Accordion Widget.

Title 1

Duis quis orci viverra, pulvinar tortor ut, blandit quam. Suspendisse ut mi sed tellus ornare ultricies. Sed id tincidunt urna, a rutrum elit. Praesent quis nulla ut ligula accumsan dignissim. Maecenas eget tristique tortor. Suspendisse potenti. Cras eget risus ac augue vulputate ullamcorper id vitae ante. Aenean nisl diam, mollis congue porttitor a, iaculis non urna. Proin ut libero id libero auctor volutpat.

Title 2

Title 3

Align Image Left – max 150px – class “pic-icon”

This image is 150px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Image Right- max 150px – class “pic-icon”

This image is 100px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute .

THE FOLLOWING SHOULD ONLY USE USED WHEN ABSOLUTELY NECESSARY

This code can be added as CUSTOM HTML to force the viewing port to expand to full width. Anything between these 2 custom HTML codes will be shown as such.

</div><div class="desktop-content" style="margin-top:-50px">