CSS Styles From The Guangzhou Theme

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

This entry is part 4 of 5 in the series CSS Text-Box Styles For Serious Writers

You rarely find the CSS code for eye-catching text boxes within the stylesheet that comes with your theme or template; however, the Guangzhou Theme for WordPress is a bit different. While searching for the CSS styles I wanted, to my surprise, I discovered that Guangzhou already had several built-in styles that were carefully thought out and a real boon to writing good-looking articles, reports, and blog postings.

Why Include The Styles Here

If you read the introductory article in this series, you already know that I went on a hunt to find some pretty textboxes and sidebars to use in my web writings. As I came across textbox styles I liked -- or rediscovered some I'd used in other CMSes, like Joomla (joomla.org) -- I updated my WordPress stylesheet to include them. I'm using the Guangzhou Theme¹ Inadvertently, I discovered some really neat styles were already a part of my Guangzhou Theme.

Unfortunately, I haven't found any place where the styles included in the Guangzhou stylesheet are actually documented. That's why I've included them here -- so I can remember what the styles are, and so you can use them, too, if you like them. It's easy to add these styles to your own stylesheets and use them while you are creating your posts, articles, reports, reviews, etc.

If you use WordPress, either open your Theme's Stylesheet file in a new tab so you can paste the CSS style into it, or get and install the MyCSS plugin² to avoid modifying your original stylesheet. You can also skip all this coding stuff and just grab the Special Textboxes Plugin for WordPress³
If you need help using the styles, refer to the 2nd post in this series.
The CSS style code used for each effect is located right below the example. Just click the bold title to grab it (an accordion box will slide open), then click the title again to close it up.⁴

Attractive Styles From The Guangzhou Theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

INSET style H3 Heading

This is the INSET Text Box . . . . . . at erat volutpat id cursus erat ullamcorper. Ut ipsum metus, ultrices in pharetra iaculis, consequat in metus. Aliquam tempus condimentum com modo. Cras a lacus leo, sit amet aliquam elit. Praesent ornare dignissim nisi ut rhoncus.

INSET Style: Click Here For The Code»

Simple Review

Mauris hendrerit turpis at erat volutpat id cursus erat ullamcorper. Ut ipsum metus, ultrices in pharetra iaculis, consequat in metus. Aliquam tempus condimentum commodo. Cras a lacus leo, sit amet aliquam elit. Praesent ornare dignissim nisi ut rhoncus.

Praesent ornare dignissim nisi ut rhoncus.
Praesent ornare dignissim nisi ut rhoncus.
Praesent ornare dignissim nisi ut rhoncus.
Praesent ornare dignissim nisi ut rhoncus.

SIMPLE REVIEW Style : Click Here For The Code»

Here's how you would add the Simple Review style to a paragraph. If you want your lists to follow the same style, simple add the same class to the < UL > code. See the image below for an example. Click the image to enlarge it.

Rounded-Corner Text Box ....... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

Rounded Corner Text Box : Click Here For The Code»

Inspired By Those Rounded Corners

Inspiration is a beautiful thing! While the rounded-corner textboxes shown below are not a standard part of the Guangzhou Theme, it was those corners in the box above that inspired me to experiment to see what else could be done. I came across Round Border at Snipr⁵ which I used as a template for some others . . . I really like the "framed" effect! The differing sizes are primarily achieved by changing the width (expressed in a percentage) and optionally, the font-size property.

Text-Round ........ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

Text-Round Style : Click Here For The Code»

Text-FRAME ........ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

TEXT-FRAME Style : Click Here For The Code»

Text-FRAME 75 Percent ........ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet leo felis, sed tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam porta placerat magna a aliquam.

TEXT-FRAME75 Style : Click Here For The Code»

Using Internet Explorer? Rounded corner textboxes display in Firefox, Chrome, and Safari, but do not work in Internet Explorer (surprise!) or Opera. Time to dump Internet Explorer (for more reasons than just to see rounded textboxes). Still, I didn't leave you hanging ... Just click the images below to see how the rounded corners look.

(Now, go grab yourself a real secure browser: Firefox, Google Chrome, or even Opera.)

Handy-Dandy Download Button

