In this video tutorial, I will show you, how to build a simple affiliate website using GeneratePress free theme. It’s a quick and short video, so please watch the video without skipping.
Table of Contents
Recommended Hosting
Required Plugins
Color Palete
| CSS Variable Name | Hexa Code | Actual Color |
|---|---|---|
| contrast | #222222 | |
| contrast-2 | #575760 | |
| contrast-3 | #b2b2be | |
| base | #f0f0f0 | |
| base-2 | #f7f8f9 | |
| base-3 | #ffffff | |
| accent | #1e73be | |
| border | #cccccc |
Custom CSS Code
.rpwwt-widget .rpwwt-post-date {
font-size: 14px;
border-bottom: 1px solid var(--border);
padding-bottom: 15px;
}
button.wpforms-submit {
background-color: var(--accent) !important;
color: var(--base-3) !important;
font-weight: bold !important;
text-transform: uppercase !important;
padding: 15px 20px !important;
text-transform: uppercase !important;
display: inline-flex !important;
align-items: center !important;
border-width: 0 !important;
}
.sidebar .widget {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
margin-bottom: 40px;
}
.site-header {
box-shadow: 0 0 6px 0 rgb(37 37 37 / 24%);
}
.widget-title {
border-bottom: 2px solid var(--border);
padding-bottom: 15px;
}
.widget-title::after {
content: '';
display: block;
position: relative;
width: 50px;
height: 2px;
background: #333;
bottom: -17px
}
.rpwwt-widget a {
text-decoration: none;
}
.rpwwt-post-date {
color: var(--contrast-3);
padding-top: 5px;
}
ul.wp-block-categories li,
ul.wp-block-archives li {
list-style-type: disc;
margin-left: 20px;
border-bottom: 1px solid var(--border);
}
ul.wp-block-categories li a,
ul.wp-block-archives li a {
display: inline-block;
width: 80%;
float: none;
text-decoration: none;
padding-bottom: 13px;
margin-bottom: 13px;
}
.wp-block-tag-cloud a {
font-size: 14px !important;
text-decoration: none;
border: 1px solid var(--border);
padding: 5px 12px;
margin-bottom: 10px;
}
#comments {
border: 1px solid var(--border);
padding: 20px;
}
a.read-more {
display: block;
margin-top: 15px;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: capitalize;
font-weight: 600;
}
a.read-more::after {
content: '→';
}
.read-more-section {
text-align: center;
margin-top: 40px;
}
.gp-post-date-author {
text-align: center;
}
.gp-post-date-author {
padding: 7px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 14px;
margin-top: -10px;
}
.gp-custom-category-section {
text-align: center;
padding-bottom: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 14px;
}
.gp-custom-tag-section a {
padding: 5px 10px;
margin-right: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 13px;
}
.gp-custom-tag-section {
margin-top: 15px;
}
.paging-navigation {
text-align: center;
}
.inside-header {
padding: 10px 40px;
}
.cat-links, .comments-link, .tags-links {
display: inline-block;
padding-right: 10px;
}
.rpwwt-post-author {
font-size: 14px;
}
.wp-block-latest-posts a {
text-decoration: none;
}
.wp-block-latest-posts__list.wp-block-latest-posts li {
list-style-type: decimal;
margin-bottom: 15px;
font-size: 95%;
margin-left: 20px;
}
.sidebar .widget {
margin-bottom: 40px;
}
/** Responsive Grid System */
.wpf_column {
float: left;
width: 50%;
padding: 10px;
}
.wpf_row:after {
content: "";
display: table;
clear: both;
}
.wpf-container {
max-width: 1300px;
margin: 0 auto;
padding: 20px;
}
.wpf-container-wrapper {
background: var(--banner-bg);
margin-top: 5px;
margin-bottom: 25px;
padding-bottom: 25px;
padding-top: 25px;
}
.wpf_column_wrapper img {
margin: 0 auto;
}
@media only screen and (max-width: 640px) {
.wpf_column {
float: left;
width: 100%;
padding: 10px;
}
}Custom PHP Code
GeneratePress Copyright Text
add_filter( 'generate_copyright','gp_custom_copyright_affiliate_design_1' );
function gp_custom_copyright_affiliate_design_1() {
?>
© 2022 GeneratePress Site Development• All Rights Reserved!
<?php
}