Docs

[ili333]

Hi, I´m trying to find a way disabling the hover effect on the social media icons in the topbar.
When I move the cursor on the icons it appears in the typical “facebook-blue” and “twitter-blue”.
But how can I disable the hover effect completely and let the social icons stay in their typical color in a static way?

Also I´m wondering why the recent posts element doesn´t show up the title, the title ist just hovering. The title in the box shows up only by swiping with the cursor on the element.

Please provide me with a tip or solution, thank you very much for the help.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

body .x-social-global a:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
h3.h-recent-posts,span.x-recent-posts-excerpt {
    color: #000;
}

Hope that helps.

[ili333]

Thank you for quick reply. But the code doesn`t work…
The social icons is still having this roll over effect und the recent posts element too.

[Thai]

Hi There,

You forgot to close the curly bracket(}) in your custom CSS.

Please find this CSS:

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    display: none;

And change to this:

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    display: none;
}

After that add the following CSS again:

body .x-social-global a:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
h3.h-recent-posts,span.x-recent-posts-excerpt {
    color: #000;
}

Hope it helps 🙂

[ili333]

Oh thank you I am surprised, it worked perfectly! But now the social icons in the top bar are non colored, they are blank. How can I change the color into “facebook-blue” and “twitter-blue” ?

[Lely]

Hi There,

Please use this custom CSS:

.x-topbar .x-social-global a.facebook {
    color: #4267b2;
}
inspector-stylesheet:5
.x-topbar .x-social-global a.twitter {
    color: #1da1f2;
}

Hope this helps.

[ili333]

I found a different code for achieving this efffect.

.x-social-global .facebook { background-color:#3b5998; }
i.x-social-facebook { color:white; }

.x-social-global .twitter { background-color:#00abf0; }
i.x-social-facebook { color:white; }

Your code works also fine, but only changed the color of the icon-background without displaying white color in the letter F of facebook-icon.

Now after achieving this effect with blue background and white color in the letter, the social icons have still this hover effect when touching with the mouse on it. I don´t know how to disable this.
And one last issue I´m struggling with is the title on my posts page. It disappeared couple days ago, and shows up only when moving the mouse on it. Its like a hover effect on posts-title. (screenshot is attached)

[Paul R]

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[ili333]

Hope this helps: http://veritasblog.de/artikel/

Thank you.

[ili333]

and when you click on the article you will see their is no title over the post.

http://veritasblog.de/neuer-beitrag/

[ili333]

This is the code I´m currently added into the Custom CSS:

.single-post .entry-featured {  
width:40%;
margin-top:75px;
margin-left:auto;
margin-right:20px;
margin-bottom:5px;
float: left;
border
display:block;
}

.blog .entry-featured {
width: 30%;
margin-right:18px;
float: left;
}

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
  display: none; 
}

body .x-social-global a:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
h3.h-recent-posts,span.x-recent-posts-excerpt {
    color: #000;
}

.x-social-global .facebook { background-color:#3b5998; }
i.x-social-facebook { color:white; 
}

.x-social-global .twitter { background-color:#00abf0; }
i.x-social-facebook { color:white; 
}

[Nico]

Hi There,

You could adjust your post title in your Customizer > Typography or add this in your Customizer > Custom > CSS:

h2 a {
color:#000 !important;
}

Not sure what is the hover effect because I could not see any effect upon touching or hovering the icon. However you could try adding this Custom CSS:

.x-social-global a i:focus{
outline: none;
}

Let us know how it goes.

Thanks.

[ili333]

Thanks for your respond. I managed it before, so the social icons don´t hover anymore. The font was set in white (I don´t really know why this happened), so rather then using a code again, I changed the font color in black and it worked fine.

By the way, I appreciate the great support here at X Theme Forum! Never experienced any other online support like this.

[Nabeel A]

Thank you for your nice words, we’re glad we could help 🙂

Cheers!

[ili333]

One last issue irritating me: Can I adjust the mobile content in a way, that its adapting on the full screen on smartphones?
Watching the content on my iPhone I recognized, that text is shrinked into the middle of the screen.
Maybe you can help me with this? It looks like width of something like this Is not well adjusted.
I attached a screenshot about whats concerning me.

[Author]

Posts