We have tried to make a template for the slider, but...
Permalink Browser Info Environment
Hi again,
We have tried to make a new template for the slider, where we frame the owerlay as a box around the text (as seen here:http://demo13.concrete5danmark.dk/... ). I tried to make the same thing on the full screen video slide with no luck yet. It seem a little tricky to figure out how to do just that.
Do you have any suggestions as I would like to use it that way here:https://www.concrete5.dk/ .
We have tried to make a new template for the slider, where we frame the owerlay as a box around the text (as seen here:http://demo13.concrete5danmark.dk/... ). I tried to make the same thing on the full screen video slide with no luck yet. It seem a little tricky to figure out how to do just that.
Do you have any suggestions as I would like to use it that way here:https://www.concrete5.dk/ .
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Wow. Thanks... I will try it out later to day...
Just to add to this,
I'm making another template, but I do not seem to find where you inject the inline css style to the caption div. You are injecting some styles "transform: translateY(0px); opacity: xx.xx; top: xxx.xpx". I need to remove "top" and add bottom: 0;.
I need to make a full width caption overlay, fixed at the bottom, where the height is controlled by the text content. Is this something you could guide me to.
/Michael
I'm making another template, but I do not seem to find where you inject the inline css style to the caption div. You are injecting some styles "transform: translateY(0px); opacity: xx.xx; top: xxx.xpx". I need to remove "top" and add bottom: 0;.
I need to make a full width caption overlay, fixed at the bottom, where the height is controlled by the text content. Is this something you could guide me to.
/Michael
Hi,
Plz follow these steps:
Hi,
1- Create a new template for slider at: \packages\theme_pixel\blocks\whale_image_slider\templates\pixel2.php
2- At newly created file change data-template="pixel" to data-template="pixel2" (giving the new template a new identity which enable you target that directly without affecting default template)
3- at \packages\theme_pixel\themes\pixel\css\less\custom.dev.less add this line of code:
I hope it makes sense. Tell me if you need more help.
Plz follow these steps:
Hi,
1- Create a new template for slider at: \packages\theme_pixel\blocks\whale_image_slider\templates\pixel2.php
2- At newly created file change data-template="pixel" to data-template="pixel2" (giving the new template a new identity which enable you target that directly without affecting default template)
3- at \packages\theme_pixel\themes\pixel\css\less\custom.dev.less add this line of code:
div.slider[data-template="pixel2"] { div.slider-caption{ background-color: red!important; opacity:0.8!important; padding: 20px 30px; } }
I hope it makes sense. Tell me if you need more help.
Thanks,
I just fixed it another way.
1. make a template
2. make my changes in the template
3. add a new class at the end of the slider-caption (I call it slider-caption-full)
4. make my overwrites in custom.dev.less
That worked too.
I just fixed it another way.
1. make a template
2. make my changes in the template
3. add a new class at the end of the slider-caption (I call it slider-caption-full)
4. make my overwrites in custom.dev.less
That worked too.
I add the related CSS rules and it seems working fine.
Check attached screenshot.