SOLVED Trouble adding a class to Owl Carousel Item
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
- Maybe..read my secure message
- Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
I am still seeing this:
Warning
Login denied! Your account has either been blocked or you have not activated it yet. - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
My bad. The account was disabled. It is enabled now. Try again! - Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- I see you have this sorted! Can i put it to solved?
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
Yes and you can put a [SOLVED] in front of the original title as I can't change it.
For those who might be interested in my solution, here is what I did:
I copied the owlcarousel.html.twig and owlcarousel.yaml files to the 'custom/particles/' folder in the template directory.
I modified the owlcarousel.html.twig file as follows with the one line change:
<div class="g-owlcarousel-item owl-item {{ item.itemclass|e }}">{% block particle %} <div class="{{ particle.class|e }}"> {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %} <div id="g-owlcarousel-{{ id }}" class="g-owlcarousel owl-carousel {% if particle.imageOverlay == 'enable' %}has-color-overlay{% endif %}"> {% for item in particle.items %} [b][size=3]<div class="g-owlcarousel-item owl-item {{ item.itemclass|e }}">[/size][/b] <div class="g-owlcarousel-item-wrapper"> <div class="g-owlcarousel-item-img"> <img src="{{ url(item.image)|e }}" alt="{{ item.title|e }}" /> </div> <div class="g-owlcarousel-item-content-container"> <div class="g-owlcarousel-item-content-wrapper"> <div class="g-owlcarousel-item-content"> {% if item.title %} <h1 class="g-owlcarousel-item-title">{{ item.title|raw }}</h1>{% endif %} {% if item.desc %} <h2 class="g-owlcarousel-item-desc">{{ item.desc|raw }}</h2>{% endif %} {% if item.link %} <div class="g-owlcarousel-item-link"> <a target="_self" class="g-owlcarousel-item-button button {{ item.buttonclass|e }}" href="{{ item.link|e }}"> {{ item.linktext|raw }} </a> </div> {% endif %} </div> </div> </div> </div> </div> {% endfor %} </div> </div> {% endblock %}
In the owlcarousel.yaml file, I added the 'itemclass' settings after the 'buttonclass':
.buttonclass: type: input.text label: Button Class description: Input the button class. default: 'button-outline' .itemclass: type: input.text label: Item Class description: Input the Item class.
In my template layout manager for the Owl Carousel particle, when I view an individual item, I now have the class field that I can use.
This image is hidden for guests.
Please log in or register to see it.
When I look at the underlying code for the displayed page, I can see the 'item class':
<div id="g-owlcarousel-owlcarousel-2455" class="g-owlcarousel owl-carousel has-color-overlay"> <div class="g-owlcarousel-item owl-item justify-flex-start"> <div class="g-owlcarousel-item-wrapper">
Then I can style this slider in my custom.scss file:
.justify-flex-start {justify-content: flex-start;}
It works!!!!
Hope this helps if you have a similar need.
- Last Edit: 7 years 11 months ago by Luke Douglas.
- Just another old hacker!
-
Time to create page: 0.089 seconds