WordPress Theme Bari By Themetry: Styling,Modifications, CSS Customization and more.

Bari By Themetry A simple photography theme . If you are using wordpress.com premium plan you can use it ( costing $49).

Previously  I shared customization of Photographic themes  Like  Photography by theme foundry and Photographer by Organic theme which you can check also.

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

Question 1:  I don’t want the featured image to change opacity or not to be transparent while hovering or putting mouse cursor over them

.post-thumbnail-link img:hover {
opacity: 1 !important;
}

Question 2: How to add a box shadow while hovering over the featured image in homepage?

.post-thumbnail-link img:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.5) !important;
}

Question 3: I don’t want the post title to be underlined in Bari theme by themetry

.entry-title a, entry-title {
text-decoration: none !important;
}

Question 4: How to change the Load More button background, padding, font style and more

.posts-navigation a, #infinite-handle span button, #infinite-handle span button:hover, #infinite-handle span button:focus {
background: red !important;
color: #fff;
font-weight: bold;
padding-top: 16px;
padding-bottom: 16px;
text-transform: uppercase;
}

Also, to change the Load More button  bottom arrow symbol color

#infinite-handle span button:after {
color: red !important;

}

Question 5: How to change top social icons  color and size in Bari theme by themetry?

.social-links a:before {
font-size: 1.125rem;
color: red !important;
}

Question 6:  How to make the menu items not to be underlined?

ul#primary-menu a {
text-decoration: none !important;
}

Questin 7 :  How to change the slide out menu background in bari theme?

.menu-toggled .slide-out {
background: red !important;
}

Question 8 : If you want to move the slide out menu section to move left

.menu-toggled .slide-out {
left: 0 !important;
}

Question 9 : How to make the page width more wider?

.page main#main {
max-width: 1200px;
}

Question 10: How to reduce gap between page title and page content in theme bari by themetry

.page .entry-content {
padding-top: 10px !important;
}

 Question 11 :  How to move the page title to some up  or  to reduce the gap between top Site logo/title and  page title

.site-branding {
padding-bottom: 40px;
}

Question 12: If you don’t want to show the underline below the site title while hover?

.site-title a:hover {
text-decoration: none !important;
}

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