Just before this article was about to go to press, I discovered yet another set of styles tucked away in the Guangzhou Theme: Download Button. If you never offer anything to your visitors, clients, and colleagues, this style won't matter to you at all. Or, if the reverse is true -- you often give away files and such for download -- this still might not matter to you, especially if you are using a download manager. However, if on ocassion, you offer up something in a downloadable format, and want an attractive, yet easy way to highlight the availability, this little style is for you.

How to create your download buttons

Assign the paragraph the DOWNLOAD style. Then create a SPAN within the paragraph to hold your download information. Whatever you type within the span brackets becomes part of the download button. The button expands according to the amount of text in it, thus, more info means you get a longer button. Beware that yu don't put too much text in because -- strangely enough -- the button will wrap instead of the text wrapping!

This is the BUTTON style.

This is the BUTTON-PRIMARY style.

This is the BUTTON-SECONDARY style. More info means longer button.

Click on the image below to see how this looks as you are writing.

Make the entire paragraph a download

The entire paragraph can become part of the download button. Of course, that may not be what you want. If you don't want an entire paragraph to be show as a button, you can use the SPAN designator as talked about above.

This is the BUTTON-PRIMARY style. The entire paragraph becomes part of the download button. (That may not be what you want! If not, you can use the SPAN designator as talked about above.)

