GeneratePress

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;
}

.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: https://www.w3schools.com/css/default.asp

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

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

Similar Posts

23 Comments

  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

    Reply

  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.

    Reply

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

      Reply

  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

    Reply

  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.

    Reply

  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 https://globalinfoonline now look nicer than ever. Thanks

    I want a solution to reduce padding on the header
    too

    Reply

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

      Reply

  6. Thanks for the prompt reply. I request you to look at my blog https://globalinfoonline.com and suggest a solution for padding for the header.

    Reply

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

      Reply

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

    Reply

    1. Hi Diuan,

      Your best bet for these questions would be in the GeneratePress Support forum: https://wordpress.org/support/theme/generatepress
      Tom (the developer) and Leo (support tech) are both quite active there and are very open to helping out with these sorts of questions 🙂
      Cheers!
      Lylr

      Reply

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

    Reply

  10. Great work, but
    there are DOUBLE entrances in your CSS-code for the menu:
    line7 line49
    Please check und correct it 😉

    Reply

Leave a Reply

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