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

September 15, 2019May 26, 2020 allaboutbasic

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

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

Published by allaboutbasic

View all posts by allaboutbasic

60 thoughts on “Theme Morden By Automattic: reduce gaps, modifications of header, contents, sidebars and more changes”

theresaguzmanstokes says:

July 21, 2020 at 11:02 pm

Thank you for your posts. I always find great information here!
There are a few questions on the Morden theme that I can’t seem to find anywhere else. The site I’m working on is ashleymstokes.com

How do I:
Change highlight color on subnav from red to another color?
Remove space between the header and cover block?
Remove navigation in header?
Remove footer from the home page? (I’m trying to make the home page just a splash page)
Move “Enter” button position on home page? (I tried changing the focal point, tried changing from left to center – nothing works)
I really appreciate all the information you post – it is a blessing.

LikeLike

Reply
1. theresaguzmanstokes says:
  
  July 21, 2020 at 11:03 pm
  
  Sorry – realized that I wasn’t clear on one of the questions. “Remove navigation in header?” should read “…on only the home page.”
  
  LikeLike
  
  Reply
  1. allaboutbasic says:
    
    July 22, 2020 at 10:36 am
    
    Hi Ashley
    
    1) Change highlight color on subnav from red to another color in Morden theme
    .site-header-wrap .main-navigation > div > ul > li:hover li:hover > a {
    background: green !important;
    }
    
    2) Remove space between the header and cover block
    #main {
    padding-top: 32px !important;
    }
    
    3) Remove navigation in header in homepage
    
    .home nav#site-navigation {
    display: none;
    }
    
    4)Remove footer from the home page? (I’m trying to make the home page just a splash page)
    .home footer#colophon {
    display: none;
    }
    
    .home #main {
    padding-bottom: 0px !important;
    }
    
    Regarding Enter button
    
    .home a[href=”http://www.ashleymstokes.com/bio/”] {
    /* float: none !IMPORTANT; */
    margin-left: auto !IMPORTANT;
    margin-right: auto !IMPORTANT;
    position: absolute;
    /* display: block; */
    text-align: center;
    left: 0;
    right: 0;
    width: 170px;
    }
    
    please let me know if that is ok or not
    
    LikeLike
theresaguzmanstokes says:

July 22, 2020 at 11:17 pm

This is wonderful. Thank you so much.
The only issue we ran into, is that the header and cover block still has space between them on the mobile version. Other than that everything worked perfectly.
If I may ask two more questions (both about spacing).
1. how do I reduce the spacing between header and content?
2. how do I change spacing in bulleted lists?
I can’t tell you how much I appreciate all your help, and the abundace of information in your blog.
-Theresa

LikeLike

Reply
1. allaboutbasic says:
  
  July 22, 2020 at 11:33 pm
  
  Hi Theresa
  would you mind to check this for mobile issue
  
  @media (min-width: 320px) and (max-width:668px) {
  .home #main {
  padding-top: 0px !IMPORTANT;
  }
  }
  
  for the issues u mentioned
  
  1. how do I reduce the spacing between header and content?
  2. how do I change spacing in bulleted lists?
  
  ** would you mind to share me the pages where the issues are showing?
  
  Regards
  Om
  
  LikeLike
  
  Reply
  1. theresaguzmanstokes says:
    
    July 22, 2020 at 11:48 pm
    
    That worked! The mobile version looks good. Noticed that button still isn’t moving off the edge of the door…but that is such a minor thing.
    As to the spacing, all the pages (with exception of the home page), I’d like to reduce the space between the header and content by half.
    On the Operations page, I’d like to increase the space between bullet points.
    
    LikeLike
  2. allaboutbasic says:
    
    July 22, 2020 at 11:57 pm
    
    Hi Theresa
    for the spacing issue please try this
    
    body:not(.home) main#main {
    padding-top: 0px !IMPORTANT;
    }
    
    To increase spacing between bullet points, try this
    
    .entry-content ul li {
    margin-bottom: 22px;
    }
    
    let me know if that helps
    
    Regards
    Om
    
    LikeLiked by 1 person
theresaguzmanstokes says:

July 23, 2020 at 12:07 am

So much better. Thank you!

LikeLike

