child theme distortions on website - Support | Kriesi.at

Tagged: child theme

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

Author

Posts
June 1, 2022 at 9:53 pm #1353829

Veronika
Participant

Hi,

I installed the child theme and followed all the instructions on https://kriesi.at/documentation/enfold/child-theme/#toggle-id-3

I cleared the cache a few times and uploaded the theme settings, but my website has still troubles. The header, font, burger menu and search magnifier are different. There is also a grey fade on my pictures on the “all posts” page.

Please help. When I go back to enfold theme there is everything displayed correctly.

June 2, 2022 at 5:45 am #1353848
Nikko
Inactive Moderator
Hi Veronika,

I have added this CSS code in Enfold > General Styling > Quick CSS and it fixes the issue:
```
#top #header .social_bookmarks li a {
font-size : 18px;
}
.av-hamburger-box {
width : 30px;
}
.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
height : 4px;
}
.av-hamburger-inner::after {
bottom : -10px;
}
.av-hamburger-inner::before {
top : -10px;
}
.html_burger_menu_active #top #wrap_all .menu-item-search-dropdown > a {
font-size : 35px;
}
```
Please review your site.

Best regards,
Nikko
June 2, 2022 at 12:43 pm #1353907

Veronika
Participant

Hi,

the white header is still there, and the text has still a line underneath(der Text ist unterstrichen)

View post on imgur.com

The Home page is different too: https://imgur.com/PKzBUqE the posts schould not be aligned like this.

The grey fade over all my posts on the “all posts” site is still there https://imgur.com/wYps5eA

I really do not like this. Is there a way of having the same website in my chiild-theme as in my enfold them?

Thank you for your kind help

Best,
Veronika

June 5, 2022 at 6:28 pm #1354239
Mike
Moderator
Hi,
Thank you for your patience, the grey fade over your posts was caused by this css in your Quick CSS:
```
.avia_transform #top a:hover .image-overlay {
  opacity: 0.25 !important;
}
```
I corrected for you.
The reason your homepage top two right side posts were not at the top of the page was this css in your SiteOrigin CSS:
```
@media only screen and (min-width: 1210px) {
  .home_post_layout2 article:nth-child(2n) {
    padding-top: 100px;
  }

  .slide-entry-wrap:not(:nth-child(1)) {
    margin-top: -100px;
  }
}
```
I corrected for you.

I then removed the special heading underline with this css:
```
#top #main .custom-color-heading a {
    text-decoration: none;
}
```
please clear your browser cache and check.

Best regards,
Mike
June 16, 2022 at 6:45 pm #1355534

Veronika
Participant

Hi Mike,

I think there was a huge misunderstanding!!!

1. The top should look like this! https://imgur.com/3DunFQv I want the distance on the right top! only the right top

2.The grey fade was only on the “all posts” side! It should be on every page but only when the mouse hovers the picture or the text, not always and definitely not missing, it should be there! (der graue Schleier sollte nur kommen wenn die Maus drüber gleitet, es war permanent da und das hat mich gestört)

3. the header should be always transparent https://imgur.com/AAkznpQ

as always grateful for your help!

Best,
Veronika

June 16, 2022 at 7:10 pm #1355537

Veronika
Participant

This reply has been marked as private.

June 16, 2022 at 11:20 pm #1355546

Guenni007
Participant

So far i understand you is the parent theme look thats what you like to have ( as before ) and after child is active some settings change …

I installed the child theme and followed all the instructions

import parent theme settings – sometimes it is better to do it manually – means : activate again your parent theme – export those settings to your local machine. – Activate the child again and import that file.

June 17, 2022 at 1:18 pm #1355600
Mike
Moderator
Hi,
Thanks for the feedback, for #1 I have added this css to add the top white edge:
```
@media only screen and (min-width: 1210px) {
  .home_post_layout2 {
    padding-top: 25px;
  }
}
```
your original css was not correct, perhaps the page elements or layout changed, anyways please clear your browser cache and check.
For #2 I misunderstood that this was only for the page /all-posts/, so I removed the opacity on hover on this one page by adjusting your SiteOrigin CSS to exclude it:
```
.avia_desktop #top:not(.page-id-4375) .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container,
.avia_desktop #top:not(.page-id-4375) .av-hover-overlay-active.av-caption-style-overlay .av-masonry-entry .av-masonry-image-container {
  opacity: 0.6!important;
}
```
note the :not(.page-id-4375) that I added to your previous css.
then to remove the opacity from that one page before hover I added this css:
```
.avia_desktop #top.page-id-4375 .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}
```
please clear your browser cache and check.
For #3, to make the header transparent all the time on all devices I added this css:
```
.header_color .header_bg {
    background-color: transparent;
}
```
please clear your browser cache and check.

