Rotate Headline - Support | Kriesi.at - Premium WordPress Themes

Tagged: CSS, enfold

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
March 21, 2017 at 2:59 pm #764214

TR0PEN
Participant

Hey i tried to rotate the headline in the “fullwidth-slider”, but it doesn’t work correct.

I installed the enfold child theme and added some information to the class .avia-caption-title like that:

.avia-caption-title{
font-style: italic;
font-weight: 900!important;
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

It looks like there is already a rotation with 0 deg. At first the headline is horizontal and after some milliseconds it is changing.

My second problem is: I want to change the headline from h2 to h1. How is it possible?

March 21, 2017 at 9:00 pm #764361

TR0PEN
Participant

I found the problem, but i don’t know, how to solve it.

In the class avia-slideshow-inner li is an inline css placed and i don’t know where it come from.

Can anyone help?

March 22, 2017 at 7:21 am #764615

Nikko
Inactive Moderator

Hi,

Are you referring to WELCOME TO AMBULANCE, I think you have already done it, if not you can try to add !important after the values in css to override what inline styles.

Best regards,
Nikko

March 22, 2017 at 3:37 pm #764832

TR0PEN
Participant

Hey,

yes it’s “Welcome to Ambulance”. But the rotation is not there all the time. For 1-2 seconds it’s gone and horizontal.

First it’s loading the shortcode.css and the rotation works, then it loads the inline css and it’s “normal” and then it load my quick css and it’s diagonal again.

You know what i mean?

Best regards,

Lasse

March 23, 2017 at 2:07 pm #765457

Victoria
Inactive Moderator

Hi Lasse,

You can put the rules you need in enfold/custom.css or in child theme if you have one, this way the rules will be loaded last and will work.

Let us know if you have any more questions.

Best regards,
Victoria

March 23, 2017 at 2:09 pm #765459

TR0PEN
Participant

Hey Victoria,

i already did that.

Do you see the problem i have?

March 24, 2017 at 6:03 pm #766317

TR0PEN
Participant

I fixed the Problem with the following:

.avia-slideshow-inner li {
transform: none!important;
transition:none!important;
}

March 24, 2017 at 6:50 pm #766339

Victoria
Inactive Moderator

Hi TR0PEN,

Great job! :)

Let us know if you have any more questions.
Best regards,
Victoria

March 24, 2017 at 6:59 pm #766345

TR0PEN
Participant

Damnit. My solution only works for chrome.

I tried already:

.avia-slideshow-inner li {
-ms-transform: none!important;
-webkit-transform: none!important;
-o-transform: none!important;
transform: none!important;
-ms-transition: none!important;
-webkit-transition: none;
transition: none!important;
}

But that won’t work for safari.

Any Ideas?

March 25, 2017 at 4:27 am #766450
Nikko
Inactive Moderator
Hi,

Can you try to add !important after the rotate values on your posted code:
```
.avia-caption-title{
  font-style: italic;
  font-weight: 900!important;
  -moz-transform: rotate(-10deg) !important;
  -ms-transform: rotate(-10deg) !important;
  -o-transform: rotate(-10deg) !important;
  -webkit-transform: rotate(-10deg) !important;
  transform: rotate(-10deg) !important;
}
```
Best regards,
Nikko
March 27, 2017 at 11:48 am #767353

TR0PEN
Participant

Hey Nikko,

it doesn’t work like that. I added it in the style.css in my child theme, but nothing happened.

Best Regards

Lasse

March 28, 2017 at 7:04 pm #768386

TR0PEN
Participant

Did anyone has some problems with transform and transition with safari so far?

I can’t find a solution for that :-/

March 31, 2017 at 8:17 am #769771

Ismael
Moderator

Hi,

I would like to check this but the site is on maintenance mode. Please provide a temporary login details so that we can check it. A screenshot will help.

Best regards,
Ismael

April 4, 2017 at 12:38 pm #771704

TR0PEN
Participant

You can reach the website now on:

Home

April 5, 2017 at 5:19 am #772166

Ismael
Moderator

Hi!

The headline is already rotated. Is this fixed? It is working on safari as well.

// http://imgur.com/a/ODMil

Best regards,
Ismael

April 5, 2017 at 3:48 pm #772623

TR0PEN
Participant

Hey Ismael,

Unfortunately not. The problem is, that the headline is jumping.
When you reload the page, the following happens:

1. headline is rotated (perfect)
2. The headline jumps to horizontal (bad)
3. The headline is rotated (perfect)

The problem is just the second during the reload / load.

April 7, 2017 at 2:56 am #773635
Ismael
Moderator
Hi!

Have you tried disabling the default transition of the caption?
```
.avia_transform .av_slideshow_full .avia-caption-content, .avia_transform .av_slideshow_full .avia-caption-title, .avia_transform .av_fullscreen .avia-caption-content, .avia_transform .av_fullscreen .avia-caption-title, .avia_transform .av_fullscreen .avia-slideshow-button, .avia_transform .av_slideshow_full .avia-slideshow-button {
    -webkit-transform: none !important;
    transform: none !important;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title {
    visibility: visible;
    -webkit-animation: none !important;
    animation: none !important;
}
```
Best regards,
Ismael
April 10, 2017 at 8:30 am #775316

TR0PEN
Participant

I added just the second part and that worked quite well. It looks much better now. Thanks a lot!

Only one mini problem left. On safary the sub-headline has an animation in it. So it jumps a little bit.

It’s not a big deal, but maybe you have an idea?

Thanks a lot, Ismael!!!

April 11, 2017 at 4:55 am #775772

Ismael
Moderator

Hey!

We already removed every css animation declaration so there’s no reason for the subheading to move. Did you remove browser cache before checking the page?

Regards,
Ismael
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.