Text Not Visible Over Covers
By Dietrich Murphy on Sunday, 18 March 2018
Posted in Technical Issues
Replies 7
Likes 0
Views 715
Votes 0
I am using the Posts (Grid) Layout menu item. The showcase blogs have the blog title in black and the blog text in white. The problem is that when the blog is displayed in the background, it makes it impossible to read for certain covers. See http://take.ms/nZ1Ga for example of this.

I usually resolve this problem by using a white outline on dark text or a black outline on light text. This solves the visibility problem regardless of the background cover.

How do I fix this?
Hey Dietrich,

You may apply the css codes below to enforce a white color text on the showcase module,

[gist]
body #eb.eb-component #eb-blog-grid-showcases h2 {
color: #fff;
}
[/gist]
Mark
·
Sunday, 18 March 2018 14:46
·
0 Likes
·
0 Votes
·
0 Comments
·
??????????????? Please try again.
Dietrich Murphy
·
Sunday, 18 March 2018 17:42
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

I have implemented css codes below on on your test site. You can change them(title colors) accordingly and see how it goes

[gist type="php"]
#eb .eb-blog-grid-showcase-content__title {
color: #fff !important;
}
[/gist]
Abdul Warith Norudin
·
Sunday, 18 March 2018 18:28
·
0 Likes
·
0 Votes
·
0 Comments
·
The attached image shows what I am saying. You can't see dark text on a dark background photo without using a white text outline.
Dietrich Murphy
·
Thursday, 22 March 2018 08:56
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

I have applied css codes below and it should shown as you required now. Please give it a check and see how it goes

[gist type="css"]
#eb .eb-blog-grid-showcase-content__title {
color: black !important;
-webkit-text-stroke: 1px white !important;
}
[/gist]
Abdul Warith Norudin
·
Thursday, 22 March 2018 10:50
·
0 Likes
·
0 Votes
·
0 Comments
·
It works. It looks great. Do you have instructions on how to apply the css codes above?
Dietrich Murphy
·
Friday, 06 April 2018 07:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

I have applied codes below here template/jsn_mico2_pro/css/custom/custom.css

[gist type="css"]
/* text outline */
#eb .eb-blog-grid-showcase-content__title {
color: black !important;
-webkit-text-stroke: 1px white !important;
}
[/gist]
Abdul Warith Norudin
·
Friday, 06 April 2018 11:18
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post