Using WordPress For Your Church Website
The St. John’s Cathedral site is hosted and powered by WordPress.com. WordPress is distributed as free, open source software and in that same spirit we hope you can use the following information on this page to quickly build your own Church website using WordPress.
StJohnsCathedral.ca is using a few inexpensive WordPress.com upgrades to customize our site:
To keep things simple, comments have also been turned off.
If you’re interested in learning how to use WordPress we recommend reading the WordPress.com 10-step walk-through guide.
If you’re using the Toolbox theme, either on WordPress.com or with a self-hosted WordPress installation, you can create a design similar to ours using the following CSS styles (click show source below). They’re yours to use, adapt, and share, under the terms of the GNU General Public License (version 2).
/*
Theme Name: Machray
Description: Custom CSS for StJohnsCathedral.ca using the Toolbox theme as a Parent Template
Template: toolbox
This theme, like WordPress, is licensed under the GPL.
Use it to make something beautiful, good, and true.
*/
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: #fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: 0;
}
/* =Structure
----------------------------------------------- */
#page {
margin: 0 auto;
width: 960px;
}
#branding hgroup {
display: block;
padding: 0 30px;
}
#main {
float:left;
}
#primary {
width:960px;
float:left;
}
#content {
margin: 0 240px;
overflow:hidden;
}
#secondary {
width:180px;
float:left;
margin: 0 0 0 -930px;
}
#tertiary {
width:180px;
float:left;
margin: 0 0 0 -210px;
}
#colophon {
clear: both;
}
/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
margin: 0 30px;
}
/* Alignment */
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/* =Global
----------------------------------------------- */
body, input, textarea {
color: #333;
font: 14px Georgia, "Bitstream Charter", serif;
line-height: 1.5;
}
body {
background: #EFEAE4;
}
#page {
background: #fff;
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
/* Text elements */
p {
margin-bottom: 1.5em;
}
ul, ol {
margin: 0 0 1.5em 2.5em;
}
ul {
list-style: square;
}
ol {
list-style-type: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
dl {
margin: 0 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1.5em;
}
strong {
font-weight: bold;
}
cite, em, i {
font-style: italic;
}
blockquote {
font-style: italic;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
font-style: normal;
}
pre {
background: #f4f4f4;
font: 13px "Courier 10 Pitch",Courier,monospace;
line-height: 1.5;
margin-bottom: 1.5em;
padding: 0.75em 1.5em;
}
code, kbd {
font: 13px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
background: #fff9c0;
text-decoration: none;
}
sup,
sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
input[type=text],
textarea {
border: 1px solid #888;
}
textarea {
padding-left: 3px;
width: 98%;
}
input[type=text] {
padding: 3px;
}
/* Links */
a, a:visited {
color:#004b91;
}
a:focus,
a:active,
a:hover {
color: #ff4b33;
}
/* Text meant only for screen readers */
.screen-reader-text,
.section-heading,
img#wpstats {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
left: -9000px;
}
/* =Header
----------------------------------------------- */
#branding hgroup {
background: url('https://stjohnscathedral.files.wordpress.com/2010/12/header-toolbox.png') no-repeat bottom;
position: relative;
height: 350px;
}
#site-title {
padding-top: 40px;
}
#site-title a {
background: url('https://stjohnscathedral.files.wordpress.com/2010/12/logo.png');
display: block;
text-indent: -9000px;
width: 361px;
height: 45px;
}
#site-description {
text-align: right;
position: absolute;
top: 63px;
right: 30px;
}
/* =Menu
----------------------------------------------- */
#access {
border-top: 1px solid #aaa;
display: block;
float: left;
margin: 2px auto 1.5em;
width: 100%;
}
#access ul {
list-style: none;
margin: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
border-right: 1px solid #ddd;
color: #666;
font-size: 12px;
display: block;
line-height: 2.5em;
padding: 0.5em 30px 0.25em;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
#access ul ul {
background: #B92025;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
padding-top: .5em;
position: absolute;
top: 2.5em;
left: 0;
width: 240px;
z-index: 99999;
}
#access ul ul li {
}
#access ul ul ul {
padding-top: 0;
left: 240px;
top: 0;
}
#access .current_page_item a,
#access .current-menu-item a {
color: #B92025;
font-weight: bold;
}
#access .current_page_item ul a,
#access .current-menu-item ul a {
font-weight: normal;
}
#access ul ul a {
background: #B92025;
color: #fff !important;
border: none;
line-height: 1.5em;
padding: 1em 30px;
width: 180px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #B92025;
color: #fff;
}
#access ul ul a:hover {
background: #b11e23;
}
#access ul li:hover > ul {
display: block;
}
/* Home */
#access .home a {
background: url("https://stjohnscathedral.files.wordpress.com/2011/01/home-icon.png") no-repeat 18px 11px;
text-indent: -9000px;
}
#access .home a:hover {
background: #B92025 url("https://stjohnscathedral.files.wordpress.com/2011/01/home-icon.png") no-repeat -62px 11px;
}
/* =Content
----------------------------------------------- */
.page-title {
border-bottom: 1px dotted #ddd;
margin: 0 0 3em;
padding: 0 0 .25em;
}
.page-title span {
font-style: italic;
}
.hentry {
border-bottom: 1px dotted #ddd;
display: block;
margin: 0 0 3em;
}
.single .hentry,
.page .hentry {
border: none;
}
.entry-title {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.entry-title a {
color: #333;
text-decoration: none;
}
.entry-meta {
clear: both;
font-size: 12px;
}
.entry-meta,
.entry-meta a {
color: #999;
}
.entry-meta a {
border-bottom: 1px solid #ddd;
text-decoration: none;
}
.entry-meta a:hover,
.entry-meta a:focus,
.entry-meta a:active {
border-color: #bbb;
color: #666;
}
.hentry footer .sep {
display: none;
}
footer.entry-meta {
display: none;
}
.entry-content,
.entry-summary {
padding: 1.5em 0 0;
}
.entry-content h2 {
color: #5e7eb9;
font-size: 24px;
font-style: italic;
margin: 0 0 .3em;
}
.entry-content h3 {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .1em;
margin: 0 0 .6em;
}
.entry-content h4 {
font-weight: bold;
margin: 0 0 .6em;
}
.entry-content table {
margin: 0 0 1.5em;
}
.page-link {
margin: 0 0 1.5em;
}
/* Sticky posts */
.sticky {
border-bottom: none;
}
.sticky .entry-title {
font-size: 24px;
font-style: italic;
letter-spacing: 0;
padding: 0 2px .25em;
text-transform: none;
}
.sticky .entry-meta {
display: none;
}
.sticky .entry-content {
background: #E6F4E4;
padding: 1.5em 1.5em 1px;
}
/* Navigation */
#content nav {
display: block;
overflow: hidden;
}
#content nav a {
font-size: 12px;
text-decoration: none;
}
#content nav a:focus,
#content nav a:hover,
#content nav a:active {
text-decoration: underline;
}
#content nav .nav-previous {
float: left;
width: 50%;
}
#content nav .nav-next {
float: right;
text-align: right;
width: 50%;
}
#content #nav-above {
display: none;
}
.paged #content #nav-above {
display: block;
}
#nav-above {
margin: 0 0 1.5em;
}
#nav-below {
clear: both;
margin: 1.5em 0;
}
/* Pull quotes */
blockquote.pull {
border: 1px solid #ddd;
border-width: 1px 0;
color: #000;
font-size: 18px;
margin: 0 1.5em 21px;
padding: 21px 0 0;
}
blockquote.pull.alignleft {
margin-left: 0;
width: 33%;
}
blockquote.pull.alignright {
margin-right: 0;
width: 33%;
}
/* 404 page */
.error404 form {
margin-bottom: 1.5em;
}
.error404 #s {
width: 50%;
}
.error404 .widget {
float: left;
width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
margin-right: 1em;
}
.error404 .widget_tag_cloud {
clear: both;
float: none;
width: 100%;
}
/* Notices */
.post .notice,
.error404 #searchform {
background: #E6F4E4;
display: block;
padding: 1.5em;
}
/* Galleries */
.gallery {
padding: 0 0 1.5em;
}
dl.gallery-item {
margin: 1.5em 0 0;
}
/* Attachments */
.image-attachment .entry-meta {
float: left;
margin: 0 0 1.5em;
}
#image-navigation {
float: right;
margin: -1px 0 0;
}
#image-navigation .next-image {
margin-left: 0.5em;
}
.image-attachment .entry-attachment {
background: #efefef;
color: #666666;
clear: both;
font-family: Verdana,sans-serif;
font-size: 10px;
margin: 0 0 1.5em;
overflow: hidden;
padding: 1.5em 1.5em .5em;
text-align: center;
}
.image-attachment .attachment img {
display: block;
margin: 0 auto 1.5em;
}
.image-attachment .entry-utility,
.image-attachment #comments {
display: none;
}
/* =Images
----------------------------------------------- */
img.size-auto,
img.size-large,
img.size-full,
img.size-medium,
img.size-thumbnail,
.attachment img {
max-width: 100%;
height: auto;
}
img.wp-smiley {
margin: 0;
}
p img,
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
}
.wp-caption {
}
.wp-caption img {
}
.wp-caption .wp-caption-text {
color: #666;
font-family: Verdana, sans-serif;
font-size: 10px;
margin: 0;
}
/* =Widgets
----------------------------------------------- */
.widget-area {
color: #666;
font-size: 12px;
}
.widget ul a {
text-decoration: none;
}
.widget ul a:hover {
text-decoration: underline;
}
.widget-area #s {
max-width: 55%;
}
.widget-area #searchform {
margin: 0 0 1.5em;
}
.widget {
display: block;
margin: 0 0 1.5em;
}
.widget-title {
color: #5E7EB9;
font-size: 16px;
}
.widget h2 {
font-weight: bold;
}
/* =Comments
----------------------------------------------- */
.comments-link,
.nocomments {
display: none;
}
/* =Footer
----------------------------------------------- */
#colophon {
border-top: 1px solid #ddd;
color: #999;
display: block;
font-size: 12px;
padding: 1em 30px 1.5em;
text-align: center;
}
#colophon a {
border-bottom: 1px solid #ddd;
color: #999;
text-decoration: none;
}
#colophon a:hover,
#colophon a:focus,
#colophon a:active {
border-color: #bbb;
color: #666;
}
St. John's Anglican Cathedral 