alx-tabs
-
Can I change/rename the name of all icon tabs with text?
Thanks
-
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://wordpress.org/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 DeptOK, 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 */
- The topic ‘alx-tabs’ is closed to new replies.