[Solved] How to change the media-upload icons size beneath the textarea?  


Christina Zeh
Posts: 2
Customer
(@christina-zeh)
Member
Joined: 1 week ago

Hi,

the upload-icons are so small, that most users just do not see them even when actively looking for an upload option. I had no success in changing the size via CSS so far.

Any tips how to achieve that?

Also, can the upload-area (e.g. those 3 spots for pictures) start open and not collapsed?

Thanks in advance!

2 Replies
Elvina
Posts: 52
Moderator
(@elvina)
Trusted Member
Joined: 1 month ago

Hi @christina-zeh,

Thank you for using the wpDiscuz Media Uploader add-on.

the upload-icons are so small, that most users just do not see them even when actively looking for an upload option. I had no success in changing the size via CSS so far.

Please navigate to Dashboard > Comments > Settings > Styling admin page, put the following CSS codes in the "Custom CSS Code" textarea.

#wpcomm .wc-field-textarea .wpdiscuz-textarea-foot
line-height: 45px !important;
}
#wpcomm .wmu-icon-image, #wpcomm .wmu-icon-video, #wpcomm .wmu-icon-file{
background-size: 25px !important;
width: 40px !important;
}

The red marked code can be changed. 

Also, can the upload-area (e.g. those 3 spots for pictures) start open and not collapsed?

I'm really sorry, but there is no simple way I can post here. This requires a js solution.

Another option: In this support topic Astghik provides jQuery codes that allow you to change the icons. Please check it:

https://gvectors.com/forum/media-uploader/change-media-upload-icons/#post-16555

Please don't forgot to delete all caches before checking.

Christina Zeh
Posts: 2
Customer
(@christina-zeh)
Member
Joined: 1 week ago

Thanks for your help! 

Had to add a { and some other code to adjust for an even bigger size, but now it runs well.

My code attached for others as a reference. Smile

#wpcomm .wc-field-textarea .wpdiscuz-textarea-foot {
line-height: 80px !important;
width: 100%;
}
#wpcomm .wmu-icon-image, #wpcomm .wmu-icon-video, #wpcomm .wmu-icon-file{
background-size: 40px !important;
width: 60px !important;
}
#wpcomm .wc-field-textarea .wpdiscuz-textarea-foot .wpdiscuz-button {
height: 45px;
background-color: #fff;
margin: 2px 0px 0px 5px;
border-radius: 0px 10px 0px 10px;
}

icons

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: