eleven40-pro

  • Customizing Genesis eleven40-pro Theme

    ·

    This tutorial is for customization of eleven40-pro, a child theme of genesis by studiopress.com. eleven40-pro is one of the most popular premium genesis child theme. The codes written for different genesis child themes are very similar because they are all of same parent theme i.e. genesis framework. If someone learn to customize a particular child theme of genesis, he/she can also customize other child themes similarly.

    Customizing any theme requires editing of functions.php and style.css file inside theme directory. If you have edit permission from wordpress dashboard, you may change it from Appearance->Editor->functions.php or style.css. Always refresh your browser cache to see style changes.

    1. Change fixed header to Unfixed.

    The header of eleven40-pro theme is normally fixed, that means whenever you scroll a page, the header remains always visible. So, the header part always occupy a certain height of your screen. This may be unwanted for many website developers. So we change fixed header to unfixed header. Find .site-header { in style.css.

    .site-header {
    ...
    position: fixed; // Remove this line
    ...
    }

    Whenever you make your header unfixed, you will see an increased margin below header area. So to adjust you need to change margin values.

    .site-inner {
    	clear: both;
    	margin: 65px 0 40px; // Change 65px to 0
    }

    2. Remove featured post from home page

    The home page of this theme is a two column grid with featured post at the top. The first post (featured) is displayed in full length. If you want to disable featured post, goto Appearance->Editor->home.php

    genesis_grid_loop( array(
    'features' => 1,  // Change 1 to 0
    

    3. Completely Remove Grid style Homepage

    Rename home.php to home-old.php
    You can not rename a file from wordpress dashboard. You need to either use a FTP client or have root access to your hosting account or need to ask your host to rename this file.

    4. Display post excerpts instead of full length

    Goto Genesis->Theme Settings->Content Archives->Display Post Excerpts

    excerpts

    5. Change Footer Credit Texts

    Add the following code inside functions.php

    //* Change the footer text
    add_filter('genesis_footer_creds_text', 'wbxp_footer_creds_filter');
    function wbxp_footer_creds_filter( $creds ) {
    	$creds = 'Copyright © by Yoursite Name · All rights reserved · [footer_loginout]';
    	return $creds;
    }

    6. Remove Website Field from Commentators

    Add this code inside functions.php

    //* Remove Website Field
    add_filter('comment_form_default_fields', 'wbxp_remove_comment_url');
    function wbxp_remove_comment_url($arg) {
        $arg['url'] = '';
        return $arg;
    }

    7. Remove Comment Form Allowed Tags and Display a Custom Message

    Add this inside functions.php

    //* Remove comment form allowed tags
    add_filter( 'comment_form_defaults', 'eleven40_remove_comment_form_allowed_tags' );
    function eleven40_remove_comment_form_allowed_tags( $defaults ) {
    	
    	$defaults['comment_notes_after'] = 'Do not share your Mobile number.';
    	return $defaults;
    
    }

    8. Display Excerpts for Pages

    By default genesis support only excerpts for posts. You may add excerpts for pages also. Add the following inside functions.php

    add_post_type_support( 'page', 'excerpt' );

    Now you can see Excerpt for pages also.

    page-excerpt

    9. Change Font size of different Headings

    eleven40-pro theme uses large font size, lots of white space, margin, padding, etc. We now change these things to make this theme looks compact. All these values are calculated from our end to make this beautiful as per our views. So you may change with your own values accordingly in style.css.

    h1 {
    font-size: 24px;
    }
    
    h2 {
    font-size: 20px;
    }
    
    h3 {
    font-size: 18px;
    }
    
    h4 {
    font-size: 16px;
    }
    
    h5 {
    font-size: 15px;
    }
    
    h6 {
    font-size: 14px;
    }

    10. Change Font Size of Post Title

    .entry-title {
    font-size: 36px;  // Change 36px to 24px
    line-height: 1;
    }

    11. Change Font Size of Body Text

    Change in style.css

    body {
    ...
    font-size: 18px; // Change 18 to 14
    ...
    }

    12. Change Font Size of different Sections

    Sections are self explanatory, so we only put the changes in style.css.

    blockquote::before {
    font-size: 14px;
    
    .breadcrumb {
    font-size: 12px;
    
    .archive-description h1,
    .author-box h1 {
    font-size: 14px;
    
    .archive-description p,
    .author-box p {
    font-size: 13px;
    
    .site-title {
    font-size: 22px;
    
    .genesis-grid {
    font-size: 14px;
    }
    
    .entry-meta {
    font-size: 14px;
    }
    
    .comment-header {
    font-size: 14px;
    }
    
    .sidebar {
    font-size: 14px;
    }
    
    .footer-widgets {
    font-size: 13px;
    
    .site-footer {
    font-size: 13px;
    
    input,
    select,
    textarea {
    font-size: 14px;
    
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button {
    font-size: 14px;
    
    .wp-caption-text {
    font-size: 14px;
    
    .archive-title {
    font-size: 16px;
    

    13. Change margin and padding of different sections

    .site-description {
    font-size: 16px;
    margin: 30px 0 0;
    padding: 18px 0;
    }
    
    .site-description {
    font-size: 14px;
    }
    
    p {
    margin: 0 0 18px;
    padding: 0;
    }
    
    blockquote {
    margin: 30px 30px 18px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    margin-bottom: 14px;
    
    input,
    select,
    textarea {
    padding: 14px;
    
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button {
    padding: 14px 18px;
    
    table {
    margin-bottom: 30px;
    
    .site-inner {
    clear: both;
    margin: 0 0 24px;
    }
    
    .content {
    padding: 24px 30px 18px;
    
    .full-width-content .content {
    padding: 30px 0 0;
    }
    
    .genesis-grid-even,
    .genesis-grid-odd {
    margin-bottom: 16px;
    }
    
    .alignleft .avatar,
    .author-box .avatar {
    margin-right: 20px;
    }
    
    .alignright .avatar {
    margin-left: 20px;
    }
    
    .entry-comments .avatar {
    margin: 0 14px 20px 0;
    }
    
    img.alignleft,
    .featured-content .alignleft img,
    .wp-caption.alignleft {
    margin: 0 20px 20px 0;
    }
    
    img.alignright,
    .featured-content .alignright img,
    .wp-caption.alignright {
    margin: 0 0 20px 20px;
    }
    
    .breadcrumb {
    font-size: 12px;
    margin-bottom: 24px;
    padding: 10px 14px;
    }
    
    .archive-description,
    .author-box {
    margin-bottom: 30px;
    padding: 30px;
    }
    
    .sidebar-content-sidebar .archive-description,
    .sidebar-content-sidebar .author-box {
    margin: 0 -30px 30px;
    }
    
    .widgettitle {
    margin-bottom: 20px;
    }
    
    .archive-title {
    margin-bottom: 20px;
    }
    
    .genesis-nav-menu a {
    padding: 22px 16px 20px;
    }
    
    .genesis-nav-menu .sub-menu a {
    padding: 14px 16px;
    }
    
    .nav-primary .genesis-nav-menu .sub-menu .sub-menu {
    margin: -47px 0 0 189px;
    } //kept same
    
    .nav-primary .sub-menu a {
    padding: 14px 16px;
    }
    
    .entry {
    margin-bottom: 20px;
    }
    
    .single .entry {
    margin-bottom: 14px;
    }
    
    .eleven40-landing .entry {
    padding: 20px 30px 14px;
    }
    
    .entry-content ol,
    .entry-content p,
    .entry-content ul {
    margin-bottom: 14px;
    }
    
    .entry-content ol,
    .entry-content ul {
    margin-left: 30px;
    }
    
    .entry-header .entry-meta {
    margin-bottom: 14px;
    }
    
    .entry-footer .entry-meta {
    padding-top: 10px;
    }
    
    .after-entry {
    background-color: #f5f5f5;
    margin-bottom: 20px;
    padding: 14px;
    text-align: center;
    }
    
    .after-entry .widget {
    margin-bottom: 30px;
    }
    
    .archive-pagination,
    .entry-pagination {
    margin: 30px 0;
    }
    
    .entry-comments,
    .ping-list {
    margin-bottom: 20px;
    }
    
    .comment-respond input[type="email"],
    .comment-respond input[type="text"],
    .comment-respond input[type="url"] {
    width: 30%
    }
    
    /* Forms
    
    input,
    select,
    textarea {
    padding: 6px;
    }
    
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button {
    padding: 8px 18px;
    }
    
    .comment-respond label {
    margin-right: 12px;
    }
    
    .comment-list li,
    .ping-list li {
    margin-top: 12px;
    padding: 16px;
    }
    
    .comment-list li li {
    margin-right: -16px;
    }
    
    .sidebar {
    padding-top: 24px;
    }
    
    .sidebar .widget {
    margin-bottom: 30px;
    }
    
    .footer-widgets {
    padding-bottom: 30px;
    padding-top: 30px
    }
    
    .footer-widgets-1 {
    margin-right: 30px;
    }
    
    .footer-widgets .widget {
    margin-bottom: 30px;
    }
    
    .site-footer {
    padding: 10px 12px;
    }
    
    .genesis-nav-menu.responsive-menu li.current-menu-item > a,
    .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
    .genesis-nav-menu.responsive-menu li a,
    .genesis-nav-menu.responsive-menu li a:hover {
    padding: 16px;
    }
    
    .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
    padding: 12px 16px;
    }
    
    .genesis-nav-menu.responsive-menu .sub-menu li a,
    .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
    padding: 16px;
    }
    
    .author-box {
    padding: 16px;
    }
    
    .footer-widgets .widget:last-child {
    margin-bottom: 30px;
    }
    

    That’s all. We hope you like this new look of eleven40-pro theme after making above changes. If you have any suggestion or question please feel free to comment below. We’ll get back to you.