Modify some css in template

fairyjo

Hello,

I'm trying to remove the secondary color over the image on the home page's slideshow module, I can't see how, I have created the custom.css file and already added a few things I wanted to change, but this I didn't manage.

I need to change also the H1 in that slideshow so that it's not bold, or could I make it H2 instead of H1?

Hope you can help, thanks a lot, sincerely, Joanie

pavit

fairyjo I'm trying to remove the secondary color over the image on the home page's slideshow module,

I think you are referring to image opacity, if so then you can add to your custom.css

.acm-slideshow .owl-carousel .item .mask {
background:#3f2021;
opacity:0.9;
}

changing the background color and opacity value and adding the !important suffix at the end of line code

opacity:0!important;

fairyjo I need to change also the H1 in that slideshow so that it's not bold, or could I make it H2 instead of H1?

Open this file /templates/ja_alumni/acm/slideshow/tmpl/style-owl.php and change occurrencies for h1 to h2

<h1 class="item-title" data-delay-transtion="2">
<?php if($helper->get('data.btn-link', $i)): ?>
<a href="<?php echo $helper->get('data.title-link', $i); ?>" title="<?php echo $helper->get('data.title-link', $i) ?>">
<?php endif; ?>
<?php echo $helper->get('data.title', $i) ?>
 <?php if($helper->get('data.title-link', $i)): ?>
</a>
 <?php endif; ?>
</h1>

Regards

fairyjo

Wow pavit, thanks a lot, it works exactly like I wanted.

Now do I move the content of the Slideshow to the right instead of aligned on the left?

And change the buttons so they are plain primary buttons instead of border buttons?

Thanks a lot for your support, cheers, Joanie

Ninja

fairyjo
Hi
Add this code in custom.css file to move them on right side and add the BG color on buttons.

.acm-slideshow .owl-carousel .slider-content .slider-content-inner {
    float: right;
}
.btn-border.btn-inverse {
    background: #9a8b86;
}

Regards

fairyjo

Fantastic Ninja, thanks a lot for all that, it works perfectly.

One more question, I've been asked to add a background picture on the "Evenements" page/menu, and on that page only. I tried adding a Page class and modified the custom.css to add the background only for this page, but it doesn't work.

html.vegetal {
  background-image: url(images/design/filigrane-vegetal.png);
}

I guess it should be in the body tag, but how do I add a class to the body tag of that page only then?

I'm stuck here, hope you understand what I'm trying to do. By the way, the background image should appear just once and possibly pulled right 😅

Thanks a lot again, looking forward to your recommendations, sincerely, Joanie

aman204

fairyjo Hi

The page class suffix is appending fine however background image path doesnt appear to be right henceforth not reflecting. You may correct the same

Also, Try add this to custom.css file in order to ensure background from body tag doesnt supersude the one being added by you

html.vegetal body {
  background:none !important;
}

or add this instead :

html.vegetal body{
  background-image: url(images/design/filigrane-vegetal.png);
}

fairyjo

aman204 Hi,

The second code works great, I fixed the image url and then I found a way to make it appear just once and it looks great now. Hope the client likes it 🙂

Thanks so much for this. I think we can close this thread. Cheers, Joanie