Geometric Western

Theme Documentation

There's a lot you can customize to make this theme exactly how you want! Not sure where to start? This page is a guide to help you out.

Images

Here is a complete list of all images used and what CSS classes use them.

1. The Background

Image URL: ../images/cork-wallet.png

Where Used: body { }

Image Repeats? Yes

The CSS:

body {

    background: url("http://www.smackjeeves.com/templates/geometric_western/images/cork-wallet.png") #dad6d1;
    background-repeat: repeat;
    background-size: 300px 300px;
    padding: 0;
    margin: 0;
}

2. Header Border

Image URL: ../images/border-tan.png

Where Used: .header-border { }

Image Repeats? Yes, Horizontally

Called in HTML as:

<div class="header-border"></div>

The Full CSS:

.header-border {

    clear: both;
    height: 19px;
    width: 100%;
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/border-tan.png");
    background-repeat: repeat-x;
}

3. Body Border

Image URL: ../images/border-light-red.png

Where Used: .content-border { }

Image Repeats? Yes, Horizontally

Called in HTML as:

<div class="content-border"></div>

The Full CSS:

.content-border {

    clear: both;
    height: 19px;
    max-width: 1100px;
    width: initial;
    position: relative;
    margin: 20px -60px;
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/border-light-red.png");
    background-repeat: repeat-x;
}

4. Footer Border

Image URL: ../images/border-bright-tan.png

Where Used: .footer-border { }

Image Repeats? Yes, Horizontally

Called in HTML as:

<div class="footer-border"></div>

The Full CSS:

.footer-border {

    clear: both;
    height: 19px;
    width: 100%;
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/border-bright-tan.png");
    background-repeat: repeat-x;
}

5. Left-to-Right Arrow

Image URL: ../images/header-top-left.png

Where Used: header #top-left-image { }, #home_latest { }

Image Repeats? No (#top-left-image), Yes - Horizontally (#home_latest)

The Full CSS:

header #top-left-image {

    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-left.png") #645849;
    position: absolute;
    left: 0px;
    top: 25%;
    height: 83px;
    width: 227px;
}

#home_latest {
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-left.png");
    background-repeat: repeat-x;
    background-position: right center;
}

6. Right-to-Left Arrow

Image URL: ../images/header-top-right.png

Where Used: header #top-right-image { }, #home_welcome { }

Image Repeats? No (#top-right-image), Yes - Horizontally (#home_welcome)

The Full CSS:

header #top-right-image {

    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-right.png") #645849;
    position: absolute;
    right: 0px;
    top: 25%;
    height: 83px;
    width: 227px;
}

#home_welcome {
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-right.png");
    background-repeat: repeat-x;
    background-position: left center;
}

Fonts

There are only two fonts used, Slabo 27px and Walter Turncoat. These are both Google Fonts.

This line in Overall Layout loads the fonts from Google:

<link href="https://fonts.googleapis.com/css?family=Slabo+27px|Walter+Turncoat" rel="stylesheet">

These are the classes where Slabo 27px is called:

body {

    font-family: 'Slabo 27px', 'Palatino', 'Garamond', 'Times New Roman', serif;
    font-size: 16px;
    line-height: 26px;
}

#comic_jumpbox select,
#comic_jumpbox select option,
#comic_jumpbox select optgroup option,
#comic_jumpbox .jumpbox_page {
    font-size: 1.1em;
    font-family: 'Slabo 27px', 'Palatino', 'Garamond', 'Times New Roman', serif;
}

These are the classes where Watlter Turncoat is called:

h1, h2, h3, h4, h5, h6 {

    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
    margin: 0px;
    font-weight: 400;
}

.comic_nav a,
.read_link {
    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5em;
}

body .title {
    color: #8d3323;
    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
    margin: 0px;
    font-weight: 400;
    margin-right: 10px;
}

header nav ul#main-menu li a,
header nav ul#main-menu li a:active,
header nav ul#main-menu li a:visited {
    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
}

