Triangle Flags

  • Resolved turkeez

    (@turkeez)


    1 year ago

    Is it possible to change the flags to corner triangles in the top left corner of the image with the text rotated and through the center? If so, where can I make this adjustment?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Property Hive

    (@propertyhive)

    A great question. I’ve put together the following CSS that will allow you to achieve this:

    .propertyhive ul.properties li .thumbnail a { overflow:hidden; }
    .propertyhive ul.properties li .thumbnail a .flag {
    top:-35px !important;
    left:-65px !important;
    border-top: 60px solid #dd3333;
    border-bottom: 0px solid transparent;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    transform: rotate(-45deg);
    }

    Note that the positioning and color #dd33333 will need to change accordingly but hopefully that should allow you to achieve what you’re after, or at least get you started.

    Of course let me know if I can assist further,

    Steve

    Thread Starter turkeez

    (@turkeez)

    Thank you so much for replying, can you please confirm where I would add the CSS because it doesn’t seem to work with all the CSS files I attempt to add it too.

    I have added it to the Customise CSS section of the Template Assistant and it seems to have worked there, thanks for all your help. If this is in the wrong location, please let me know and I can amend it

    • This reply was modified 1 year ago by turkeez.
    Plugin Author Property Hive

    (@propertyhive)

    The ‘Appearance > Customise > Custom CSS’ section is fine.

    Glad to hear it worked.

    Steve

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