Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 26, 2015 at 7:37 pm #525157
    mleite1

    I can use in my gallery sortable replace the text with image? In my gallery there will be only two types of category. I wish there were image instead of text in the sortable.

    How I do it?

    LINK SITE
    http://www.andrebrito.com.br/ab2/blog/publicacoes/

    October 28, 2015 at 9:43 am #525954
    Ismael

    Hey mleite1!

    Thank you for using Enfold.

    Set the image as background of the sort button. Something like this:

    .artigos-cientificos_sort_button {
    background: url(IMAGE URL HERE);
    padding: 20px;
}

.capitulos-de-livros_sort_button {
    background: url(IMAGE URL HERE);
    padding: 20px;
}

    Regards,
    Ismael

    November 4, 2015 at 4:41 pm #530198
    mleite1

    Ismael, where I put this code? QUICK in CSS?

    If yes, it did work.

    November 4, 2015 at 4:44 pm #530203
    Yigit

    Hey!

    Yes, the code should go into Quick CSS field.
    Glad Ismael could help! :)

    Regards,
    Yigit

    November 4, 2015 at 4:49 pm #530211
    mleite1

    It worked, but the image was cut and titles remain on the image.

    Removing this title and how to put the image size you desire?

    LINK
    http://www.andrebrito.com.br/ab2/blog/publicacoes/

    November 4, 2015 at 4:53 pm #530216
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .artigos-cientificos_sort_button,.capitulos-de-livros_sort_button {
    background-repeat: no-repeat;
    background-size: contain;
}
.artigos-cientificos_sort_button .inner_sort_button,.capitulos-de-livros_sort_button .inner_sort_button {
    opacity: 0;
}

    Cheers!
    Yigit

    November 4, 2015 at 5:07 pm #530245
    mleite1

    It worked.
    Only lack insert a picture for the word/link ALL and hide ( / ) between the squares.

    November 4, 2015 at 5:10 pm #530248
    Yigit

    Hey!

    Please add following code to Quick CSS as well 

    .all_sort_button {
    background: url(IMAGE URL HERE);
    padding: 20px;
    background-repeat: no-repeat;
    background-size: contain;
}
.all_sort_button .inner_sort_button {
opacity: 0;
}
.av-sort-by-term .text-sep {
    opacity: 0;
}

    Cheers!
    Yigit

    November 4, 2015 at 5:24 pm #530261
    mleite1

    Great Yigit,

    The All button has the same size as the other 2. Why was with different size?

    November 4, 2015 at 5:28 pm #530264
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .all_sort_button { min-width: 145px; }

    Regards,
    Yigit

    November 4, 2015 at 5:34 pm #530272
    mleite1

    Thanks Yigit.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘SORTABLE WITH IMAGE’ is closed to new replies.