Reply
1. allaboutbasic says:
  
  July 23, 2020 at 12:08 am
  
  Pleasure
  
  LikeLike
  
  Reply
karinskyberg says:

August 13, 2020 at 5:09 pm

Thank you for your post.

Hope it is okay to ask you two questions from Denmark:
1. Is it possible to make the header with navigation and logo stay on screen at all times when I scroll down the page?
2. Is it possible to remove the gap between the bottom group about us shown on the exsample and the footer?

Thank you very much in advance.
Regards Karin

LikeLike

Reply
1. allaboutbasic says:
  
  August 13, 2020 at 5:34 pm
  
  Hi Karin
  would you mind to share me your site url to check please?
  
  Regards
  Om
  
  LikeLike
  
  Reply
  1. karinskyberg says:
    
    August 13, 2020 at 11:16 pm
    
    Hi again
    I am rebuilding the site, so the page are not online yet and the menu is therefore not the right one. But I have publised the comming front page with a code. I know it wil be shown here 😉
    https://gdpr360.dk/forside/
    and code is 100508
    
    LikeLike
  2. allaboutbasic says:
    
    August 14, 2020 at 1:10 am
    
    Hi karin
    actually it would better if u create the page fully so that i can check
    for issue 1 u can try this though
    
    header#masthead {
    position: sticky !important;
    top: 0;
    }
    
    Regards
    om
    
    LikeLiked by 1 person
karinskyberg says:

August 16, 2020 at 5:38 pm

Hi

That would be really great if you want to help later. Thank you so much. I am a beginner at this, so all the help I can get is fantastic! 🙂

The code is great, but the rows and banner I have, they look like that they are on a top layer, so they hide the header when I scroll. If you want to, maybe you wouldn´t mind checking that too, please.

LikeLike

Reply
1. allaboutbasic says:
  
  August 16, 2020 at 5:47 pm
  
  Hi Karin
  thanks, i checked and found you added the code i shared you..
  so..if you put contents in the page you will notice that the header will remain stick to the top when u will scroll..
  currently your home page is not showing any content so..nothing to scroll…so the code effect not showing
  
  Regards
  Om
  
  LikeLiked by 1 person
  
  Reply
karinskyberg says:

August 22, 2020 at 6:58 pm

Hi again
1. regarding the header it is staying – that is GREAT!!! -, but pictures are rolling “over” the menu. Is it possible to stick the header to the toplayer?
2. I think I found out most of the white space near header and footer with help from your code for the header. But when I check on the mobile they are still there. On desktop it looks geat. Only the page Kontakt at the footer am I still having trouble with.
3. I tried this code, but the background is still not changing. Would really like this color: #f1cdbd, but cyan is not working either. Would you mind see what I am doing wrong, please. ?
.singular .hentry .entry-title, .page-title {
background: darkred;
color: white;
font-size: 32px;
}
I have the page online now.
Kind regards
Karin

LikeLike

Reply
1. allaboutbasic says:
  
  August 22, 2020 at 7:39 pm
  
  Hi Karin
  would you mind to share me the URL please?
  as i check comments in dashboard, it becomes tough to check previous comments..
  so please share me your URL when you do comments
  
  Kind Regards
  Om
  
  LikeLiked by 1 person
  
  Reply
  1. karinskyberg says:
    
    August 22, 2020 at 8:02 pm
    
    Hi
    Sure, of course. I am sorry I didnt write it.I will remember it in the future.
    Here it is gdpr360.dk. Thank you
    Kind regards
    Karin
    
    LikeLike
  2. allaboutbasic says:
    
    August 22, 2020 at 8:24 pm
    
    Pleasure Karin
    for the Menu and image issue please add this code
    
    header#masthead {
    z-index: 111;
    }
    let me know if it helps
    
    LikeLiked by 1 person
karinskyberg says:

August 23, 2020 at 4:45 pm

Hi Om
The code:
header#masthead {
z-index: 111;
}
It worked perfectly! Great!

LikeLike

Reply
1. karinskyberg says:
  
  August 23, 2020 at 4:47 pm
  
  On the page gdpr360.dk 🙂 Both on the desktop and mobile.
  
  LikeLike
  
  Reply
  1. allaboutbasic says:
    
    August 23, 2020 at 5:14 pm
    
    Better you share me screenshot regarding issue 2 and 3 please
    
    LikeLike
