GeneratePress logo

GeneratePress – On a Budget

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

The GeneratePress theme for WordPress is a very lightweight, fast and responsive theme. But the basic version available in the WordPress Theme repository or from GeneratePress.com does not offer a whole lot of stying options.

The very reasonably priced GP Premium add on will enable you to do what is shown in the tutorial and then some. However, there may be times or circumstances where every penny counts and you need to do things on a budget. That is what this tutorial will help you with.

See below the video for the code used as well as links to helpful resources.

CSS for Header, Widgets, Footer:

.header-widget .widget-title {
    font-size: 36px;
    margin-bottom: 0px;
}

#tagline {
    font-size: 24px;
    text-align: right;
    color: blue;
}

.inside-header {
    padding: 20px 40px 20px 40px;
}

.sidebar .widget .widget-title {
    color: white;
    background-color: blue;
    padding: 12px;
    text-align: center;
    margin-bottom: 12px;
}

.footer-widgets .widget-title {
    color: white;
    background-color: blue;
    padding: 12px;
    margin-bottom: 12px;
}

.footer-widgets {
    padding: 20px 0px 20px 0px;
    background-color: lightgrey;
}

.site-info {
    padding: 10px 0px 10px 0px;
    background-color: grey;
}

 

CSS for Menu:

/* MENU ITEMS */
.main-navigation, 
.main-navigation ul ul {
	background-color: blue;
}

.main-navigation .main-nav ul .current-menu-item > a {
    background-color: transparent;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
	color: #FFCC00;
	background-color: blue;
}

.navigation-search input[type="search"]:focus {
	color: #FFCC00;
	background-color: blue;
}

.main-navigation .main-nav ul li a, 
.menu-toggle {
	color: black;
    font-size: 22px;
}

.main-navigation .main-nav ul ul li a {
	color: black;
    font-size: 18px;
}

/* MENU ITEM HOVER */

.main-navigation .main-nav ul li > a:hover, 
.main-navigation .main-nav ul li.sfHover > a {
	color: white;
	background-color: transparent;
}

.main-navigation .main-nav ul ul li > a:hover, 
.main-navigation .main-nav ul ul li.sfHover > a {
	color: white;
	background-color: transparent;
}

/* CURRENT ITEMS */

.main-navigation .main-nav ul .current-menu-item > a, 
.main-navigation .main-nav ul .current-menu-parent > a, 
.main-navigation .main-nav ul .current-menu-ancestor > a {
	color: white;
	background-color: transparent;
}

.main-navigation .main-nav ul .current-menu-item > a:hover,
.main-navigation .main-nav ul .current-menu-parent > a:hover, 
.main-navigation .main-nav ul .current-menu-ancestor > a:hover, 
.main-navigation .main-nav ul .current-menu-item.sfHover > a,
.main-navigation .main-nav ul .current-menu-parent.sfHover > a, 	
.main-navigation .main-nav ul .current-menu-ancestor.sfHover > a {
	color: white;
	background-color: transparent;
}

/* SUB-NAVIGATION CURRENT ITEMS */

.main-navigation .main-nav ul ul .current-menu-item > a, 
.main-navigation .main-nav ul ul .current-menu-parent > a, 			
.main-navigation .main-nav ul ul .current-menu-ancestor > a {
	color: white;
	background-color: transparent;
    font-size: 18px;
}

.main-navigation .main-nav ul ul .current-menu-item > a:hover, 
.main-navigation .main-nav ul ul .current-menu-parent > a:hover, 	
.main-navigation .main-nav ul ul .current-menu-ancestor > a:hover,
.main-navigation .main-nav ul ul .current-menu-item.sfHover > a, 
.main-navigation .main-nav ul ul .current-menu-parent.sfHover > a, 
.main-navigation .main-nav ul ul .current-menu-ancestor.sfHover > a {
	color: white;
	background-color: transparent;
    font-size: 18px;
}

 

PHP for Code Snippets – Copyright:

add_action('after_setup_theme','generate_copyright_remove_default_message');
function generate_copyright_remove_default_message()
{
		
	remove_action( 'generate_credits', 'generate_add_footer_info' );
	remove_action( 'generate_copyright_line','generate_add_login_attribution' );
}

/**
 * Add the custom copyright
 * @since 0.1
 */
add_action('generate_credits','generate_copyright_add_custom_message');
function generate_copyright_add_custom_message()
{
?>
	Copyright © <?php echo date("Y") ?> Your website name and links
<?php
}

 

Resources:

GeneratePress: https://generatepress.com

Simple CSS: https://wordpress.org/plugins/simple-css

Code Snippets: https://wordpress.org/plugins/code-snippets

W3Schools – CSS: http://www.w3schools.com/css/default.asp

W3Schools – Colors: http://www.w3schools.com/colors/colors_names.asp

Adobe Color Wheel: https://color.adobe.com/create/color-wheel

4 thoughts on “GeneratePress – On a Budget

  1. Thanks for this interesting tutorial, I have again learned a lot about GeneratePress and can do so much easier now. Gladly I see further such valuable and instructive Toutorials to GeneratePress, CSS & Elementor.
    Best greetings from the Spreewald in Germany
    Jörg Rothhardt
    http://internetmarketingstart.de

  2. Can’t figure out how to change the color currently selected menu item, when you are on that page. Example: You are on your “about” page, then about menu item now has a lighter background. Additionally, if you have a sub-menu like: About > Co. History, then background of the selected sub-menu will be an even lighter shade.

    • Hi Derek, Look for the blocks of code that say Current Items and change the color value from white to whatever you like; same for the background-color; change from transparent to the background color you want. Cheers! Lyle

Leave a Comment