Background image header padding

Posted in: Newsmag
Post count: 69
gmaio
#84166
Dec 14, 2015 at 5:19 pm

Hi there,
I had to modify the style.css file of my Newsmag-child theme in order to get padding at the top of my site page to fit the background skin image because, otherwise, the left and right top header menus (please see http://352.be7.myftpupload.com/) would be overlayed by the skin background image.
So that I’ve applied the following modifications to style.css:


.td-header-container {
  width: 1021px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  /* responsive portrait tablet */
  /* responsive portrait phone */
  margin-top: 95px; /* Row added for padding needed for background skin image */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .td-header-container {
    width: 756px;
	margin-top: 55px; /* Row added for padding needed for background skin image */
  }
}
@media (max-width: 767px) {
  .td-header-container {
    width: 100%;
	margin-top: 0px; /* Row added for padding needed for background skin image */
  }
}

Is there a way to apply this upper padding only when a background skin image has been set and to remove padding when no background skin image has been set without changing the style.css file everytime by hand? Otherwise a ugly blank padding is displayed when no background image is set (please see 43b.60a.myftpupload.com/)
Thanks a lot for any help or advice,
Giuseppe

  • This topic was modified 10 years by gmaio.
  • This topic was modified 10 years by gmaio.
Post count: 6535
Andrei L.
#84298
Dec 15, 2015 at 10:34 am

Hi

When you set a background image the theme switch in boxed layout and the backstretchclass it’s added in page source. In order to add this padding only when the background image is set you will need a js script which check if backstretch class exist. This script should load your custom css only if the result is true. This is a complex task and unfortunately I can’t provide a solution now. If you need this and you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you as we can’t offer customization services at the moment.

Thanks!

Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.