WordPress Tricks

Seedlet by Automattic: A writing and content based theme’s Modifications, Support and Customization

Seedlet  by Automattic is a free WordPress theme which is designed to focus on typography allowing your writing and content to shine. If you want to use this theme, i have shared some css which you can use to change the design, like font, color, size etc of the theme.

You can download Seedlet by Automattic from WordPress Repository.

Download Child theme of Seedlet

You can contact me at om2000_cuet in my skype or can ask question in comments section

  1. If you want to reduce the gap from the top and bottom of the header as per the screenshot attached
header#masthead {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
}

2. To change the font size, color, font family of site title and also to remove the border line below the site title

.site-title, .site-title * {
    font-size: 36px;
    color: darkred !important;
    font-family: cursive !important;
    border: none !IMPORTANT;
    /* text-shadow: none !important; */
    text-decoration: none !important;
    background: none !IMPORTANT;
}

3. To change the hove font color of the site title

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

4. To change font size, color and font family of site description

 .site-description {
    font-size: 23px !important;
    color: darkred !important;
    font-family: cursive !important;
}

5. If you want to change font size, color and font family of menu items

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

6. If you want the current or selected menu item to be stand out

li.current-menu-item a {
    background: red !important;
    color: white !IMPORTANT;
}

7. To change hover font color and use a background color in menu items

ul#menu-primary li a:hover {
    color: white !IMPORTANT;
    background: grey !important;
}

Single Post Modifications

7. If you want to change font size, font color and font family of single post title

.single-post h1.entry-title {
    font-size: 22px;
    color: darkred !important;
    font-family: cursive;
    font-weight: bold;
    text-align: center;
}

To reduce the gap between Top Menu and starting of Post title or content

.single header#masthead {
    padding-bottom: 0px !IMPORTANT;
}

8. If you want to put a background color behind post title

.single-post h1.entry-title {
    background: darkred;
    padding: 12px;
    color: white !IMPORTANT;
}

9. If you want to remove the gap in single post footer meta section

footer.entry-footer.default-max-width {
    margin-top: 0px !important;
}

10. If you don’t want to show the post date, post author and category name in footer

footer.entry-footer {
    display: none;
}

11. If you want to use a box shadow around Author bio

.author-bio {
    box-shadow: 4px 1px 11px 6px grey;
    padding: 12px;
}

12. To change the font size, color and font family of Author title

h2.author-title {
    font-size: 28px !important;
    color: red !important;
    font-family: cursive !important;
}

13. If you want to make the “View More Posts” to be more stand out like button

a.author-link {
    background: darkred;
    color: white;
    padding: 12px;
    margin-top: 12px !IMPORTANT;
    display: inline-block;
}

If you want to change Proudly powered by wordpress text in your theme and want to use your company info, i have shown it in the screenshot above. I have used child theme to do it without using any plugins. Download Seedlet Child theme.

14. To use background color in footer of Seedlet theme + to change the color of footer text

footer#colophon {
    background: red !important;
    max-width: 100% !important;
    width: auto !IMPORTANT;
}
.site-info {
    margin-left: auto;
    margin-right: auto;
}
.site-info * {
    color: white !IMPORTANT;
    text-decoration: none !IMPORTANT;
    border: none !important;
}

Seedlet theme in Gutenberg Editor

40 thoughts on “Seedlet by Automattic: A writing and content based theme’s Modifications, Support and Customization”

  1. Hello. Love this theme. In WordPress.com not .org with Premium account: can I remove the site title altogether please? as I cannot move it. If not can I at least remove the hyperlink?? Then I can make text white and effectively make it “disappear”?? Thanks Gaye

    Like

  2. Hello,

    I’d like to add a top bar menu for a language switcher, so that the languages are always at the top right of the page (not with the primary nav. menu under the site title). How can I do this? Thanks!

    Like

      1. I don’t have a problem getting the language buttons on the menu — that’s already done. I think it’s just a matter of the theme not having a top bar menu, only one below the site header. I’d like to create a menu at the top of the screen where only the language buttons are found.

        Like

      1. try this please

        nav#site-navigation {
        margin-top: 0px !important;
        }
        .site-branding, .site-branding p {
        margin-bottom: 0px !important;
        }
        main#main {
        /* margin-top: 0px !IMPORTANT; */
        padding-top: 0px;
        }

        Liked by 1 person

      2. Is there a way to increase the width of the main column from 602px to something like 740px?

        Like

      3. no, this isn’t what I am looking for. I want to increase the width of the content i.e. have lesser white space on the left and right sides of the blog post.

        Like

  3. Hey,
    I also want to make the width of the main column content larger both for articles and for pages. I added the suggested wp-block-group setting to the “Additional CSS” block in the Customize page. However it does not have any effect.

    Like

      1. Hi Tim
        would you mind to check if it is working properly or not

        article * {
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        }

        Like

Leave a comment