If you are a photo blogger then Photos theme is for you. Photos is a single column blogging theme which showcase your photos in a grid format. Photos is basically an image-oriented theme with a simple and clean layout, designed to help you showcase your loved or favourite snapshots. Here I am sharing you css styling code to modify the theme so that you can give a look of your choice. You can check the demo of Photos theme by Automattic.
Also,
Download this Photos theme by Automattic.
Download Photos Child theme
You can ask question regarding any issue you are facing.
Or can take my personal help.
If you want to change font size, color and font family of Site title of Photos theme by Automattic
.site-title, .site-title a {
font-size: 30px !important;
color: darkred !important;
font-family: cursive !IMPORTANT;
}
If you want to change hover font color of site title in Photos theme by Automattic
.site-title a:hover {
color: green !important;
}
If you want to change the background color of header area
header#masthead {
background: red !important;
}
If you want to change font size, color and font family of tag line or site description
p.site-description {
color: darkred !important;
font-size: 23px !important;
font-family: cursive !important;
}
If you want to change the border color showing below the header part in theme Photos
.site-header {
border-bottom: 3px solid darkred !important;
}
If you want to change menu items font color, font size and font family
ul#primary-menu a {
color: darkred !important;
font-size: 17px !important;
font-family: cursive !important;
}
To change visited Menu items font color from black to green
ul#primary-menu a:visited {
color: green !important;
}
To change menu items hover color
.main-navigation a:hover {
color: blue !important;
}
To change drop down menu items hover background color and link color together in photos theme by Automattic
.main-navigation a:hover {
color: white !important;
background: red !important;
}
If you want to show the Site Title and Site Description (tag line) centred (one below another) and also to show the navigation menu centred below the title
.site-branding {
width: 100% !important;
margin-left: auto !important;
margin-right: auto;
clear: both;
display: block;
float: none !important;
text-align: center;
}
.site-description {
display: block;
}
.main-navigation {
margin-left: auto !important;
margin-right: auto !important;
}
To change blackish hover background overlay to another color of Homepage Images
.site-main article .container a:hover {
background: green !important;
}
If you want to show 4 columns in grid instead of 3 in Homepage, blog page, category archive page, search page in Photos theme by Automattic
.blog .site-main, .archive .site-main, .search-results .site-main {
grid-template-columns: 1fr 1fr 1fr 1fr !important;
}
If you want to change Older Post button background color, font color, font size ( it will make the button bigger also)
#infinite-handle span button, #infinite-handle span button:focus, #infinite-handle span button:hover {
background: darkred !important;
border-radius: 4px;
color: white !important;
font-size: 20px !important;
}
To change Older Post button hover background color and font color
div#infinite-handle button:hover {
background: red !important;
color:white !important;
}
To change footer social icons color from blackish to another one
ul#menu-social-links a {
color: darkblue !important;
}
To change only Facebook links of footer social icons
ul#menu-social-links a[href=”Your Facebook URL”] {
color: darkblue !important;
}
ul#menu-social-links a[href=”Your Facebook URL”]:hover {
color: red !important;
}
*** please not that you need to change the facebook url with your one
To change only Twitter links of footer social icons
ul#menu-social-links a[href=”Your Twitter URL”] {
color: skyblue !important;
}
To change hover color of footer twitter social icon
ul#menu-social-links a[href=”Your Twitter URL”]:hover {
color: skyblue !important;
}
*** please not that you need to change the Twitter url with your one
To change only Pinterest icons color of footer social menu
ul#menu-social-links a[href=”Your Pinterest URL”] {
color: darkred !important;
}
To change Pinterest icons hover color change
ul#menu-social-links a[href=”Your Pinterest URL”]:hover {
color: red !important;
}
*** please not that you need to change the Pinterest url with your one
To change footer light grey background color to different one
.site-footer {
background-color: darkred !important;
}
In single page if you want to reduce gap from top and bottom of page title in theme Photos by Automattic
.entry-title, .page-title {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
If you want to change font size, color and font family of page title in theme Photos by Automattic
.entry-title, .page-title {
font-size: 42px;
color: darkred !important;
font-family: cursive !important;
}
If you want to change footer copyright info or Proudly Powered By WordPress in Photos theme by Automattic
Go to your dashboard. Then Appearance > Editor > footer.php . Please check the screenshot for better understanding and use the code i shared below the screenshot to change copyright info
© Copyright 2018 or 2019
<span class="sep"> | </span>
Message about your company
If you have any issue feel free to ask me question here in comments section
OR
Pay me some, I will help you for CSS Issue Personally CLICK HERE….