Best regards,
Mike
June 17, 2022 at 6:00 pm #1355630
Guenni007
Participant
by the way – your css code :
```
@media only screen and (min-width: 1210px) {
  .home_post_layout2 article:nth-child(2n) {
    padding-top: 100px;
  }

  .slide-entry-wrap:not(:nth-child(1)) {
    margin-top: -100px;
  }
}
```
is the reason why on bigger screens this happens:
June 17, 2022 at 7:16 pm #1355639

Mike
Moderator

Hi,
Thanks Guenni007, good catch, I had originally commented this out to correct above but didn’t realize it has in two locations, I removed it from the second location and now it is corrected.
Veloryana please ensure that you clear your browser cache before checking again.

Best regards,
Mike

July 4, 2022 at 6:17 pm #1357235

Veronika
Participant

Hi Guenni007,

I already imported the settings manually, but nothing changed, I still have the same problems:

1. https://imgur.com/Fm63298 Some of my links are underlined when hovered over it, it should only be a grey out

2. https://imgur.com/1O6j4gJ The grey out effect, when hovering over the posts, is way to intense. It is supposed to be less opaque and less grey.

3. https://imgur.com/hcgO90D Meanwhile the grey out effect is non existent at all on my “all posts” page

4. https://imgur.com/hXBN17J The rightmost post should be displaced a little below, with some whitespace for the burger menu and the search icon

5. https://imgur.com/undefined The burger menu and the search icon should be aligned below one another

I very much appreciate your help

Best,
Veronika

July 6, 2022 at 7:45 am #1357352
Nikko
Inactive Moderator
Hi Veronika,

Please add the following CSS codes:
1.Some of my links are underlined when hovered over it, it should only be a grey out
```
#top a:hover {
    text-decoration: none;
}
```
2. The grey out effect, when hovering over the posts, is way to intense. It is supposed to be less opaque and less grey
```
.avia_transform #top a:hover .image-overlay {
    opacity: 0.2 !important;
}
```
3. Meanwhile the grey out effect is non existent at all on my “all posts” page
```
#top .av-masonry-container .av-masonry-image-container:after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.2);
    opacity: 0;
    visibility: hidden;
}

#top .av-masonry-container .av-masonry-entry:hover .av-masonry-image-container:after {
    opacity: 1;
    visibility: visible;
}
```
4. The rightmost post should be displaced a little below, with some whitespace for the burger menu and the search icon
I don’t see the issue on my end, is this already fixed?

5. The burger menu and the search icon should be aligned below one another
The search icon and burger menu are aligned vertically (below one another), if the issue persists, try clearing out the browser cache.

Best regards,
Nikko
July 6, 2022 at 11:05 pm #1357463

Veronika
Participant

Hi Nikko,

1- I added the first code to the theme file editor and to the additional CSS, both did not work

2- figured that one already out, thank you ^^

3- also did not change anything, and yes I cleared the cache and checked :)

4- I´m sorry, what I meant was: https://imgur.com/zYpNsY9 the right part should be a little more down than the left part in the right half of the page

5- yes, that is already fixed by mike

thank you very much,

Best,
Veronika

July 7, 2022 at 2:46 am #1357483
Nikko
Inactive Moderator
Hi Veronika,

#1 & #3 Seem to work, here are the screenshots on my end, https://savvyify.com/img/image/vKy1 and https://savvyify.com/img/image/vbvN

#4 please add this code:
```
#top .home_post_layout2 .slide-entry-wrap .slide-parity-even {
    margin-top: 160px;
}

#top .home_post_layout2 .avia-content-slider-inner .slide-entry-wrap:not(first-child) {
    margin-top: -160px;
}
```
Best regards,
Nikko
- This reply was modified 2 years, 4 months ago by Nikko.
July 7, 2022 at 11:14 am #1357507

Veronika
Participant

Hi Nikko,

1- it works on some headings and on some not: https://savvyify.com/img/image/bildschirmfoto-2022-07-07-um-105301.v0jB

3- it worked perfect, thank you. How do I remove the scale transition on the pictures? (“all posts” page) I want to keep only the grey ease out effect

4- it does not seems to work

Thank you

Best,
Veronika

July 7, 2022 at 11:19 am #1357508

Veronika
Participant

I just noticed the code 4: changed the size of the left picture and on the iPad version it shifted everything upwards:

Ipad version: https://imgur.com/HARhGeW

pc: https://imgur.com/RppTR6a

mobile version: https://imgur.com/XB43tqO

so I removed the code, do you have any other recommendations?

Best,

Veronika

July 7, 2022 at 2:52 pm #1357549
Nikko
Inactive Moderator
Hi Veronika,

Please replace the code I gave for #4 with this one:
```
#top .home_post_layout2 .slide-entry-wrap .slide-parity-even {
    margin-top: 160px;
}

#top .home_post_layout2 .avia-content-slider-inner > .slide-entry-wrap {
    margin-top: -160px;
}

#top .home_post_layout2 .avia-content-slider-inner > .slide-entry-wrap:first-child {
    margin-top: 0;
}
```
Hope it helps.

Best regards,
Nikko
July 7, 2022 at 3:57 pm #1357562
Veronika
Participant
Hi Nikko,

it looks great on the mobile and web version. Unfortunately it does not work completely with the iPad version. Any adjustments recommended?

View post on imgur.com

Thank you

Best,
Veronika
- This reply was modified 2 years, 4 months ago by Veronika.
- This reply was modified 2 years, 4 months ago by Veronika.
- This reply was modified 2 years, 4 months ago by Veronika.
July 7, 2022 at 4:31 pm #1357574

Nikko
Inactive Moderator

Hi Veronika,

What changes do you want to make on ipad? would you like to make it as a single column?

Best regards,
Nikko

July 7, 2022 at 4:38 pm #1357576

Veronika
Participant

Hi Niko,

the space above the picture is missing. https://imgur.com/K7gVz8Q

and as mentioned above #1: some heading still do not have the fade out when hovering over

Thanks,

Best,
Veronika

July 7, 2022 at 4:45 pm #1357578
Nikko
Inactive Moderator
Hi Veronika,

I see, I apologize for missing that.
Please replace this code you have:
```
@media only screen and (min-width: 1210px) {
  .home_post_layout2 {
    padding-top: 25px;
  }
}
```
with:
```
@media only screen and (min-width: 768px) {
  .home_post_layout2 {
    padding-top: 25px;
  }
}
```
Best regards,
Nikko
July 7, 2022 at 4:47 pm #1357579

Veronika
Participant

Hi Nikko, I just noticed, this is happening: the excerpt is cut off on every second post: https://imgur.com/c7mUNrE

View post on imgur.com

Could you please help me to fix this problems?

Best,
Veronika

July 7, 2022 at 5:46 pm #1357590
Nikko
Inactive Moderator
Hi Veronika,

Please add this CSS code:
```
@media only screen and (max-width:767px) {
  #top .home_post_layout2 .avia-content-slider-inner > .slide-entry-wrap {
    margin-top: 0;
  }
}
```
Best regards,
Nikko
July 7, 2022 at 8:53 pm #1357605

Veronika
Participant

Thank you Nikko, it solved the problem. Thank you very much!

There is only one thing left: some heading still do not have the fade out when hovering over.

Like these for example: https://imgur.com/n4fIP7l

I highly appreciate your help!

Best,
Veronika

July 8, 2022 at 4:25 am #1357618
Nikko
Inactive Moderator
Hi Veronika,

You’re welcome, it’s a pleasure helping you :)
Please try to add this CSS code as well:
```
.html_elegant-blog .avia-content-slider .slide-entry:hover .slide-entry-title,
#top .av-masonry-container .av-masonry-entry:hover .av-masonry-entry-title {
    opacity: 0.7;
    color: #919191 !important;
    transition: 0.25s;
}
```
Best regards,
Nikko
Author

Posts

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

You must be logged in to reply to this topic.