2. allaboutbasic says:
  
  August 23, 2020 at 4:50 pm
  
  Pleasure Karin
  Regarding issue 2 and 3
  would u mind to clarify issue 2 please? sorry didnt understand
  for issue 3– i found u hide that title..and used it different way
  
  LikeLike
  
  Reply
  1. karinskyberg says:
    
    August 23, 2020 at 7:53 pm
    
    Hi
    I dont know how to upload screenshots here. So hope this it good enough. If not, please tell me how to upload, tank you:
    
    Issue 2A: If you look at this page https://gdpr360.dk/kontakt/ on a desktop, there is a white space/row right above the footer, which I would like to remove. I dont know if it is because I used a contact form plugin on the page. On the other pages the white space is gone near the header and footer.
    Issue 2B: When I look at the site gdpr360.dk on my mobile, the white space/row near the header is still there on all pages, but the space/row near the footer is the same problem as the desktop – Gone on all pages but not on the kontakt page (same url as https://gdpr360.dk/kontakt/).
    
    Issue 3: If you look at gdpr360.dk (frontpage) the title is “on”, The title is “hidden” on all the other pages because I cant get the background color to work. Therefore I made a row and colored the background on that. But is it possible to get the background color on the title space to this #f1cdbd or maybe cyan? It is white right now and will not change wether I write black,red nor cyan in the code. I cant check the page on an Ipad, because I dont have one.
    I used this code:
    .singular .hentry .entry-title, .page-title {
    background: darkred;
    color: white;
    font-size: 32px;
    }
    
    Regards Karin
    
    LikeLike
  2. allaboutbasic says:
    
    August 23, 2020 at 9:14 pm
    
    Hi Karin
    Regarding the gap in footer of Contact page
    try this code
    
    article#post-206, article#post-206 div {
    margin-bottom: 0px !important;
    padding-bottom: 0px !IMPORTANT;
    }
    
    but there will still gap…because..u have used some blank paragrap below that footer bar..so i prefer u remove those blank paragraph
    
    Regarding issue 2B
    i think u r searching this
    
    main#main, #main header.entry-header h1.entry-title {
    padding-top: 3px !IMPORTANT;
    margin-top: 0px !IMPORTANT;
    }
    
    For issue 3
    
    #main {
    padding-top: 0px !important;
    }
    #main header.entry-header h1 {
    margin: 0px !IMPORTANT;
    background: #f1cdbd !IMPORTANT;
    padding-top: 0px !IMPORTANT;
    height: 71px;
    }
    
    would you mind to test if those work or not
    
    LikeLiked by 1 person
karinskyberg says:

August 24, 2020 at 1:31 pm

Hi
Regarding issue 2A: It is gone 🙂 Perfect!
Regarding issue 2B: It is gone 🙂 Great!

Regarding issue 3 with the title showing instead of a colored row: There are still problems. On the desktop it looks great on 2 pages
https://gdpr360.dk
https://gdpr360.dk/komplet-loesning
But on the other pages the space height is higher than the 2 pages before
https://gdpr360.dk/raadgivning/
https://gdpr360.dk/risikovurdering/
https://gdpr360.dk/sikker-mail/
https://gdpr360.dk/kontakt/
I have checked that I have no margin/padding on the object(row) below the title space on all pages. I have noticed if I change the height to zero in the code, then the 4 pages look normal, but then the 2 first pages is very small in height. I cant see where I go wrong… On the 2 first pages the following object is a row in full width, and on the other 4 pages the row is aligned center if that can have anything to say…
#main {
padding-top: 0px !important;
}
#main header.entry-header h1 {
margin: 0px !IMPORTANT;
background: #f1cdbd !IMPORTANT;
padding-top: 0px !IMPORTANT;
height: 71px;
}
On the mobile: the title height is the same on all pages – too high. But on the mobile the title space is allso not shown completely from side to side, but is missing a little space on each side, so there is the color white showing. On this page https://gdpr360.dk/kontakt/ the row with contact info near footer has changed too with the white gap on each side as the title par, but only that page… mysterious… About to give up on that contact page.

Thank you so much for all your help. I dont know what I would have done without your help 🙂

LikeLike

