Freelance Web/Graphic designer, photographer & community campaigner
Code Snippets

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){ 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: "";

Article written by:

Tech geekery, blogging, volunteering, graphic/web design, photography, digital activism and community-based campaigns are some of the things that I am passionate about.


  1. Vishal


    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.


  2. Abhinandan Singh

    Can you please tell us the code for adding a custom footer text to hestia theme.

  3. Andrea


    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

  4. Michael

    In additional css just add following code :

    .boxed-layout-header {

    It is not what exactly you wanted, but that’s also useful.

  5. Nguyen Huu Phong

    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.

  6. Sally

    At last, I’ve been looking for this info for days. Thanks for putting these together, very very helpful!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.