alx-tabs

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;
}

Hi bdbrown,
Actually my case is same as this:
https://www.ads-software.com/support/topic/alx-tab-widget-how-to-change-the-icon-to-text?replies=9
But I still can not make it ??

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 */