Reply
1. allaboutbasic says:
  
  August 24, 2020 at 6:05 pm
  
  Hi Karin
  
  please try this
  
  #main header.entry-header h1.entry-title {
  padding-top: 5px !IMPORTANT;
  margin-top: 0px !IMPORTANT;
  display: block;
  /* line-height: 45px; */
  padding-bottom: 5px !IMPORTANT;
  margin-bottom: 0px !IMPORTANT;
  height: auto;
  }
  header.entry-header {
  margin-bottom: 0px !IMPORTANT;
  padding-bottom: 0px !IMPORTANT;
  padding-top: 0px !IMPORTANT;
  margin-top: 0px !IMPORTANT;
  }
  .home .entry-content {
  margin-top: 0px !IMPORTANT;
  }
  .home .wp-block-group.alignfull {
  margin-top: auto !IMPORTANT;
  }
  .page-id-334 .entry-content {
  margin-top: 0px !important;
  }
  .page-id-334 .wp-block-kadence-rowlayout.alignfull {
  margin-top: 0px !IMPORTANT;
  }
  
  this will solve the other pages, the 2 page which were working..u need to adjust the full width block
  or let me know when u r done i will check
  
  LikeLike
  
  Reply
  1. karinskyberg says:
    
    September 2, 2020 at 1:41 pm
    
    Hi again.
    
    Thank you so much for your help. It is looking great now. There is a white gap on the Kontakt page on the mobile, but that is ok.
    
    Is it possible to hide the title on frontpage, but keep them on the other pages?
    I tried the plugin that I used before, but it is not working anymore. I found another, but not used by many. When I activate that one it hides the title but allso the menu, so removed it again.
    
    Regards Karin
    
    LikeLike
  2. allaboutbasic says:
    
    September 2, 2020 at 2:08 pm
    
    Hi Karin
    try this
    seems you are searching this
    
    .home header.entry-header {
    display: none;
    }
    
    LikeLiked by 1 person
karinskyberg says:

September 3, 2020 at 1:19 pm

Hi

.home header.entry-header {
display: none;
}

It is perfect!!! thank you so so much.
And sorry that I forgot the website URL (gdpr360.dk) again.

LikeLike

Reply
1. allaboutbasic says:
  
  September 3, 2020 at 1:24 pm
  
  No Problem
  
  LikeLike
  
  Reply
lizziedy says:

October 15, 2020 at 6:51 am

This is very helpful, thank you!

I’m having trouble with the Morden theme and categories. It looks like none of the php files listed in this hierarchy are included in the theme: “category-slug.php → category-id.php → category.php → archive.php → index.php”. As a result, when I use a category on a blog post, if a user tries to navigate to the category, they get a 404 error.

Do you know how to address this?

Thank you!

LikeLike

Reply
1. allaboutbasic says:
  
  October 15, 2020 at 11:12 am
  
  Hi Lizziedy
  would you mind to share me the Category URL you are facing issue?
  
  Regards
  Om
  
  LikeLike
  
  Reply
  1. lizziedy says:
    
    October 15, 2020 at 10:21 pm
    
    https://www.arcticflowerpublishing.com/blog/research/
    
    Thanks!
    
    LikeLike
  2. allaboutbasic says:
    
    October 16, 2020 at 11:32 am
    
    Hi Lizzie
    so u want your post url be like http://urdomain.com/category/subcategory/postslug
    something like this?
    
    please let me know
    
    Regards
    Om
    
    LikeLike
  3. lizziedy says:
    
    October 16, 2020 at 11:09 pm
    
    I’d like a page where all the posts for a particular category are listed. For example, if I go to https://www.arcticflowerpublishing.com/blog/ (autogenerated) and click the “Research” link under “Sample Research 1”, it brings me to https://www.arcticflowerpublishing.com/blog/research/, which looks like should also be autogenerated. However, it doesn’t get generated. This goes into a little of what I’m talking about: https://www.wpbeginner.com/wp-themes/how-to-create-category-templates-in-wordpress/. It looks like there is already supposed to be a category.php file in the theme, but I can’t seem to find one.
    
    Thank you!
    
    LikeLike
  4. allaboutbasic says:
    
    October 17, 2020 at 2:52 pm
    
    Hi Lizzie
    thanks
    actually you used “Blog” as category, generally we create “Blog” as a page and in that blog page all posts from all categories should be showing…
    another fact is
    suppose you create a post named “Hellow World” and you put this post under “Research” category
    
    so when you will go to that “Research” category page ( it will be auto generated) ..that Hellow World post will be showing there
    
    Please let me know if any confusion
    
    Regards
    Om
    
    LikeLike
