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

17 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.

  6. Hello Lyle,

    I have been banging my head against the wall for a few days now trying to figure out how to put my blog site together so that it looks good on a shoe string budget. Then I came across your teaching videos and I feel as though I have some footing now, but I want to pose a few questions to you, if you don’t mind. The first is how can I go about placing the tagline under my sites logo with it being centered in the header? Secondly, how can the navigation bar size be reduced? It way to thick for he site. And lastly, for some reason every time I try to put in the right side widgets, nothing shows up, do you know the reason for this?

    Thank you in advance for taking the time to reply back to me.

  7. Lyle,

    Thank you for your quick reply. With you directing me to wordpress support, just reading through the posts I’ve been able to find the code to do the things that I asked you about and more. So again that you for your reply.

Leave a Comment

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