This is the BUTTON-SECONDARY style. The entire paragraph becomes part of the download button. (If you don't want an entire paragraph to be show as a button, just use the SPAN designator as talked about above.)

View the image below to see how to include the code that creates a big button out of your entire paragraph.

This entire paragraph is part of the download button. Click here to get this very important file. The file is in zip format.

DOWNLOAD BUTTON Style : Click Here For The Code»

If you need help using other styles in your writings, see How To Use These Styles In Your Posts. There are more articles in this series. Use the Table of Contents at the top to reach other topics that might interest you.

Download Managers For WordPress
Two of the most popular download manager plugins are Wordpress Download Monitor by Mike Jolley and WP-DownloadManager by Lester Chan. These links take you to the official WordPress Plugin website.

For your convenience, all the styles in this series are available to download.
Click below to grab the entire CSS stylesheet with these codes already included. Then copy+paste it to your current stylesheet or add it to your MyCSS stylesheet. Also get the icons, unzip them on your server, and change the CSS file to reflect the proper location.

CSS Styles for Textboxes (ver. 1.0 / 3.35 KB)
CSS Text-Box Styles For Serious Writers is a collection of my favorites textboxes, sidebars, callouts, quotes for pretty-fying text in WordPress articles, reports, reviews, and blog posts. (This is the ZIPPed version.)

Plain text file: CSS Styles for Textboxes (Plain Text CSS File) (ver. 1.0 / 11.89 KB)

xTypo Icons for CSS Textbox Styles (ver. current / 37.85 KB)
xTypo Icons to accompany the CSS Text-Box Styles For Serious Writers series. (ZIPPED)

Footnotes

The beautiful Guangzhou Theme by John Godley of Urban Giraffe comes with several color themes, along with some thoughtful (and stylish) options. [↩ go back]
MyCSS is a WordPress plugin that allows you to attach your personal CSS stylesheet to your blog, regardless of the theme you might be using. [↩ go back]
Use this colorful WordPress Plugin I found after I had assembled most of these code snippets. Thanks to Minimus at SimpleLib for great work and sharing it with us writers! [↩ go back]
The cute drop-down accordion is achieved with Hackadelic Sliding Notes. It really saves space by using the accordion effect. Get Sliding Notes WordPress plugin by Hackadelic. Many thanks! [↩ go back]
Round Border text box style from Snipr inspired me to create my own versions. [↩ go back]

Please Share by clicking favorite social network below:

Copy the following code to your stylesheet
While you can change the name from "inset" to whatever you prefer,
there are several parts to this style. Probably best to leave the name as is.

## COPY CODE BELOW THIS LINE ##

fieldset .inset
{
float: right;
width: 250px;
background-color: #FFFFE1;
border: 1px solid #333;
color: #444;
font-size: 0.8em;
}

fieldset .inset p
{
margin-left: 0px;
margin-top: 0px;
}

fieldset .inset h3
{
font-weight: bold;
}

.inset
{
float: right;
width: 200px;
border: 1px solid #ccc;
padding: 5px 1em 0px 0.9em;
margin: 0px 0px 5px 1em;
color: #888;
background-color: #eee;
clear: both;
}

.inset h3
{
font-size: 1.2em;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: The Guangzhou Theme by John Godley

Copy the following code to your stylesheet
You can change the name from "simple-review" to whatever you prefer

## COPY CODE BELOW THIS LINE ##

.simple-review
{
margin-bottom: 1em;
font-size: 10px;
background-color: #f4f4f4;
/*padding: 8px;
padding-bottom: 0;*/
padding-top: 10px;
border: 1px dotted #ccc;
border-left: none;
border-right: none;
padding-left: 10px;
}

.simple-review ul li, #simple-review ul li
{
float: left;
width: 80px;
font-size: 9px;
text-align: center;
margin-right: 5px;
margin-bottom: 3px;
line-height: 1.4;
height: 12em;
}

.simple-review ul li
{
margin-right: 18px;
margin-bottom: 1.5em;
line-height: 1.2;
}

.simple-review ul li img, #simple-review ul li img
{
border: 1px solid #ccc;
padding: 2px;
background-color: white;
vertical-align: middle;
margin-bottom: 2px;
}

.simple-review img:hover, #simple-review img:hover
{
border: 1px solid #999;
background-color: #ccc;
}

.simple-review ul li.selected img, #simple-review ul li.selected img
{
border: 2px solid red;
padding: 1px;
}

.simple-review .selected img:hover, #simple-review .selected img:hover
{
border: 2px solid #ffb400;
background-color: white;
padding: 1px;
}

#simple-review .meta
{
text-align: right;
font-size: 0.8em;
padding-right: 1em;
clear: both;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: The Guangzhou Theme by John Godley

Copy the following code to your stylesheet
You can change the name from "text" to whatever you prefer

## COPY CODE BELOW THIS LINE ##

.text
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:1px solid #CCCCCC;
color:#666666;
padding:3px;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: The Guangzhou Theme by John Godley

Copy the following code to your stylesheet
You can change the name from "text-round" to whatever you prefer

## COPY CODE BELOW THIS LINE ##

.text-round
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border:2px dotted #CCCCCC;
color:#666666;
padding:14px;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Round Border at Snipr inspired me to create my own versions.

Copy the following code to your stylesheet
You can change the name from "text-frame" to whatever you prefer

## COPY CODE BELOW THIS LINE ##

.text-frame
{
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border:3px dotted #CCCCCC;
color:#666666;
padding:18px;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Round Border at Snipr inspired me to create my own versions.

Copy the following code to your stylesheet
You can change the name from "text-frame75" to whatever you prefer

## COPY CODE BELOW THIS LINE ##

.text-frame75
{
width: 75%;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border:3px dotted #CCCCCC;
color:#666666;
padding:18px;
font-size: 120%;
font-family: Georgia, Times New Roman, Trebuchet MS;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: Round Border at Snipr inspired me to create my own versions.

Copy the following code to your stylesheet
While you can change the name from "download" to whatever you prefer,
there are several parts to this style. Probably best to leave the name as is.

## COPY CODE BELOW THIS LINE ##

.button-primary,
.button-secondary, .button
{
text-shadow: rgba(255,255,255,1) 0 1px 0;
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
text-decoration: none;
font-size: 13px;
line-height: 16px;
padding: 2px 8px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-khtml-box-sizing: content-box;
box-sizing: content-box;
}

.download .button-primary, .download .button-secondary, .download .button
{
display: block;
}

.button-secondary, .button
{
border-color: #bbb;
color: #464646;
background: #f2f2f2 url(image/white-grad.png) repeat-x scroll left top;
}

a.button
{
padding: 5px 10px;
text-decoration: none;
font-size: 1em;
font-weight: normal;
}

.button-secondary:hover, .button:hover
{
border-color: #298cba !important;
font-weight: normal;
color: #FFF !important;
background: #21759B url(image/button-grad.png) repeat-x scroll left top;

}

.button-primary
{
border-color: #298cba !important;
font-weight: normal;
color: #FFF !important;
background: #21759B url(image/button-grad.png) repeat-x scroll left top;
}

.button-primary:active
{
background: #21759b url(image/button-grad-active.png) repeat-x scroll left top !important;
}

.button-primary:hover
{
border-color: #13455b !important;
color: #EAF2FA !important;
}

## COPY CODE ABOVE THIS LINE ##

Click the title again to close this box

Source: The Guangzhou Theme by John Godley

CoachNotes