GeneratePress

GeneratePress – On a Budget

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

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.

 

 

.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;
}
/* 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;
}
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 &copy; <?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

12 thoughts on “GeneratePress – On a Budget”

  1. Jörg Rothhardt

    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.

    1. Sniffle Valve

      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

  3. How can I change the color text footer widgets, I changed the background color but cant change the text color to white, because all others links change too, and I need to change only that of footer widgets links. Thanks

  4. Yes! It really work. I’ve been scratching my head and google around but nothing help me to change the footer bar color. With the “site info” code I managed to change the ugly black to other color. Thank you so much.

  5. Thanks a lot. You have really solved my problem From last many days I was searching for changing the primary menu background color and font color and font size. I did not get a solution except asking me to buy the premie version of GeneratepPress. I finally landed here and it solves my issue, My blog http://globalinfoonline now look nicer than ever. Thanks

    I want a solution to reduce padding on the header
    too

    1. Sniffle Valve

      Hi Sangam,
      You’re welcome and I’m glad it helped you out.
      It’s your header widget that is causing the large space at the bottom of the header. See if you can rework the HTML that you have for that widget.
      Cheers!
      Lyle

    1. Sniffle Valve

      As I mentioned, it is the content of your Header Widget, with your photo and text. Adjust the HTML on that.

Leave a Comment

Your email address will not be published. Required fields are marked *