Change Header Logo Size Maisha Theme

• 

  ecologytrainingmanager · Member · Sep 4, 2015 at 12:21 pm

  • Copy link
  • Add topic to favorites

  Hi I would like to slightly increase the size of the logo in the header of my website. Can this be achieved with CSS?

  I am using the maisha theme.

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  darrellschulte · Member · Sep 4, 2015 at 8:54 pm

  • Copy link

  Hello!

  I don’t believe you can, but you could ask over in the Maisha support forum just in case.

• 

  thesacredpath · Member · Sep 4, 2015 at 9:01 pm

  • Copy link

  Hi, due to the way the CSS and HTML is structured in Maisha, this really isn’t possible. The theme actually creates that image at 2600px wide by 73px tall, so we can’t really enlarge it, and I don’t see a div we could insert an image into at the top of the site.

  Given that the “Training Future Ecologists” section has such a large image, I don’t know if the header image should be taller. The reason I’m thinking this is that on smaller screens/windows, the visitor would have to scroll down a good ways before even getting to your content, and the content is always the most important. Just my thoughts.

  I do have one sort of far-fetched idea. Do you have an image uploaded to your media library that you want to use? If so, can you post a link to that image and I’ll see if I can make my idea work.

• 

  ecologytrainingmanager · Member · Sep 5, 2015 at 7:57 am

  • Copy link

  Hi thank you guys for your help – I didn’t explain it very well though sorry … I’m happy with the thin image at the top I don’t want to change that – I meant the small logo saying ‘Acorn Ecology’ with the Oak leaves on it. I don’t want to increase it much just by about 10-20%. Can we do that?

• 

  ecologytrainingmanager · Member · Sep 5, 2015 at 7:58 am

  • Copy link

  Hi thank you guys for your help – I didn’t explain it very well though sorry … I’m happy with the thin image at the top I don’t want to change that – I meant the small logo saying ‘Acorn Ecology’ with the Oak leaves on it. I don’t want to increase it much just by about 10-20%. Can we do that?

• 

  michaelvandenberg · Member · Sep 5, 2015 at 10:15 am

  • Copy link

  Hi there,

  You can try this:

  .site-logo,
  .headerblock.alternative .site-logo {
  	display: none;
  }
  
  a.site-logo-link {
  	background: url(https://acornecologytrainingexeter.files.wordpress.com/2015/08/acorn-logo-green-e1441187742139.png?w=100);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 100px;
      height: 75px;
      display: block;
      margin: 0 auto 10px auto;
  }

  This wil hide the original image and instead display a larger version of the same image as the background of the link containing the now hidden original image. (Sounds more complicated than it actually is.)

  The only downside to this solution is that if you want to change the size of the image you will have to change it on three locations.

  A larger version for example:

  .site-logo,
  .headerblock.alternative .site-logo {
  	display: none;
  }
  
  a.site-logo-link {
  	background: url(https://acornecologytrainingexeter.files.wordpress.com/2015/08/acorn-logo-green-e1441187742139.png?w=125);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 125px;
      height: 94px;
      display: block;
      margin: 0 auto 10px auto;
  }

  Or smaller (displaying only the selectors that needs to be adjusted):

  a.site-logo-link {
  	background: url(https://acornecologytrainingexeter.files.wordpress.com/2015/08/acorn-logo-green-e1441187742139.png?w=90);
      width: 90px;
      height: 68px;
  }

  Let me know if this works!

  Best regards,

  Michael

• 

  ecologytrainingmanager · Member · Sep 7, 2015 at 12:42 pm

  • Copy link

  Wow thank you so much for your hard work!