Sobe: WordPress lighthearted personal blogging theme by Automattic, Modifications or customizations with css.

Theme Sobe is a lighthearted personal blogging theme by Automattic for sharing life’s most memorable moments. You can see the Demo of theme Sobe. If you want to use it in your personal blogging site, you can download Theme Sobe from WordPress.com theme repository, or from here.

Here, I will share with you some css customizations which you can use to modify the header font size, color, contents etc. If you have any questions feel free to ask in the comments section.

Homepage Post block modifications

1. If you want to change homepage post block title font size, color and font family to be changed of theme Sobe

.entry-title a {
    color: red;
    margin-bottom: 1.5em;
    text-decoration: none;
    font-family: cursive !important;
    font-size: 26px !important;
}

2. If you want to change font size, color and font family of post published date in theme Sobe

time.entry-date.published {
    font-size: 12px;
    color: black !IMPORTANT;
    font-weight: bold;
    font-family: cursive;
}

3. If you want to change Post Format Indicator background color in Theme Sobe

.post-format-indicator {
    background: red !IMPORTANT;
}

4. If you don’t want to show post format indicator

.post-format-indicator {
    display: none;
}

5. If you want to change font size, color and font family of site title of theme sobe

.site-title a {
    color: #e57667;
    font-size: 7rem;
    font-family: cursive;
}

6. If you want to change font size, color and font family of site description in theme sobe

 .site-description {
    color: red;
    font-size: 23px;
    font-family: cursive;
}

7. If you want to change font size, color and font family of desktop menu items, instead of hampering the mobile menu items color

@media (min-width: 1100px)   { 
.main-navigation a {
    color: black;
    font-family: cursive;
    font-size: 18px;
}}

8. If you want to change hover, focused and active font color of desktop menu items of theme Sobe

@media (min-width: 1100px)   { 
.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active {
    color: red !important;
 
}}

9. To change dropdown or sub menu background color ( applicable for both desktop and mobile menu)

ul.sub-menu {
    background: red !IMPORTANT;
}
.main-navigation ul ul:before {
     border-bottom: 10px solid red !important;
	 }

10. Theme Sobe Mobile menu grey border and humberger icon color change

button.menu-toggle {
    border-color: red !IMPORTANT;
}
.menu-toggle:before {
    color: red !important;
}

11. If you want to change the grey background color of Tag links in theme sobe

.tags-links a, .tags-links a:visited {
    background-color: red !important;
	}

12. If you want to change the hover background color of the tag links

.tags-links a:hover, .tags-links a:focus, .tags-links a:active {
    background-color: green !IMPORTANT;
    color: #fff;
}

13. If you want to change font size, color and font family of previous and next post of theme sobe

.nav-previous a, .nav-next a {
    font-size: 15px;
    color: red;
    font-family: cursive;
}

To change the hover color of the previous and next post

.nav-previous a:hover, .nav-next a:hover {
    color: green !IMPORTANT;
}

Comments section modification

14. To change the font size, color and font family of comments title

h2.comments-title {
    color: darkred;
    text-align: center;
    font-size: 23px;
    font-family: cursive;
}

15. If you want to change Comments Author font color, font size and font family in theme sobe

.comment-author a {
    color: black !IMPORTANT;
    font-size: 15px;
    font-family: cursive;
}

16. If you want to change Comments Posted dated font size color and font family

.comment-metadata * {
    color: black;
    font-size: 14px;
    font-family: cursive;
}

17. lf you want to change font size color and font family of comments content

.comment-content, .comment-content * {
    font-size: 16px;
    color: black;
    font-family: cursive;
}