Snippets for Gazette
These are custom css code snippets for the theme Gazette (or a colour variant). If you are using this theme, you can copy and paste any of the snippets below directly into your site's custom css.
(These snippets might also work for other themes if they are sufficiently similar to Gazette.)
These snippets are samples only. You may want to adjust them to suit your own tastes.
In no particular order:
Change default text to justified
p, li, dd { text-align: justify; }Change default text to un-justified
p, li, dd { text-align: left; }Change teaser text to un-justified
.mininode-teaser p, .mininode-teaser li, .mininode-teaser dd { text-align: left; }Remove whitespace at top of page
#header { padding-top: 0; }Remove whitespace around site name or logo
#logo-title { padding: 0; }Centre site logo
Works best when the site name and site slogan are not shown. Pushes the header zone down.
#logo-title { float: none; text-align: center; }
#site-slogan { text-align: center; }Undo larger font size for teaser text at the beginning of page content
.body-teaser { font-size: 1em; line-height: inherit; }
.body-teaser p, .body-teaser ul, .body-teaser ol, .body-teaser dl, .body-teaser fieldset { margin: 20px 0; }Change background colour of page
body { background-color: #8c9cbc; }Change background colour of primary menu bar
#primary, #primary a { background-color: #434385; }Change colour of widget titles
.widget-title, .widget-title a { color: #5c5a6b; } Change to colour scheme of Gazette Blue
This snippet is an advanced example of how to specify different colours.
body { background-color: #8c9cbc; }
#site-name a { color: #22214d; }
#primary, #primary a { background-color: #434385; }
#secondary { background-color: #dadee7; border-color: #232375; }
#secondary a { border-color: #dadee7; }
#secondary a.active, #secondary a:hover { border-color: #232375; }
.widget-title, .widget-title a { color: #5c5a6b; }
.read-more-link, .read-more a { color: #385573; }Display menu widgets in the footer as normal lists
#footer .widget-menu ul.menu { margin-bottom: 10px; }
#footer .widget-menu ul.menu li { list-style: disc outside none; margin: 0 0 10px 1.5em; padding: 0; }
#footer .widget-menu ul.menu a { font-size: 1em; line-height: 1.5385; text-transform: none; font-weight: normal; border-width: 0; background: transparent none; margin: 0; padding: 0; color: #224970; }
#footer .widget-menu ul.menu a:hover { text-decoration: underline; }Change colour scheme in footer
Works well when combined with the previous snippet.
#footer { margin: 0 -20px; padding: 20px; background-image: none; background-color: #404040; color: #c4c4c4; }
#footer a { color: #eee; }
#footer .widget-title, #footer .widget-title a { color: #f0f0f0; }
#footer .widget-menu ul.menu a { color: #eee; }If there is a modification you'd like to see listed here, please contact us and send your suggestions in.