Header sliders

Hello,

I know customization lets me to select a different header type for my front page and another for the other pages, but I would like to put a different crelly slider in each page (except the front page) into header area. Is it possible?

Best regards,
Cecilia.

Dear Cecilia,

Yes, it is possible. But it is a bit advanced. Please try to do the following:

  1. Download the Sydney child theme here. To make it works with the pro version, please refer here

  2. Open the inc/slider.php file in the parent theme

  3. Then copy the sydney_slider_template function to the child theme’s functions.php file

  4. Go to this line crellySlider($alias);

  5. Then replace it with the following:


if(is_front_page()){
  crellySlider($alias);
}

if(is_page(5)){
  crellySlider('YOUR_CRELLY_SLIDER_ALIAS');
}

Replace YOUR_CRELLY_SLIDER_ALIAS with your Crelly Slider alias. The code above means, your preferred slider will be displayed on the page which has ID 5.

To find the page ID, edit your page then take a look at the browser’s address bar. So will see something like:


yoursite.com/wp-admin/post.php?post=5&action=edit

From the URL above, the page id is 5.

  1. If you want to display Crelly Slider on other page, the code mentioned in the step 5 will be like the following:

if(is_front_page()){
  crellySlider($alias);
}

if(is_page(5)){
  crellySlider('YOUR_CRELLY_SLIDER_ALIAS');
}

if(is_page(6)){
  crellySlider('YOUR_CRELLY_SLIDER_ALIAS');
}

if(is_page(7)){
  crellySlider('YOUR_CRELLY_SLIDER_ALIAS');
}

  1. Once you’re done, zip the child theme. Then install and activate it from Appearance > Themes > Add New > Upload Theme

Regards,
Kharis

Hey Kharis,

thats seems to be a good solution for my problem. I did as you wrote above but unfortunately I always get the message that the slider cannot be found.

I think the problem might be that in customize -> header area -> crelly slider I need to set an alias. Which one?

felix.pictures/frankreich

> I think the problem might be that in customize -> header area -> crelly slider I need to set an alias. Which one?

It works for front page only.

For other pages, you must manually insert in the inc/slider.php file.

> … unfortunately I always get the message that the slider cannot be found

Make sure you have supplied the Crelly Slider alias correctly.

Regards,
Kharis

Front Page is already set for the page under “attributes”.

The slider does not work for Safari at all.

I did exactly as told above (step 1 to 7). Do I need to do something more?

My slider buttons (slider controls) have a white circle and the > and < symbol is not in the middle of this circle. I want to have the circle removed. How can I do it? (same as in your sydney pro demo).

Hello there,

Could you confirm if you have not done the modification of inc/slider.php file child theme?
Could you please share your URL here so I can have a closer look?

Regards,
Kharis

I worked it out. The slider is now working.

URL: http://felix.pictures/frankreich/

It does not work with Safari at all. Slider previous and next is not displayed correctly.

Hello there,

There might be some CSS bugs with the Crelly Slider. Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.crellyslider > .cs-controls > .cs-next, 
.crellyslider > .cs-controls > .cs-previous{
  line-height: 32px;
}

.crellyslider > .cs-controls > .cs-next:before, 
.crellyslider > .cs-controls > .cs-previous:before{
  color: #000;
}

.crellyslider > .cs-controls > .cs-previous:before{
  margin-left: 7px;
}

.crellyslider > .cs-controls > .cs-next:before{
  margin-left: 14px;
}

Let me know how it fixes the issue.

Regards,
Kharis

Hey Kharis,

I tried it, but it didnt work. Any other ideas? I just need the circle to be transparent.

thank you so much :slight_smile:
rakede

Hello Rakede,

To make it transparent, try to apply the following CSS code:

.crellyslider > .cs-controls > .cs-next, 
.crellyslider > .cs-controls > .cs-previous{
  box-shadow: none;
  background-color: transparent;
}

Once you’re done, clear your browser’s cache before reloading your site.

Regards,
Kharis

Hey, I applied it but there are no changes.

Hello there,

Thank you for updating me.

Try to apply the following:

    .crellyslider > .cs-controls > .cs-next, 
    .crellyslider > .cs-controls > .cs-previous{
      box-shadow: none !important;
      background-color: transparent !important;
    }

You would need to clear your browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

You wont believe it but there are still no changes…

Do I have to reinstall something?

Okay it worked with:

    .cs-previous, .cs-next {
       background-color: transparent!important;
       box-shadow: none!important;
    }

CrellySlider does not work in Safari - Do you know what is happening there?

solved! A plugin blocked it somehow… :slight_smile:

Hi there Kharis and others.

I appreciate all of the support that all of you have provided me throughout the creation of my websites.

Having different Crelly Sliders on different pages is exactly the direct I want to go.

After reading this string, it’s a bit too advanced for my programming abilities at this time.

Is there a way that I can pay to have you set this up on two of my sites?

Thanks, Bo

You could use the Donate button on my site below, that appears near the contact form.

https://kharis.risbl.co/

Regards,
Kharis