Theme Morden By Automattic: reduce gaps, modifications of header, contents, sidebars and more changes

Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business’s online presence. You can see Modern theme demo here. It is actually the Child theme of Varia. So, if you want to use it in your hosting, then you need to use Varia theme as Parent theme.

Download Parent theme Varia.

Download Child theme Morden

• 

Header Logo and Menu Container modifications

• 

1. To change Morden theme top black Header container background

#masthead {
    background: darkred !important;
}

2. To change Site title font size, color and font family

.site-title, .site-title a {
    font-size: 29px;
    color: yellow !important;
    font-family: cursive;
}

to change hover text color of site title

.site-title a:hover {
    color: blue !important;
}

3. To change top primary menu font size, color and font family

ul#menu-primary a {
    font-size: 23px !important;
    color: yellow !important;
    font-family: cursive;
}

To change top primary menu hover text color

ul#menu-primary a:hover {
    color: blue !IMPORTANT;
}

4. To reduce padding or gap from top and bottom of the header

header#masthead {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

5. Whole Site Width Increase

• 

@media only screen and (min-width: 1280px){
#page {
    max-width: 95% !important;
}
}

6. To change Block or content section width

• 

.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide>p, .wp-block-pullquote.alignfull>p, .wp-block-pullquote.alignwide blockquote, .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content [class*=inner-container]>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
    width: 90% !important;
    max-width: 90% !important;
}

• 

7. To change title container background color, title’s own font color, font size and font family

.singular .hentry .entry-title, .page-title {
    background: darkred;
    color: white;
    font-size: 32px;
    font-family: cursive;
}

8. To reduce gap from the top and bottom of the title

.singular .hentry .entry-title, .page-title {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

• 

9. To reduce gap between paragraphs in page and post contents

.entry-content p {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}

10. To change gap or line height between lines and also to change font size, color and font family of post or page contents

.entry-content p {
    line-height: 23px;
    font-size: 15px;
    color: black;
    font-family: cursive;
}

• 

11. If you want to reduce gap between posts list

li.a8c-posts-list__item {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}

12. To change background color and hover background color of buttons

• 

.a8c-posts-list__view-all {
     background: black !important;
}

button, [type=button], [type=reset], [type=submit] {
     background: black !important;
}

13. In Single Post, if you want to reduce gap between Author box and Next-Previous Post section

• 

.single article {
    margin-bottom: 0px !important;
}
nav.navigation.post-navigation {
    margin-top: 23px !important;
}

14. Also, to reduce font size, color and font family of “Published by –” author heading

span.author-heading {
    font-size: 23px !important;
    color: darkred !important;
    font-family: cursive !important;
}

Modifications in Footer

• 

To use background color in footer container and also to make the container wider

footer#colophon {
    background: darkred;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

To change footer powered by font size and color to be changed

.site-info, .site-info * {
    color: white !important;
    font-size: 19px;
}

To change footer menu font size, color and font family

.footer-navigation .footer-menu a {
    color: white !important;
    font-size: 23px;
    font-family: cursive;
}

To change or reduce footer top and bottom gap

footer#colophon {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
main#main {
    padding-bottom: 0px !important;
}

To change Block Seperator of gutenberg editor top and bottom gap

hr.wp-block-separator {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

How to design Homepage as demo in Morden theme? Here it is from wordpress.com

• 

If you have any issue feel free to ask me question here in comments section
OR
Contact me in skype om2000_cuet