header nav ul#main-menu {
    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
    margin: auto;
    text-align: center;
    font-size: 1.5em;
}

header nav .mobile-toggle {
    font-family: 'Walter Turncoat', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 1.5em;
}

To replace the fonts, use the above classes and replace the font-family line with the new ones you receive from Google when select "use".

Colors

Below is a grid of all colors used:

#dad6d1
BG Beige
#e9e9e9
Main Beige
#d0cac1
Light Beige
#8d3323
Primary Red
#d7bfbb
Lighter Red
#c9b8a3
Tan
#968570
Primary Brown
#645849
Primary Dark Brown
#cbab84
Bright Tan
#ffffff
White

Below is a list of all classes where these colors are used.

#dad6d1

Used as a font color:

None

Used as a background color:

body {

    background: url("http://www.smackjeeves.com/templates/geometric_western/images/cork-wallet.png") #dad6d1;
}

#comic_jumpbox select optgroup,
#comic_jumpbox .jumpbox_chapter {
    background: #dad6d1;
    font-weight: bold;
}

#e9e9e9

Used as a font color:

None

Used as a background or border color:

main {

    background: #e9e9e9;
}
.comments-footer .post_comment h4 {
    border-color: #e9e9e9;
    border-width: 2px 0px;
    border-style: solid;
}

.comments-footer .note-corner-reverse {
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-top: 35px solid #e9e9e9;
}

#d0cac1

Used as a font color:

None

Used as a background or border color:

.comment.reply .post_tools {
    background: #d0cac1;
}

#archive_list .months .post-item.selected {
    background: #d0cac1;
}

#archive_list .months li.selected {
    background: #d0cac1;
}

#8d3323

Used as a font color:

a { text-decoration: none; color: #8d3323; }


main h1, main h2, main h3, main h4, main h5, main h6 {
    color: #8d3323;
}

body .title {
    color: #8d3323;
}

#comic_jumpbox select,
#comic_jumpbox select option,
#comic_jumpbox select optgroup option,
#comic_jumpbox .jumpbox_page {
    color: #8d3323;
}

.post_tools a:not(.username):hover,
.post_tools a.username,
.post_tools a.username:link,
.post_tools a.username:visited {
    color: #8d3323;
}

.comments-footer .post_comment h4 {
    color: #8d3323;
}

.post .news-footer .comments-link:hover {
    color: #8d3323;
}

Used as a background color:

#Top-Social-Bar {

    background: #8d3323;
}

footer {
    background: #8d3323;
}

@media all and (max-width:640px) {
    header nav ul#main-menu li:hover {
        background: #8d3323;
    }
}

#d7bfbb

Used as a font color:

footer a,

footer a:visited,
footer a:active {
    color: #d7bfbb;
}

footer {
    color: #d7bfbb;
}

Used as a background or border color:

None

#c9b8a3

Used as a font color:

#Top-Social-Bar a,
#Top-Social-Bar a:visited,
#Top-Social-Bar a:active {
    color: #c9b8a3;
}

.arch-date {
    color: #c9b8a3;
    font-size: 0.8em;
}

#Top-Social-Bar {
    color: #c9b8a3;
}

.post .date {
    color: #c9b8a3;
}

Used as a background or border color:

.publish-date {
    background: #c9b8a3;
}

.comment .post_tools {
    background: #c9b8a3;
}

.post .bcontainer {
    border: 4px dotted #c9b8a3;
}

.post .post-title {
    background: #c9b8a3;
}

.post .news-footer {
    background: #c9b8a3;
}

#archive_list .months,
#archive_list .dropdown-toggle.primary {
    background: #c9b8a3;
}

.chapter-title {
    background: #c9b8a3;
}

.comic-archive .row {
    border: 4px dotted #c9b8a3;
}

.comic-archive .ch-list-full:last-child .row:last-child {
    border-bottom: 4px dotted #c9b8a3;
}

