Custom CSS needed for Gateway theme header image in WordPress

brittmedical · Member · Jul 20, 2016 at 7:47 pm
Copy link

Add topic to favorites
I’m trying to expand the header in my wordpress gateway theme to display the logo better. They said I need to customize CSS but I have no clue how to do that, not an IT expert. Can anyone please help me?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 20, 2016 at 8:08 pm
Copy link
Hi there, on Gateway, the WordPress and theme software create the logo image off of your original uploaded image at 300px wide x whatever height is required based on the proportions of your image. We can make the logo image larger, but in doing so, it will lose some quality. There are some options for us though depending on how much larger you would like the image to be. If you can let me know, I can then see what magic I can pull out of my hat. :)
brittmedical · Member · Jul 20, 2016 at 8:15 pm
Copy link
Thanks for response! Is there a way to move the header image down further on the page and move the logo closer to top of page?
augeretis · Member · Jul 20, 2016 at 8:35 pm
Copy link
Hey @brittmedical,

Yup, you can do it in CSS. If you can explain in detail what you want/need I can send you the code so that you can insert it. :)
brittmedical · Member · Jul 20, 2016 at 8:40 pm
Copy link
Great, thanks! I’d like to see header image lower on page so more white shows in photo and the logo is placed in the top middle.
hallluke · Member · Jul 20, 2016 at 8:50 pm
Copy link
If you want to make the logo larger on wider screens then you can use the code below, although I’d recommend re-uploading the logo file at the desired size rather than loading a massive file and using CSS to resize it as it will take longer to load the page.
```
@media only screen and (min-width: 50em) {
  a.site-logo-link {
    height: 300px;
    max-width: 480px;
    display: block;
    background-image: url("https://brittmedical.files.wordpress.com/2016/07/400dpilogo-png_5334x3222.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
  }
  a.site-logo-link img {
    display: none;
  }
  .site-branding {
    padding-top: 1em;
    padding-bottom: 0em;
  }
}
```
I notice you have a blank site title and description, these are worth including – you can always hide them with CSS if you don’t want them to appear.
brittmedical · Member · Jul 20, 2016 at 8:56 pm
Copy link
Oh great, thanks for help! I’d love to add site title and description but hide them. Can you tell me how to do that with CSS?
hallluke · Member · Jul 20, 2016 at 9:31 pm
Copy link
Here’s the CSS code you need:
```
.site-title, .site-description {
  display: none;
}
```
brittmedical · Member · Jul 20, 2016 at 9:32 pm
Copy link
Thanks a lot

No items found.