WordPress Tricks

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.

theme sobe wordpress modifications using css

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

Theme sobe site title description post title in homepage 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;
}
Theme Sobe menu items modifications

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;
	 }
Theme sobe mobile menu items modifications

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;
}
previous and next post and comments section modifications wordpress theme

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;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s