If using Hestia Pro below are some customisations that you can do to the CSS to further develop the theme to your liking. All customisations should be done in the Customise > Additional CSS section to ensure that changes are retained during theme upgrades.
Change colour of the Footer
The code below changes the colour of the footer to a solid blue colour, to change to another colour, replace #2378c6 with any hex value you wish.
.footer-black {
background: #2378c6;
/* FF3.6+ */
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#2378c6),color-stop(100%,#2378c6));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center,ellipse cover,#2378c6 0%,#232323 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 12+ */
/* IE10+ */
background: -webkit-radial-gradient(center ellipse,#2378c6 0%,#232323 100%);
background: radial-gradient(ellipse at center,#2378c6 0%,#2378c6 100%);
/* W3C */
background-size: 550% 450%;
}
Remove transparency overlay on slider image
The code below takes away the transparent overlay on the main front-page slider
.header-filter::before {
background-color: rgba(0, 0, 0, 0) !important;
}
Remove blog author credit and sub-heading
The code belkow removes the sub-heading on blog pages (i.e. written by NAME, published on DATE)
h4.author{ display: none; }
Remove transparency from front page sections
Most sections allow a background image on the front page for Hestia Pro. When displaying the background image the structure of the CSS adds a transparency overlay on every image. If you prefer to have fuller control over each section use the code below to remove the transparent overlay.
.section-image:after {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
content: "";
}
Hi,
Thanks for compiling these. Any idea how to remove the featured image from displaying in the POSTS (not Pages)? Have been trying a lot but no success.
Thanks.
Vishal
Can you please tell us the code for adding a custom footer text to hestia theme.
Hi,
compliments for this post, I have a question, I would like to change the size the slider image in homepage, where I have to change the CSS?
Thanks a lot
Andrea
Hi! Did you find out how to change the slider size?
Best Regards,
Rudy
Hi Did you get this sorted out?
In additional css just add following code :
.boxed-layout-header {
display:none;
}
It is not what exactly you wanted, but that’s also useful.
You do not need to have Hestia Pro to use this CSS. Just installing Advanced CSS Editor Plugin and add these CSS codes to make everything great.
At last, I’ve been looking for this info for days. Thanks for putting these together, very very helpful!