• Hi there, I would to do some tweaking on this theme but I’m having a hard time changing the height of the header

    This is the original code:

    .site-header .site-branding {
    	padding: 50px 0;
    }
    
    /* Site Branding */
    .site-header {
    	background:  #bed4df;
    	background-position: center;
    	background-repeat: no-repeat;
    	height: 100%;
    	min-height: 180px;
    	position: relative;
    	text-align: center;
    	width: 100%;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;

    and I tried to change it by changing the padding and the minimum height but without luck

    .site-header .site-branding {
    	padding: 10px 0;
    }
    
    /* Site Branding */
    .site-header {
    	background:  #bed4df;
    	background-position: center;
    	background-repeat: no-repeat;
    	height: 100%;
    	min-height: 90px;
    	position: relative;
    	text-align: center;
    	width: 100%;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;

    Ideally I would also like to align the sit description to the left and replace the site title with an image (that scales).

    In the past I managed but back then CSS was much more simple. Any pointers are welcome!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter Proenski

    (@proenski)

    Small correction; setting the padding to 10px does move the site name and description higher up but the total size of the header remains the same.

    Thread Starter Proenski

    (@proenski)

    Update; I found the height, apparantly there is another entry that controls this (although I don’t know why this is).

    .site-header {
    		min-height: 220px;
    	}

    I changed it to max-height: 140px but to no avail. It is like changes I make to the CSS are not picked up…

    Completely puzzeled now ??

    I’m afraid I’ve got no suggestions, but I did have a similar problem with the background colour, which I tried changing in the two places similar to those you changed for the height entries, but it didn’t make a difference…

    Hoping someone can help?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The thread requires knowledge of the theme because the original poster didn’t post a link to their site. The theme is actually a commercial one, which means it’s unlikely to receive an answer. Remember to link the Webpage in question!

    Thread Starter Proenski

    (@proenski)

    Since I never paid anything I doubt that Plane is a commercial theme.

    Just wondering; what good does a link to the site do? I already posted the code which is no different..

    Thread Starter Proenski

    (@proenski)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So you’re using WordPress.com? I don’t understand since there isn’t a theme distributed on www.ads-software.com named “plane”: https://www.ads-software.com/themes/plane/

    Thread Starter Proenski

    (@proenski)

    I’m using WordPress but on my own hosting account.

    But CSS is CSS isn’t it? Or am I now completely lost again??

    I might have some answers (though I’m quite a newbie):

    1. To Andrew: there’s an option in the “free theme” link Proenski posted to download the www.ads-software.com version of the theme

    2. To Proenski: having examined the source code, etc, I think it’s because when dealing with the header, the

    <?php plane_the_site_logo(); ?>

    seems to override the css settings… I deleted that line from the header.php html, and it started using my .css settings…

    Thread Starter Proenski

    (@proenski)

    Thanks, it’s a bit late here now but I will look into it!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    CSS is CSS, but if you were using a commercial theme or a WordPress.com theme then the question might not be “why doesn’t this CSS work”, but “Why doesn’t my theme implement CSS correctly”.

    As @giorgissimo has explained it is indeed a self-hosted theme, but it just isn’t distributed on www.ads-software.com yet, I’ll try out some CSS for you.

    If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:

    1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
    2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
    3. (put this code in)

      .site-header {
          min-height: 150px;
      }
      
      .site-header .site-branding {
          padding: 25px 0;
      }
    4. Save

    Alternatively use your Child Theme style.css file to hold your CSS modifications

    Reduce the ‘150’ and ’25’ further if you want.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Theme Plane] Problems changing the header height’ is closed to new replies.