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.
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;
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;
}
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;
}
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;
}
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;
}
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;
}
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.
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?
LikeLike
HI
can u share me screenshot please?
sorry didn’t understand your requirement properly
Om
LikeLike
on this picture https://allaboutbasic.files.wordpress.com/2016/03/theme-revelar-by-automattic-header-change.jpg?w=630&h=142 in the menu block in the section HTML elements there is menu with Image alignment
LikeLike
If you are asking to change menu background color and the left title…then..
Try this code
.site-branding {
background: darkred !important;
}
.main-navigation a:hover, .main-navigation a:focus {
background: darkred !important;
color: #fff;
}
*** you will need to purchase the custom design option from wordpress to use css code
Om
LikeLike
no, not color, have option in one of menu buttons..
LikeLike
HI Santana
u mean..u want to show another menu item or want to show drop down menus (submenu)
please let me know
Om
LikeLiked by 1 person
yes thats what I meant!
LikeLike
HI Santana
have u checked your dashboard’s Appearance > Menus section?
from there you should add another menu item
Om
LikeLike
I coudn’t figure out how to make submenu(drop down menu)
LikeLike
Hi Santana

please check this image
let me know if u understand
Om
LikeLike
yes! thank you!
LikeLike
Pleasure… If you need help you can ask here
Om
LikeLike
Hello Om, thank you so much for providing these codes, I have been using them to adjust the look of my blog (not yet launched) ! I was wondering if you would be able to provide a code that would enable me to change the height of the containing the post titles on the main page – I don’t want to change the picture size, only the height of the title area below. I’d love to be able to change the color as well if possible. thank you in advance!
LikeLike
Hi Melanei…. is that ur site http://www.catchingthefog.com/ ? it is showing Maintenance mode …would u mind to make it viewable so that i can check?
Om
LikeLike
Hi Om, yes it is the blog, but we’re starting from scratch and don’t have any of our final content up yet, which is why it hasn’t been launched. If I took a screen grab to show you the main, page, would that help, and how would I be able to uplaod the image here?
thank you for your time!
Melanie
LikeLike
HI Melanie
actually only screen grab cant help..i need to check the site live
Om
LikeLike
HI
share me the site url u r working on
Om
LikeLike
Hi, how can I add the social media widget in the footer as shown in theme preview?
https://wordpress.com/theme/revelar
LikeLike
Hi Niki
are you using wordpress.com free hosted site?
and share me the site url please
Om
LikeLike
does the theme Revelar has other laguese if no can i hide the whole button “older post”
LikeLike
Hi Elizabeth
are you using wordpress.com free hosted site?
if yes
go to Dashboard> Settings> General…there you will see the language option
does it help?
please let me know
OM
LikeLiked by 1 person
Hey! I recently installed the Revelar theme on my wordpress.org page. Unfortunately in that version there is no “older posts” button with indefinite scroll, but rather two buttons to switch between different pages: “older posts” on the left side and “newer posts” on the right side. I very much prefer the indefinite scroll option, though. Can you help me? Do you know what I have to change in the code?
Thanks in advance!
LikeLike
Hi Katharina
you can check infinite scroll plugins for that
Om
LikeLike