Hestia Pro – CSS snippets

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: "";
}