.comic-archive .ch-list-full > .row:first-child {
    border-top: 4px dotted #c9b8a3;
}

#968570

Used as a font color:

.quote {

    color: #968570;
}

Used as a background or border color:

header h1.site-title {

    border-bottom: 4px dotted #968570;
}

#645849

Used as a font color:

body {

    color: #645849;
}

a:hover, a:focus { color: #645849; }

.publish-date {
    color: #645849;
}

.comment .post_tools {
    color: #645849;
}

.post_tools a:not(.username),
.post_tools a:not(.username):link,
.post_tools a:not(.username):visited,
.post_tools a.username:hover {
    color: #645849;
}

.post .news-footer,
.post .news-footer .comments-link,
.post .news-footer .comments-link:link,
.post .news-footer .comments-link:visited {
    color: #645849;
}

.post .post-title {
    color: #645849;
}

Used as a background or border color:

header {

    background: #645849;
}

header #top-left-image {
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-left.png") #645849;
}

header #top-right-image {
    background: url("http://www.smackjeeves.com/templates/geometric_western/images/header-top-right.png") #645849;
}

header nav ul#main-menu li ul.submenu {
    background: #645849;
}

#cbab84

Used as a font color:

header nav ul#main-menu li > a:hover,

header nav ul#main-menu li > a:focus,
header nav ul#main-menu li:hover > a,
header nav ul#main-menu li:focus > a {
    color: #cbab84;
}

.genmed {
    color: #cbab84;
}

Used as a background or border color:

None

#ffffff

Used as a font color:

header nav ul#main-menu li a,
header nav ul#main-menu li a:active,
header nav ul#main-menu li a:visited {
    color: #FFF;
}

#Top-Social-Bar a:hover,
#Top-Social-Bar a:focus {
    color: #FFF;
}

footer a:hover,
footer a:focus {
    color: #fff;
}

header {
    color: #FFF;
}

header nav ul#main-menu li ul.submenu {
    color: #FFF;
}

.chapter-title.selected {
    color: #FFF;
}

Used as a background or border color:

#comic_area_inner #comic_image {
    border-color: #FFF;
    border-width: 20px;
    border-style: solid;
}
#comic_jumpbox select,
#comic_jumpbox select option,
#comic_jumpbox select optgroup option,
#comic_jumpbox .jumpbox_page {
    background: #fff;
}

.comment .avatar img,
img.avatar {
    border-color: #FFF;
    border-style: solid;
    border-width: 10px;
}

.comments-footer {
    background: #FFF;
}

.comments-footer .note-corner {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
}

.home img {
    border-color: #FFF;
    border-width: 10px;
    border-style: solid;
}

.comic-archive .row div img {
    border-color: #FFF;
    border-width: 10px;
    border-style: solid;
}

Icons

This theme uses Font Awesome. That means you can use any of the free icons listed on their website. Neat! Here's the current icons used and where to find them. Some will be in the page HTML, and others in CSS.

fa-rss

Where Used:

Overall Layout - Header and Footer

The Code:

<i class="fa fa-rss"></i>

fa-facebook-square

Where Used:

Overall Layout - Header and Footer

The Code:

<i class="fa fa-facebook-square"></i>

fa-twitter-square

Where Used:

Overall Layout - Header and Footer

The Code:

<i class="fa fa-twitter-square"></i>

fa-envelope-open

Where Used:

Overall Layout - Header and Footer

The Code:

<i class="fa fa-envelope-open"></i>

fa-bars

Where Used:

Overall Layout - Header - Navigation (Mobile)

The Code:

<i class="fa fa-bars" aria-hidden="true"></i>

fa-angle-double-left

Where Used:

News / Welcome Page, Comic Page - Comic Navigation

The Code:

<i class="fa fa-angle-double-left" aria-hidden="true"></i>

fa-angle-double-right

Where Used:

