Change upload button

  • Resolved bcreative13

    (@bcreative13)


    4 years, 11 months ago

    Hi there,
    I’d like to change the look and the position of the upload button. Is this possible?
    Any help would be greatly appreciated.
    Thanks, Bel

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Bel,

    in general you can change every icon in frontend.
    You can also change the position a bit. You can not change the order appearence of elements.
    Here an example:
    Open frontend page and open developer tools in Chrome Browser by clicking F12.
    Then analyse required element:
    https://www.screencast.com/t/Qx3sVEzDg8u
    You can can copy required CSS, overwrite with your requirements and add !important at the end of each row. Then plugin CSS will be overwritten:
    .mainCGdiv .cg_gallery_view_sort_control .cg-gallery-upload {
    height: 40px !important;
    width: 40px !important;
    display: table-cell !important;
    float: left !important;
    cursor: pointer !important;
    z-index: 10 !important;
    margin: 5px 15px 0 0 !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAnCAYAAAB9qAq4AAAACXBIW…ABDWhAAwbjMv88SkrIUPwOFh8HTEoHenuLDWjAfww8DwAq/8yFKo02UgAAAABJRU5ErkJggg==) no-repeat center center;
    background-size: contain !important;
    border: 1px solid #eee !important;
    background-color: white !important;
    }
    Add this CSS somewhere to your page.

    As you see the ICON image is base64 converted. You can take your own image and create your own base64 icon. Try to keep the resolution of the image as low as possible (100px *100px max) because otherwise the base64 code gets to big and rendering of page takes longer.
    I prefer this service here to create base64 https://www.base64-image.de/

    Kind regards
    Wasiliy

    Thread Starter bcreative13

    (@bcreative13)

    Hi Wasiliy

    Thanks for all this. It all worked, except I don’t know how to save the changes? I refresh the page and it returns to the original set up and image.

    Is it the part where you said “add this CSS somewhere on your page”??

    thanks again!
    Bel

    Hi Bel,

    the easiest way is to add the CSS directly to page.
    1. Go Customize at the top of the page when you are logged in:
    https://www.screencast.com/t/OsLf0TRQD
    2. Go to additional CSS:
    https://www.screencast.com/t/pPVV1fMwyRDb
    3. Insert the CSS
    https://www.screencast.com/t/IhMTuxDtJ4
    4. Publish the changes
    https://www.screencast.com/t/y7YNbTERWlvV

    Best regards
    Wasiliy

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change upload button’ is closed to new replies.