Theme Toujours By Automattic : CSS Customization

Toujours has a simple, elegant design that’s perfect for planning and sharing moments from your wedding. The theme highlights your content with a slideshow, large featured images, and a unique layout for recent posts.

Download Toujours  theme by Automattic  to create your own wedding / blogging website.

Download Toujours  theme by Automattic Child Theme  to modify the theme without touch the parent theme.

Here i am sharing some customization of Toujours theme. So You can use my shared code and ask question in the comments section.

** How to add header image just above the Site Title

Answer: Please check the screenshot

*** how to show three image side by side just above the blog posts in homepage

*** If you don’t want to show  Post date and comments  below the post title?

.entry-header .entry-meta {
display: none;
}

***  To change  Post title  Uppercase  to normal, font family , color change and font size change

h2.entry-title, h2.entry-title a {
font-size: 26px;
font-weight: 500;
text-transform: none !important;
letter-spacing: 0.05em;
font-family: cursive;
}

*** To change post content section font family, color and font size

.entry-content {
font-family: cursive;
font-size: 21px;
color: black !important;
}

*** If you want to implement whole body / site    font color, font size and font family

body, button, input, select, textarea {
color: #404040;
font-family: “Merriweather”, Georgia, “Times New Roman”, serif;
font-size: 17px;
font-weight: 400;
line-height: 1.8;
}

*** How to change font size , color and font family of  Contiune Reading

a.more-link {
color: darkred !important;
font-size: 16px;
font-family: cursive;
text-decoration: none;
}

To give Continue Reading ->  different look (box shaped)

a.more-link {
color: white;
font-size: 16px;
font-family: cursive;
text-decoration: none;
padding: 2%;
background: darkred;
}

** How to change Site Title font color, font size and font family

.site-title a {
color: darkred;
font-size: 36px !important;
font-family: cursive;
}

*** To Reduce gap just above the site title

#page {
padding-top: 0px !important;
}

and

To give the top header a different look

header#masthead .wrap {
margin-left: 0px !important;
margin-right: 0px !important;
background: darkred !important;
}
.main-navigation {
background: white !important;
margin-top: 0px !important;
}
.site-title a {
color: white !important;
}
.site-branding {
padding: 3% !important;
}

*** If you want to change footer background to be different background

#footer-widgets, #colophon {
background-color: darkred;

}

*** To change footer social icons color

.jetpack-social-navigation-genericons a:before {

color: white !important;
}

*** How to change footer social links address

****** Menu Section Change ******

*** How to change menu background color, top and bottom border color  showing in menu

.main-navigation {
border-bottom: 4px double darkred;
border-top: 4px double darkred;
background: green;
}

*** To change the menu font color (parent menu),font family and size

ul#primary-menu > li > a {
color: white;
font-family: cursive;
font-size: 21px;
}

*** To make the Selected menu different color or different background color

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

*** To give widget title a different look with your own font, background color, font size and more

.widget h3 {
font-size: 22px;
color: darkred !important;
font-weight: bold;
text-align: center;
background: yellow;
padding-top: 11px;
margin-bottom: 11px;
font-family: cursive;
}

*** To change links in widget section’s font color, font size and font family

.widget li a {
color: darkred !important;
font-size: 16px;
font-family: cursive;
}

If you have any issue feel free to ask me question here in comments section