2. lizziedy says:
  
  October 17, 2020 at 7:54 pm
  
  Thank you again! I removed the “blog” parent category and have the research, etc., categories as top level categories and it’s now working. Thank you!
  
  LikeLike
  
  Reply
lizziedy says:

October 16, 2020 at 7:02 am

Another question: my logo is above the text rather than next to the text on desktop: https://www.arcticflowerpublishing.com/

The height is 60px as specified here https://wordpress.com/theme/morden#logo

Any tips on how to get the logo next to the text?

Thank you!!!

LikeLike

Reply
1. allaboutbasic says:
  
  October 16, 2020 at 1:59 pm
  
  For the logo
  would you mind to test this please
  
  @media (min-width: 960px) {
  .site-logo {
  position: absolute;
  left: -103px;
  top: -11px;
  }
  }
  
  LikeLike
  
  Reply
  1. lizziedy says:
    
    October 17, 2020 at 7:55 pm
    
    This worked, thanks!
    
    LikeLike
  2. allaboutbasic says:
    
    October 17, 2020 at 8:44 pm
    
    Pleasure Lizzie
    🙂
    nice to know it helped
    
    LikeLike
SamL says:

November 12, 2020 at 2:40 am

Hi.

I’m currently using the Morden theme under a free wordpress plan and I am having trouble with the mobile representation of my website’s homepage, booking page, and review page. When I open my website on my mobile device, several paragraphs of the homepage do not appear, and the booking page and reviews are missing several paragraphs and sections.

I found that when I the site works properly only when I click “view full site.” Could you tell me how to make the “Full site version” on mobile as a default for my website?https://samstutoringcompany.wordpress.com/

Or would you recommend an alternate solution?

Thanks so much for your time and help!

Sincerely,
Sam

LikeLike

Reply
1. allaboutbasic says:
  
  November 12, 2020 at 10:21 am
  
  Sam
  in free plan you only can use which the theme/wordpress.com is providing
  extra you cant do
  Regards
  Om
  
  LikeLike
  
  Reply
Fernando says:

December 10, 2020 at 1:07 am

Hi,

Great Theme! I have one question: I’ve been trying to change the hover background and text colour of the Menu button when Morden is in Mobile view. I have used the following code but the colours still appear in default red background and white text.

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

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

Best regards,
Fernando

LikeLike

