Some small CSS help needed

Support
#1

I need to do the following to the site http://www.jazzforallages.com. It is in maintenance mode and I will be hunting solutions on the forums today. I can provide login credentials upon request.

  • Make background not move when site is resized so inner background container always matches width of site. Alternatively replacing the inner site background with the inner image and setting the full background as the black image.

  • Fix Slider Revolution width or Header width to line up to inner width edges.

  • Add background image to Footer

These are my current three tasks. I have some old CSS in the customizer if that is causing any issues let me know.

#2

Hey @fnbit,

Please turn off the under construction mode so we could see the setup of your site and so we could tell if what you’re asking is possible through options available in the theme and/or using simple CSS.

Thanks.

#3

Done. Thanks!

#4

Here is the intended image placement.

#5

Hey @fnbit,

The design in your screenshot is a boxed layout and you’re currently using the Fullwidth layout. It would be tricky to align your image background that way. Please first set your layout to Boxed in Theme Options > Layout and Design.

Regarding your header, your current setup using the banner as a background is also tricky to align in all screen widths. Since you’re already using the Stacked Header layout, use your banner as the logo and remove the CSS that applies the image as a background for the Navbar. This way, you will just need minor adjustments. Specifically, you just need to add this code in Theme Options > CSS to make a banner logo using the Stacked Header layout. The Logo Width must be left empty and for best results, the banner width must be the same as the Site Max Width

.x-logobar .x-container.max {
    width: 100%;
}
.x-logobar .x-logobar-inner {
    padding: 0;
}

Please follow that first and give us WordPress Admin login URL, username and password in a Secure Note so we could actually test the options for your specific design.

Thanks.

#6

The site is already set to boxed in the options, see attached screenshot.

I deleted the CSS as mentioned but now the header is black.

Sending Secure login now.

#7

Hello @fnbit,

Thanks for writing in!

I have checked your site and what you have in mind is not possible at the moment. You will have to do this first:

  • You must separate the vertical lines from your background image so that we can make it fixed like the one in your header. In this image, http://www.jazzforallages.com/wp-content/uploads/Whole-bg-1.jpg, the two vertical lines needs to be separated from the background so that we can apply this two images for the background of the whole page and the background of the content area.

  • The header can only be aligned to the slider if you set your navbar top height in X > Theme Options > Header > Navbar Top Height.

  • Please provide the background image for the footer also. Or yet you can make use of a custom css for the footer;

footer.x-colophon.top {
    background-color: transparent;
    background: url(footer -image-here) no-repeat center center;
    padding-bottom: 20px;
}

Please let us know how it goes.

#8

I have separate images for the inner background, outer and vertical bars. Please explain how to add those to the site.

I have adjusted the navbar header numerous times. The black bar at the top seems to still exist.

I have added the footer image. Once the above two are fixed I should be in a great spot. Thanks!!!

#9

Hello @fnbit,

This image file; http://www.jazzforallages.com/wp-content/uploads/Whole-bg-1.jpg, should be separated into two files. The vertical lines and the background must be separate. This is necessary so that the lines will align properly. Unlike what you have now, it does not go nicely because as soon as your page has no content or limited content height, the lines will still display down to the bottom like this page: http://www.jazzforallages.com/events/

If you have the original PSD file of your design, that might be helpful in separating the images for your background images.

Best Regards.

#10

I have the individual lines as a left and right file (see attached) as well as the inner and outer background as separate files. What is the preferred method moving forward with them?

#11

Hello @fnbit,

To avoid back and forth, please understand the structure first. Here is current structure

To add that those image as border background on each of those structure, please use this CSS:

.x-navbar-wrap .x-container.max.width,
.x-container.max.width.offset,
.x-colophon .x-container.max.width{

background-image: url(/x/wp-content/uploads/2019/06/right.jpg), url(/x/wp-content/uploads/2019/06/left.jpg);
  background-position: right top, left top;
  background-repeat: repeat-y,repeat-y;
}
.x-colophon.bottom,
.x-colophon.top{
  padding:0; /*Reset fotoer spacing to avoid  space between border*/
}
.x-container.offset {
    margin: 0 auto; /* To reset main content current top and bottom spacing to avoid space between border*/
}

Here’s the guide to help you better see which selector you might need:

Note that as much as we want to help you set it up, support have limitations. Please understand that what you are trying to achieve here needs in depth understanding of CSS and how it elements work. With settings up layout via Theme Options, and then you also have custom CSS that overwrites it’s it will cause confusion.

Hope this helps.

#12

This is fantastic information. I always have a hard time figuring out the selectors, that’s a great resource list. Support is always incredible. Cheers!

#13

You’re more than welcome, glad we could help.

Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.