Hi poponov. Do you want to replace the tab icons with text? Or change the text of the tooltip?
Hi bdbrown.. thanks for response.
I want to replace the tab icons with text.
Give this a try in your child theme style.css or custom css. Or, you can use a plugin like Simple Custom CSS:
/* display tab heading text */
.alx-tabs-nav li a span {
display: block;
}
/* hide tab heading icons */
.alx-tabs-nav li a i {
display: none;
}
Replace icon
Recent Post –> with text: IT Dept
Popular Post –> with text: HR Dept
OK, remove the css I posted above and try this:
.s1 .alx-tabs-nav .fa.fa-star:before {
content: "HR Dept";
}
.s1 .alx-tabs-nav .fa.fa-clock-o:before {
content: "IT Dept";
}
.s1 .alx-tabs-nav .fa {
font: inherit;
width: inherit;
}
Still not change sir.. 🙁
Btw, did I attach the code right?
`/* custom widget : alxtabs / alxposts
/* ———————————— */
.alx-tabs-nav { border-bottom: 3px solid #ddd; margin-bottom: 10px; text-align: center; }
.alx-tabs-nav.tab-count-1 li { width: 100%; }
.alx-tabs-nav.tab-count-2 li { width: 50%; }
.alx-tabs-nav.tab-count-3 li { width: 33.333%; }
.alx-tabs-nav.tab-count-4 li { width: 25%; }
.alx-tabs-nav li { display: block; float: left; }
.alx-tabs-nav li a { font-size: 18px; display: block; padding: 8px 0; margin-bottom: -3px; border-bottom: 3px solid transparent; }
.alx-tabs-nav li a:hover { border-bottom-color: #ccc; }
.alx-tabs-nav li.active a,
#footer .alx-tabs-nav li.active a { color: #444; /* background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, #fff 100%) 0 0 rgba(0,0,0, 0); */ }
.alx-tabs-nav li a span { display: none; }
#footer .alx-tabs-nav { border-bottom-color: #eee; }
#footer .alx-tabs-nav li a:hover { border-bottom-color: #ddd; }
.s1 .alx-tabs-nav li.active a,
#footer .alx-tabs-nav li.active a { border-bottom-color: #3b8dbd; }
.s2 .alx-tabs-nav li.active a { border-bottom-color: #82b965; }
/* –bdbrown code– */
.s1 .alx-tabs-nav .fa.fa-star:before {
content: "HR Dept";
}
.s1 .alx-tabs-nav .fa.fa-clock-o:before {
content: "IT Dept";
}
.s1 .alx-tabs-nav .fa {
font: inherit;
width: inherit;
}
Looks like you are missing a closing comment tag in this line:
/* custom widget : alxtabs / alxposts
Hi WPyogi,
That part is by default, additional code is only /* –bdbrown code– */
My question is, did I put it correctly?
THIS line is missing the closing comment tag:
/* custom widget : alxtabs / alxposts
It should be:
/* custom widget : alxtabs / alxposts */