Reply
1. allaboutbasic says:
  
  December 10, 2020 at 2:12 am
  
  Hi Fernando
  please share me your site url to check
  
  Regards
  Om
  
  LikeLike
  
  Reply
  1. laicouto2 says:
    
    December 10, 2020 at 5:54 am
    
    Hi,
    The website hasn’t been published outside of my WordPress account — will you be able to see it if I share the link?
    
    LikeLike
  2. allaboutbasic says:
    
    December 10, 2020 at 7:39 am
    
    Thanks
    actually need to see the site live somehow
    
    🙂
    
    LikeLike
  3. laicouto2 says:
    
    December 14, 2020 at 9:35 pm
    
    Hi, sorry about the delayed reply.
    Here is the link: https://youngpolandartsandcrafts.org.uk
    
    1) As you can see in Mobile view, the Menu button appears in default red background and white text when clicked. It would be great to be able to change that to other colours.
    
    2) I am now also having problems with the masthead and not being able to change the font size or font colour despite using the code you mentioned above. I can change the background colour — temporarily in white-smoke so that I can see the white text.
    
    3) Would there be an option to have the masthead menu for Desktop centred rather than to the right?
    
    4) Would it be possible too to reduce the space between the columns in Home?
    
    Thank you so much!
    
    LikeLike
  4. allaboutbasic says:
    
    December 15, 2020 at 12:41 am
    
    For issue 1
    @media (min-width: 320px) and (max-width: 767px) {
    label#toggle-menu {
    background: green !IMPORTANT;
    }
    ul#menu-top-menu a {
    color: black;
    }
    }
    
    For issue 2
    
    to change menu items font size
    
    ul#menu-top-menu a {
    font-size:15px !important;
    }
    
    For issue 3
    @media (min-width:1200px) {
    .site-header-wrap .main-navigation {
    
    justify-self: flex-start !important;
    }}
    
    For issue 4
    ** are you referring the space between book | Exhibition | Artists and Designers ?
    
    please let me know
    
    Regards
    Om
    
    LikeLike
  5. laicouto2 says:
    
    December 15, 2020 at 3:45 pm
    
    Hi,
    
    Many thanks for all this — you are a star!
    
    Regarding issue 4, yes I meant the spaces between Book, Exhibition and Artists as well as the white padding to the edge of the webpage because I would like Book and Artists to be right up against the edge without white padding.
    
    Regarding issue 2, is there a way that I can change the typeface colour on the masthead too? And to change the selected page on the masthead not by having an underline but by showing it in a different colour instead?
    
    Best regards
    
    >
    
    LikeLike
  6. allaboutbasic says:
    
    December 16, 2020 at 7:08 pm
    
    To remove the selected menu items underline
    
    li.current-menu-item a {
    box-shadow: none !IMPORTANT;
    }
    To change menu item color
    
    li.menu-item a {
    color: red !IMPORTANT;
    }
    please let me know if it helps
    
    For issue 4
    ** actually only css cant help that…need more modifications
    
    LikeLike
  7. laicouto2 says:
    
    December 19, 2020 at 10:55 pm
    
    This is great, thanks!
    
    No worries about issue 4. One last question: Is there a way that I can get the embedded YouTube in Homepage to be full width and also to play captions automatically?
    
    Many thanks for all the other help — super helpful!
    
    >
    
    LikeLike
  8. allaboutbasic says:
    
    December 20, 2020 at 2:02 pm
    
    Hi
    thanks
    to make your embeded youtube video full width
    
    .home figure.wp-block-embed {
    width: 100% !important;
    }
    
    and you want to play it automatically you mean?
    
    Regards
    Om
    
    LikeLike
  9. laicouto2 says:
    
    December 20, 2020 at 2:17 pm
    
    Hi,
    
    I mean to turn on English subtitles automatically if someone clicks the video to play.
    
    Regards
    
    (sent on the move)
    
    >
    
    LikeLike
  10. allaboutbasic says:
    
    December 20, 2020 at 2:43 pm
    
    the subtitle issue seems different
    i mean.. video editing facts..
    not related to css
    
    LikeLike
  11. laicouto2 says:
    
    December 21, 2020 at 8:24 pm
    
    Hi,
    
    Thank you so much for the full-width YouTube code. For showing the subtitles, I shall use a plugin to activate the captions to on/off automatically.
    
    Best regards!
    
    >
    
    LikeLike
  12. allaboutbasic says:
    
    December 21, 2020 at 10:37 pm
    
    pleasure
    
    LikeLike
marilyngeary says:

December 21, 2020 at 12:05 pm

Hello,
I just started using the Morden theme and immediately decided I wanted a different color for the header. I see you have posted how to do that above, and I can certainly make sense of the code, problem is: I don’t know where/how to add it. is it Additional CSS? WordPress requires a Business plan for making these changes? Thank you.

LikeLike

Reply
1. allaboutbasic says:
  
  December 21, 2020 at 3:40 pm
  
  Hi
  if you are using wordpress.com free hosting…then you need minimum premium plan to use the codes
  
  Regards
  Om
  
  LikeLike
  
  Reply

	allaboutbasic on How to add auto calculation fi…
	Adam Kruzics on How to add auto calculation fi…
	allaboutbasic on Radcliffe 2 By Anders Norén :M…
	TraduAgindo on Radcliffe 2 By Anders Norén :M…
	allaboutbasic on The Rowling Theme by Anders No…
	Francesca Alloatti on The Rowling Theme by Anders No…
	allaboutbasic on Lodestar theme By Automattic:…
	Diana on Lodestar theme By Automattic:…

Like this post?

Like this:

Related

Published by allaboutbasic

60 thoughts on “Theme Morden By Automattic: reduce gaps, modifications of header, contents, sidebars and more changes”

Leave a Reply Cancel reply