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.
Header Logo and Menu Container modifications
- 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
Pay me some, I will help you for CSS Issue Personally CLICK HERE….
