Notifications

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


Christina Zeh
Posts: 2
Customer
(@christina-zeh)
Member
Joined: 5 months 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: 581
Moderator
(@elvina)
Honorable Member
Joined: 6 months 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: 5 months 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: