Widget: change icons to text  


Derek Costa
Posts: 1
Customer
(@derek-costa)
Member
Joined: 3 weeks ago

I am building out a site, and I would like to experiment with two different looks for the widget:

1) Changing the tab icons to text (I cannot find where the icons are defined to add the text)

2) Shrinking the icons down a bit, and having them to the left of the descriptor text

 

I found: https://gvectors.com/forum/wpdiscuz-widgets/making-the-icons-smaller/#post-2348

The direction provided there had no impact on the sizing of the icons.

 

 

Thanks!

1 Reply
Elvina
Posts: 181
Moderator
(@elvina)
Estimable Member
Joined: 3 months ago
Posted by: @derek-costa

Changing the tab icons to text (I cannot find where the icons are defined to add the text)

Please follow the steps below:

1. Navigate to Dashboard > Comments > Settings > Addons > Widgets admin page, put the following CSS code in the "Widget custom CSS" textarea:

div#widget-comments-container li a i:before{
display:none !important;
}

div#widget-comments-container li a p{
font-size:10px;
}

2. Put the following JS codes in the active theme js files:

jQuery("div#widget-comments-container .most-voted a i").html("<p>Most Voted Comments</p>");

jQuery("div#widget-comments-container .most-active a i").html("<p>Active Comments Threads</p>");

jQuery("div#widget-comments-container .popular-posts a i").html("<p>Most Commented Posts</p>");

jQuery("div#widget-comments-container .popular-authors a i").html("<p>Most Active Commenters</p>");

jQuery("div#widget-comments-container .wpd-wid-recent-comments a i").html("<p>Resent Comments</p>");

Important: We don't recommend you to change the icons to the text. If you make those changes you will have to write a large number of CSS codes to display the tabs title correctly (change width, height, font-size, etc.).   

Shrinking the icons down a bit, and having them to the left of the descriptor text

It seems there is a CSS conflict. Please leave some example URL to allow us to check the issue.

Reply
Share:
Green
Default
Pear
Black Emo
{green}:grinning:
{green}:wink:
{green}:face:
{green}:inlove:
{green}:sweaty:
{green}:surprised:
{green}:lovekiss:
{green}:laugh:
{green}:formalsmile:
{green}:displeased:
{green}:cool:
{green}:resent:
{green}:nerd:
{green}:screaming:
{green}:amazed:
{green}:sad:
{green}:deceitful:
{green}:starryeyes:
{green}:evil:
{green}:shocked:
{green}:tears:
{green}:sulky:
{green}:smile:
{green}:vomited:
{green}:hi:
{green}:afraid:
{green}:crazy:
{green}:rabid:
{green}:fighting:
{green}:nonoise:
{green}:blushed:
{green}:idontknow:
{green}:scared:
{green}:razz:
{green}:kiss:
{green}:eat:
{green}:shutmouth:
{green}:gape:
{green}:suspicious:
{green}:laughingoutloud:
{green}:bruise:
{green}:crying:
{green}:pray:
{green}:serious:
{green}:excitement:
:)
:d
:wink:
:mrgreen:
:neutral:
:twisted:
:arrow:
:shock:
:???:
:cool:
:evil:
:oops:
:razz:
:roll:
:cry:
:eek:
:lol:
:mad:
:sad:
:!:
:?:
:idea:
:hmm:
:beg:
:whew:
:chuckle:
:silly:
:envy:
:shutmouth:
{pear}:happy:
{pear}:smile:
{pear}:laugh:
{pear}:laughingoutloud:
{pear}:crying:
{pear}:exhausted:
{pear}:nerd:
{pear}:surprised:
{pear}:veryhungry:
{pear}:wink:
{blackemo}:laughtertotears:
{blackemo}:gift:
{blackemo}:love:
{blackemo}:inlove:
{blackemo}:shamefaced:
{blackemo}:heart:
{blackemo}:crazy:
{blackemo}:anguished:
{blackemo}:bruise:
{blackemo}:easymoney:
{blackemo}:exhausted:
{blackemo}:vampire:
{blackemo}:shutmouth:
{blackemo}:wink:
{blackemo}:carnival:
{blackemo}:flowers:
{blackemo}:hotdrink:
{blackemo}:party: