Docs

[Benjamin H]

I have a couple issues I’m trying to fix on graceandhonor.org with the Ethos 1 Theme

1. As you can see in this image, I changed the CSS to make the background white, but now it won’t show when it goes up and reveals the text. Also, I want to bring down the white box and text when the mouse isn’t hovering over it http://prntscr.com/beej6f

2. I want the small line below to be the same width as the line above. See Screen shot http://prntscr.com/beel1v

3. I want to remove this line http://prntscr.com/beeljz

4. Whenever the mouse hovers over one of these thumbnails it starts off as a black square (like in the screenshot) and then goes to the correct shape of the image. How can I make it not to flicker like that and Second how can I change the color of that black block and the color of the text http://prntscr.com/beelwd

[Benjamin H]

It has been several days since we posted… Could we get some help with these questions please? Thanks!

[Rupok]

Hi there,

I am really sorry for the inconvenience and thank you very much for your patience. All of your issues are related with your customization and custom code that you are using so we took some time to assist you instead of disappointing you. Hope this is fine since there was weekend as well. 🙂

#1. You can add this under Custom > CSS in the Customizer.

.x-post-carousel .entry-cover:hover::before {
  background: #fff none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.h-entry-cover::before {
  top: 10px;
}

.x-post-carousel-item .h-entry-cover {
  padding: 35px 15px 0 !important;
}

#2. It seems you have used this to remove the border bottom :

.x-navbar {
  border: 1px none;
}

Let’s remove this and add the below code :

.x-navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#3. You hvae the following code :

.x-navbar .desktop .x-nav > li:first-child > a {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

Let’s remove that or use this CSS instead if you can’t find :

.x-navbar .desktop .x-nav > li:first-child > a {
  border: none !important;
}

#4. I can’t see the square shape as your screenshot on my end. Here goes a screencast on my end – http://recordit.co/nQHpwX3xdj

Hope this helps.

Cheers!

[Benjamin H]

All of these solutions worked perfectly! Thanks so much for your help! 🙂

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Benjamin H]

So in regards to #4 above (4. Whenever the mouse hovers over one of these thumbnails it starts off as a black square (like in the screenshot) and then goes to the correct shape of the image. How can I make it not to flicker like that and Second how can I change the color of that black block and the color of the text http://prntscr.com/beelwd), this seems to be an issue in Google Chrome and Safari, though it works fine in Internet Explorer/Edge. Do you know what might be causing this? Thanks!

[Rupok]

Hi there,

Thanks for updating. It’s because the shape supposed to be square/rectangle but you have change the border radius with the following code :

.entry-thumb {
    border-radius: 40px 0px 0px 0px!important;
}

which is not working as expected due to transition. You need to turn off transition if you want to achieve this. Let’s add this CSS :

a.entry-thumb:before {
    transition: none;
}

Hope this helps.

[Benjamin H]

Perfect! Thank you once again!!

[Christian]

You’re welcome. 🙂

[Author]

Posts