Showcase your photos using WordPress theme Photos By Automattic : Creating website and modifications

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….