News / Welcome Page, Comic Page - Comic Navigation

The Code:

<i class="fa fa-angle-double-right" aria-hidden="true"></i>

fa-angle-left

Where Used:

Comic Page - Comic Navigation

The Code:

<i class="fa fa-angle-left" aria-hidden="true"></i>

fa-angle-right

Where Used:

Comic Page - Comic Navigation

The Code:

<i class="fa fa-angle-right" aria-hidden="true"></i>

fa-pencil

Where Used:

News Archive & Comic Page - Post Tools (Edit)

The Code:

<i class="fa fa-pencil" aria-hidden="true"></i>

fa-trash

Where Used:

News Archive & Comic Page - Post Tools (Delete)

The Code:

<i class="fa fa-trash" aria-hidden="true"></i>

fa-comment

Where Used:

News Archive & Comic Page - Post Tools (Reply)

The Code:

<i class="fa fa-comment" aria-hidden="true"></i>

fa-calendar

Where Used:

News Archive - Month Selection (CSS), Comic Page - Post Tools (Date Comment Posted)

The Code:

<i class="fa fa-calendar" aria-hidden="true"></i>

The CSS:

#archive_list .dropdown-toggle.primary:before {
    content: "\f073";
    font-family: FontAwesome;
}

fa-caret-right

Where Used:

Header - Navigation (Submenu Closed), Comic Archive

The CSS:

header nav ul#main-menu li label:before {
content: "\f0da";
font-family: FontAwesome;
}

.comic-archive .chapter-title label:before {
content: "\f0da";
font-family: FontAwesome;
}

fa-caret-down

Where Used:

Header - Navigation (Submenu Open), Comic Archive

The CSS:

header nav ul#main-menu li [id^="drop-"]:checked + label:before {
content: "\f0d7";
}

.comic-archive .chapter-title.selected label:before {
content: "\f0d7";
}

fa-long-arrow-right

Where Used:

Post Content - Lists, Comment Body - Lists, News Archive - Posts Under Month Selection

The CSS:

.post .news-body ul li:before,
.comment body ul li:before {
content: "\f178";
font-family: FontAwesome;
}

#archive_list .months ul.month-dropdown li:before {
    content: "\f178";
    font-family: FontAwesome;
}

fa-calendar-plus-o

Where Used:

News Archive - Month Dropdown Open

The CSS:

#archive_list .months li.selected:before {
    content: "\f271";
}

fa-calendar-minus-o

Where Used:

News Archive - Month Dropdown Closed

The CSS:

#archive_list .months li:before {
    content: "\f272";
    font-family: FontAwesome;
}

The Grid

If you want columns, they need to be surrounded by the row class. Columns are divisible by 12, and this is how you can determine the width for each. For example, if you want two columns:

<div class="row">

  <div class="col-6">Column A</div>
  <div class="col-6">Column B</div>
</div>

It will look like this: (Borders added for clarity.)

Col-6 Div
Col-6 Div

Here are a few more examples:

Col-4 Div
Col-4 Div
Col-4 Div
Col-3 Div
Col-3 Div
Col-3 Div
Col-3 Div
Col-2 Div
Col-2 Div
Col-2 Div
Col-2 Div
Col-2 Div
Col-2 Div
Col-4 Div
Col-6 Div
Col-2 Div
Col-8 Div
Col-4 Div

What if you don't want the columns responsive? For example, you want a row to always have four columns, no matter the screen width. Well - no problem! Simply add "static-row" as a class, like so:

<div class="row static-row">

No matter how you resize the width of the screen, the columns will stay the same. Try it out with the example below:

Col-3 Div
Col-3 Div
Col-3 Div
Col-3 Div

Still not clear? Feel free to contact me with your questions.

Design to CSS Reference List

Quick How-Tos

Alternative Color Schemes

Geometric Galaxy

Coming soon!

Geometric Waves

Coming soon!

Geometric Pastel

Coming soon!