WordPress.com Theme Revelar By Automattic Modification, change font, color, sidebar, menus, title etc using css.

Before i shared 2016(twenty sixteen) theme modification. Today I want to share you some more modifications of the latest Theme Revelar By Automattic.Revelar is a single-column blogging theme, designed to showcase your gorgeous photography and highlight your writing, while providing an immersive experience for your visitors. If you are trying to do changes the color, styles, titles or more just copy the code i have shared here and paste it in your custom css option.
If you need any help feel free to do comments to ask questions.

Theme Revelar by automattic

1. If you want to change Site Title background color in theme Revelar use this code
.site-branding {
background: darkred !important;
}

2. If You want to change Site title’s font color, font size and font family

.site-title a {
color: White !important;
text-decoration: none;
font-size: 28px !important;
font-family: times new roman !important;
}

3. If you want to change the selected menu background color, font size and font family in theme Revelar by Automattic

.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a {
background: darkred !important;
color: white;
font-size: 14px !important;
}
4. To change the Hover background color of menus in theme Revelar by Automattic use this code

.main-navigation a:hover, .main-navigation a:focus {
background: darkred !important;
color: #fff;
}

5. If you want to change the Menus font color, font size and font family of Theme Revelar

.main-navigation ul a {
color: black !important;
font-family: times new roman !important;
font-size: 13px !important;
}

6. If you want to change the Post title showing in Home page in Revelar theme use this code.

.entry-title a {
border-bottom: none;
color: darkred !important;
font-family: times new roman !important;
font-size: 19px !important;
text-align: center !important;
float: none !important;
position: relative;
}

7. If you want to change the Home page Posts date font color, font family, font size use the following code

.entry-meta, .entry-meta * {
text-align: center !important;
color: darkred !important;
font-size: 13px !important;
font-family: times new roman !important;
}
8. If you want to change the “Older Post” button border color, font family, font size, color etc

#infinite-handle span {
background: transparent;
border: 2px solid darkred;
color: black;
font-size: 13px !important;
font-family: times new roman !important;

}
Theme Revelar by Automattic button change

9. If you want to change the “Older Post” button hover background color of theme Revelar by Automattic.

#infinite-handle span:hover {
background: darkred !important;
border: 2px solid darkred !important;
}

Theme Revelar by Automattic

10. If you want to change Individual post Title’s hover color of theme Revelar by Automattic.

.entry-title a:hover {
color: darkred !important;
}

11. If you want to change Individual post Title’s font color,font size and font family of theme Revelar by Automattic.

.entry-title a {
border-bottom: none;
color: black !important;
font-size: 29px !important;
float: left;
text-decoration: none;
font-family: times new roman !important;
}

12. If you want to change Individual post’s date, tag and category links color, font family and font size
.posted-on a, .cat-links a, .tags-links a, .posted-on, .cat-links, .tags-links {
color: black !important;
font-size: 29px !important;
font-family: times new roman !important;

}

Theme Revelar by Automattic modifications

13. If you want to remove Individual post’s date, tag and category links in Theme Revelar
.posted-on a, .cat-links a, .tags-links a, .posted-on, .cat-links, .tags-links {
color: black !important;
font-size: 29px !important;
font-family: times new roman !important;
}

14. If you want to change Individual posts font color, font family, line height, font size etc use the following code.

.entry-content {
margin-top: 1.75em;
color: black !important;
font-family: times new roman !important;
line-height: 23px !important;
font-size: 29px !important;
}

Theme Reveal Post content

15. If you want to change footer widget section background color use the following code.

.widget-area {
background-color: darkred !important;
}

16. If you want to change footer widget Title’s font color, font size, font family and to use border below the title use the following code .

.widget-title {
color: white !important;
font-family: “Open Sans”, Helvetica, Arial, sans-serif;
font-size: 16px !important;
border-bottom: 1px solid white;
text-align: center;
padding-bottom: 8px;
}

17. If you want to change footer widget section links and text widget’s font color, font size, font family In theme Revelar

.textwidget {
color: white !important;
}

.widget li a {
color: white !important;
font-family: times new roman !important;
font-size: -moz-calc16px !important;
}

Theme Reveal by Automattic footer widget

18. If you want to remove comments section fully from your pages and posts

.comments-wrapper {
display: none !important;
}

19. If you want to change “Leave a Reply” font family, font size, color in theme Reveal by Automattic

#respond h3 {
font-family: times new roman !important;
color: darkred !important;
font-size: 19px !important;
}

20. If you want to change “Post a Comment” button background color, font color, font size and font family

#respond p.form-submit #comment-submit {
background: darkred !important;
color: white !important;
padding: 12px !important;
font-family: times new roman !important;
font-size: 19px !important;
}

Theme Revelar comments section

If you need any help to modify Theme Revelar By Automattic feel free to do comments to ask questions. I will reply you back as early as possible.

12 Responses to WordPress.com Theme Revelar By Automattic Modification, change font, color, sidebar, menus, title etc using css.

  1. santanabold says:

    Hi! Can you please expain how to do submenues like on the first photo with menu page HTML Elements has submenu Image alignment and styles?

    Like

  2. santanabold says:

    yes thats what I meant!

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: