Background full & small images in parralex section not working on new template

Shapely
1

Hello!

I’ve managed to create a new page template and copied the homepage template from this theme. I have also registered a new widget area and started adding widgets to the page.

However, the parralex sections only work for left-aligned and right-aligned images but not for full or small background (the button appears but not the image).

Does anyone know why this is?

Here is the preview page: http://anthony-fletcher.com/?page_id=2451&preview=true

Thanks!

Laura

2

Hi Laura,

If you want to have home page like layout for other page also, then you need to follow a few steps, it is already included in the theme, no need to create a seprate template for it. ( If you create, then some of the shapely widgets won’t match the styles. )

  1. Create a new page with the Builder Page template. Screenshot how: http://take.ms/N1Vky
  2. After you save the page, it will add a sidebar for it. You can go to the Customizer straight from that page and the Sidebar section will be automatically opened. Additionally, you can find the sidebar in Appearance -> Widgets with title : “Page: Page Title”.

Let us know,

Thanks,
laranz.

3

Hi Laranz!

Thanks so much for your help! The builder page is so much easier.

However, I’m still having the same issue: The parralex section will not work in background full or small mode and I require these sections.

I have selected background full in this example and although the button display, the image doesn’t.

Can you help with this?

Laura

4

Hi there

Can i take a look? please send me your access credentials along with your website URL and I will investigate this case. Don’t forget to mark your reply as private! Thanks!
Colorlib Support Team

5

Hi there,

What do you mean in terms of access credentials? The url is anthony-fletcher.com and the particular page I’m talking about right now is anthony-fletcher.com/onetrack

Thanks!

Laura

6

Hi Laura

I see the problem on the link you provided but if its possible i want to take a look from inside, in access credentials i mean admin details of your website :slight_smile:

7

Hello,

Can you tell me how I create admin details for you? Do I need your email address?

Laura

8

Really appreciate your help in advance as I really need to get this fixed today in order to start promoting the site on Monday. :slight_smile:

9

Hi,

Admin details means the login details you’re used to login to the Dashboard, the login credentials you put here, http://anthony-fletcher.com/wp-admin if you don’t wanna share that, you can create a new temporary admin account and pass the details to us, make sure you set that reply as private.

Also, please share us a screenshot of the issue, and how you want the page to display and how it is displaying now, so that we can able to give you a way to fix it.

Let us know,

Thanks,
laranz.

10

Hi Laranz,

I believe I need an email address for you in order to set up another admin? Please can you send through asap so that I can finally get this sorted! :slight_smile:

I’m just trying to get the full and small background parralex sections to work. If you see this page anthony-fletcher.com/onetrack you’ll see that the images aren’t displaying for these widgets. However, they do work for left/ right aligned and top/bottom images.

Thanks,

Laura

11

Hi Laura

you can use your email address, we need it only for temporary access, :slight_smile:

12

Hi,

Username:
Lauranna12

pw:
PgNhKGR14C&oDQVH9YQ3DX3R

Thanks,

Laura

13

hi Laura

thank you for admin details, i was able to reproduce the problem but unfortunately, i was not able to fix it so far,

  1. is this theme modified somehow? have you changed theme files?
  2. can you try to deactivate all your third party plugins, you have 19 active plugins and we must exclude them if this is not live and working website i can test this
14

Thanks for looking into it and for helping so far.

To answer your questions:

  1. The theme has not been modified but there is a child theme where modifications were made. It is not active and I’m happy to delete this if that helps.

  2. I have deactivated all. It is a live website but not receiving any real traffic yet.

Please let me know asap so I can reactivate.

Thanks,

Laura

15

Just a quick update to say that I’ve reactivated contact for 7, shapely companion and jet pack plugins for now but feel free to deactivate them again if required.

16

Hi,

You’re right from the beginning, I will report this issue to the development team and they will fix this in the next version, for now you can set the background by yourself but it won’t be parallax,

For example for this page, OneTrack | Elite Run Club in London by Anthony Fletcher for the first full background, use this Custom CSS in Appearance -> Customize -> Additional CSS,

.page-id-2451 #shapely_home_parallax-18 .parallax-window.fullscreen {
    background-image: url('http://anthony-fletcher.com/wp-content/uploads/2018/02/Photo-15-09-2017-22-24-03-1.jpg');
}

change the image URL according to your needs.

Let us know,

Thanks,
laranz.

17

Hi Laranz,

How long will it be until the next version? It’s holding up the launch of my site and so I need to know whether I need to switch themes.

I will try the code and let you know if I have any issues.

Thanks,

Laura

18

hi Laura

At this moment we cant provide any estimated time of release but you can use the code, its absolutely not necessary to switch theme only for this issue :slight_smile:

19

Hi there,

The only problem is that the image isn’t responsive. Can it be made responsive? Are you also able to tell me optimal pixel size?

I have just tried to do the same with additional css code for a new page and now that isn’t working: The Body Mechanics - Biomechanics Coach | Anthony Fletcher

I just repeated the code you gave me and changed page id and image url:

.page-id-2451 #shapely_home_parallax-18 .parallax-window.fullscreen {
background-image: url(‘http://anthony-fletcher.com/wp-content/uploads/2018/03/OneTrack-Run-Club-London6.jpg’);
}
.page-id-2529 #shapely_home_parallax-18 .parallax-window.fullscreen {
background-image: url(‘http://anthony-fletcher.com/wp-content/uploads/2018/03/Screen-Shot-2018-03-16-at-13.35.45.png’);
}

Is this not correct?

20

Hi,

Background image won’t be responsive, it’s little trickier to get it work, but for a quicker fix you can use media queries to load a different image, like,

@media only screen 
  and (max-width: 480px) {
.page-id-2451 #shapely_home_parallax-18 .parallax-window.fullscreen {
    background-image: url('http://anthony-fletcher.com/wp-content/uploads/2018/02/small-image.jpg');
}
}

This will load a small image for the screensize lower than 480px, likewise you can change it according to the screen widths for now, until it get fixed., Media Queries for Standard Devices | CSS-Tricks

Let us know,

Thanks,
laranz.