So you’re making a parallax wordpress website using the NYC TECH CLUB video tutorial? Awesome!

I wanted to make this little guide to support the video on How to Make a Parallax WordPress Website so you understand what all the custom css that we’re pasting in is about and so you know what to change to customize your colors.

What you need to do:

1. Go to (website)
2. Decide what color you want your buttons and links to be (color codes here: http://htmlcolorcodes.com)
3. Change color code into the red areas for 1, 2, 3, 4, 5, and 6
4. Choose an alternative color for your contact form and post buttons (if you want)
   1. Paste in the alternative color code into 7 and 8
5. Paste in code
6. Paste in code for 9 to customize fancy header and footer

Text version of Custom CSS
PDF version of Custom CSS

(1) ———————————————————————–

/* GENERAL BACKGROUND COLOR
Changes the contact button background cover on main nav header menu
Changes contact form button background
Changes posts circle color background color*/
.header-horizontal #headerwrap #main-nav .highlight-link a:hover,
.header-horizontal #main-nav .highlight-link.current_page_item > a,
.header-horizontal #main-nav .highlight-link.current-menu-item > a,
.loops-wrapper.list-post .post-date,
.single .post-content .post-date,
.module-buttons a.yellow,
.module-contact button {
background-color: #dfa300;
}

(2) ———————————————————————–

/* GENERAL BORDER COLOR
Changes highlight-link border on header menu
Changes button borders that aren’t customized*/
.header-horizontal #main-nav .highlight-link > a,
.more-link,
.module-buttons a.yellow,
.module-buttons.outline a.yellow,
.module-contact input[type=reset],
.module-contact input[type=submit],
.module-contact button {
border-color: #dfa300;
}

(3) ———————————————————————–

/* HEADER MENU LINK BOX SHADOOW
Changes the horizontal bar on header menu*/
.header-horizontal #main-nav > li > a:hover,
.header-horizontal #main-nav > .current_page_item > a,
.header-horizontal #main-nav > .current-menu-item > a {
box-shadow: inset 0 2px 0 0 #dfa300;
}

(4) ———————————————————————–

/* GENERAL TEXT COLOR
Changes link colors on the website
Changes fancy header sub headline
Changes blog date and categories and meta labels
Changes >> << arrows for next blog post
Changes hover color for main nav menu
Changes current page main menu color*/
a,
h1 i,
h1 em,
.module-fancy-heading h1 .sub-head,
.post-nav .arrow,
h2 i,
h2 em,
.module-fancy-heading h2 .sub-head,
#main-nav a:hover,
#main-nav .current_page_item > a,
#main-nav .current-menu-item > a,
.post-date,
.post-meta a {
color: #dfa300;
}

(5) ———————————————————————–

/* HOVER LINK COLOR
Changes arrow and blog post next hover
Changes link color in body when hover
Changes footer links when hover
Changes color for blog post titles when hover */
a:hover,
#footer a:hover,
.post-nav a:hover > span,
.post-nav .arrow:hover,
.post-title a:hover,
.footer-block .back-top .arrow-up:hover a,
.footer-horizontal-left .back-top .arrow-up:hover a,
.footer-horizontal-right .back-top .arrow-up:hover a,
.footer-left-col .back-top .arrow-up:hover a,
.footer-right-col .back-top .arrow-up:hover a,
.module-buttons .builder_button.yellow:hover,
.mobile_menu_active #headerwrap #main-nav .current_page_item > a,
.mobile_menu_active #headerwrap #main-nav .current-menu-item > a,
.mobile_menu_active.transparent-header #headerwrap #main-nav li a:hover {
color: #dfa300;
}

 

(6) ———————————————————————–

/* POST AND CONTACT FORM HOVER BUTTON COLOR */
input[type=reset]:hover,
input[type=submit]:hover,
button:hover {
background-color: #dfa003;
}

(7) ———————————————————————–

/* CONTACT FORM BUTTON BACKGROUND COLOR
This is to change the background color
for your contact form button. If you want
a hover color to change. Otherwise delete this section */
.module-buttons a.yellow,
.module-contact button {
background-color: #c38f00;
}

(8) ———————————————————————–

/* MORE BUTTON CUSTOMIZATION
Contact form button font color
Post button background color
Does not change the contact form button color */
input[type=reset], input[type=submit], button {
border-radius: 0;
color: #fff;
background-color: #c38f00;
}

(9) ———————————————————————–

/* CUSTOM CSS FOR FORMATING PURPOSES
Past the below in to customize fancy header and footer*/

.footer-block #footerwrap .back-top a:before {
font-size: 40px;
}

.footer-block #footerwrap .back-top {
order: inherit;
margin-bottom: 10px;
}
.footer-block #footerwrap .back-top .arrow-up a {
width:50px;
height: 50px;
}

#footerwrap {
padding-top: 20px;
}

.header-horizontal #headerwrap {
background-color: rgba(0,0,0,.7);
}

.maketable .fork-icon,
.module-fancy-heading .maketable .fork-icon {
display: none;
}

input[type=reset], input[type=submit], button {
border-radius: 0;
}

.header-horizontal #main-nav .highlight-link > a {
border-radius: 0;
}

.footer-nav a {
margin: 0 1em .8em 1em;
}

#footer .social-widget {
padding: 10px 0;
}