[Resolved] headline icon on right side

Home Forums Support [Resolved] headline icon on right side

Home Forums Support headline icon on right side

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1567104
    Heinrich

    hi ream,

    seems the css-code is not working anymore? can`t figure out why.

    /* place icons to right side */
    .reverse-icon.gb-headline {
    order: -1;
    margin-right: 10px;
    }
    tks in advance

    #1567128
    Elvin
    Staff
    Customer Support

    Hi,

    The site details included in the Private information area doesn’t seem to work, can you confirm/check?

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1567130
    Heinrich

    hi elvin this is only the htpasswordprotection, because the site shall not bepublic yet.
    if you need wp-admin, i have to create your account

    #1567149
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify: What was the CSS code for? Where you trying to change the display order of contents within the clippath-ed container?

    It’s not applying now because it’s commented out within the simple CSS code area as shown here:
    https://share.getcloudapp.com/geuoWyq4

    Unless you mean its not working prior to it being commented out? Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1567158
    Heinrich

    hi elvin, yes it was not prior working. i reactivated the css now.
    second, i added the svg in white and selected white as icon color. but also not shown in white.

    #1567756
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this instead:

    .reverse-icon .gb-headline-text {
        order: -1;
        margin-right: 10px;
    }
    #1567780
    Heinrich

    tks tom, perfect working. last thing, how do i get them white? as i wrote i use white svg`s and icon color is white. but the icons are shown in dark-grey?

    tks in advance

    #1567965
    Leo
    Staff
    Customer Support
    #1568082
    Heinrich

    hi leo, yes, of course. but this option doesnt work. i have to mention, that it is an icon which i inserted with html(white) and not a standard icon. in the backend i see the white icon, but it doesnt appear in the frontend.

    #1568356
    David
    Staff
    Customer Support

    Hi there,

    the Icon field in GenerateBlocks is sanitized which stops it from outputting potentially unsecure content. Why not use an SVG ?

    #1569042
    Heinrich

    hi david,

    cannot understand this question.
    – i am using svg icons
    – they are created in white
    – additonally the icon color in headline is set to white

    ?

    #1569043
    Heinrich

    i provide the icon html code of one icon:

    <?xml version=”1.0″ encoding=”utf-8″?>
    <!– Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
    <svg version=”1.1″ id=”Ebene_1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
    viewBox=”0 0 90.5 105″ style=”enable-background:new 0 0 90.5 105;” xml:space=”preserve”>
    <style type=”text/css”>
    .st0{fill:#FFFFFF;}
    </style>
    <path class=”st0″ d=”M42,4.2c-2,2-3.3,3.3-3.3,4S37.3,9.6,36,9.6c-2.6,1.5-4.9,3.5-6.7,6c-0.8,0.8-1.5,1.7-2,2.7
    c-1.6,2.1-2.5,4.7-2.7,7.3c0,1.3-0.7,1.3-3.3,2c-2,0-3.3,0.7-3.3,1.3s-2,2-3.3,3.3l-3.3,2.7l-0.7,5.3c0,3.3-0.7,6.7-1.3,7.3
    c0,0.7-0.7,6-1.3,10.7c-1.3,8-2,11.3-3.3,15.3C4,75.5,0,98.1,0,100.1c0,0.7,0,0.7,2,0.7c8.1,0.1,16.1,1,24,2.7
    c8,1.3,34.6,2,45.3,1.3c6-0.7,6-1.3,10-7.3c2.1-3.6,4.8-6.7,8-9.3c1.3-2,2-4,0-5.3c0,0-0.7-2.7-1.3-6c-1.3-5.3-2.7-9.3-8-24.6
    c-2-6-2.7-8.7-2.7-15.3c0-6,0-6.7-1.3-6.7c-0.7-0.7-4-0.7-6.7-0.7l-4.7,0.7l-0.7-8c-0.7-14-3.3-20-11.3-22C47.9-0.4,45.3,0.2,42,4.2
    z M76.6,93.5c0.7,2.7,0.7,5.3-0.7,6.7s-10,3.3-12.6,2.7c-1.3,0-9.3-0.7-16.7-0.7c-8,0-16-0.7-17.3-1.3c-2.5-0.2-4.9-0.7-7.3-1.3
    c-10-1.3-13.3-2-14-4c0-0.7-0.7-6.7-0.7-12.6c0-8.7,0.7-13.3,2-18.7c0.7-3.7,1.1-7.5,1.3-11.3c0.7-2,1.3-6,2-8.7
    c0.4-2.2,0.7-4.4,0.7-6.7c0-0.7,0-1.3,1.3-0.7c1.3,0,4,0.7,6,0.7l4,0.7l-0.7,4c-0.7,8-0.7,8,1.3,8s2,0,2-2c0.7-1.3,0-2-0.7-2
    C26,45.5,26,44.9,26,41.5v-4l2.7,0.7c2,0,6,0.7,9.3,0.7c3.4,0,6.7,0.5,10,1.3l4,0.7v2c-0.1,1.4-0.6,2.8-1.3,4c-1.3,3.3-0.7,4.7,2,4
    c3.3,0,4-1.3,1.3-4.7c-0.5-1-0.8-2.2-0.7-3.3c0.7-1.3,0.7-2,8-2h7.3l0.7,10.7c0.7,5.3,1.3,10.7,1.3,11.3s0.7,4,1.3,7.3
    c1.3,9.3,1.3,9.3,2.7,16C75.3,89.5,75.9,92.8,76.6,93.5z M73.9,36.2c0.7,0,1.3,2,1.3,4.7c0,2,1.3,7.3,2,10.7c0.7,4,1.3,7.3,1.3,7.3
    c0,0.7,0.7,2,2,4c1.3,4,2.7,8,5.3,15.3c1.3,4.7,1.3,6.7-0.7,9.3l-2,2.7l-1.3-2l-1.3-2.7c-0.1-0.7-0.6-1.3-1.3-1.3
    c-0.9-1.4-1.4-3-1.3-4.7c-0.4-1.5-1.1-2.8-2-4c-0.3-1.6-0.8-3.1-1.3-4.7c-0.1-2.3-0.5-4.5-1.3-6.7c-1.3-3.3-2.7-20.6-2-23.3
    C72.6,37.5,73.3,35.5,73.9,36.2L73.9,36.2z M57.9,33.5c2.6-0.1,5.2,0.6,7.3,2c4.7,3.3,4,3.3-4,3.3h-7.3v-6L57.9,33.5z M42.6,30.9
    c2.1,0.8,4.4,1.2,6.7,1.3l3.3,0.7v6l-2-0.7c-2-0.7-15.3-2-22.6-2c-2,0-2,0-2-2.7v-2.7L42.6,30.9z M24,33.5v2.7l-4-0.7
    c-1.4,0.1-2.7-0.2-4-0.7c0-1.3,4.7-4,6.7-4.7C24,30.2,24,30.2,24,33.5z M30,26.9h-3.3l0.7-3.3c0.7-1.3,1.3-3.3,2-3.3
    c0.4,0,0.7-0.3,0.7-0.6c0,0,0,0,0,0c0-0.7,4-5.3,4.7-5.3c1.3,0,1.3,3.3,0.7,5.3c-0.7,0.7-0.7,2.7-0.7,3.3C34,26.9,33.3,27.5,30,26.9
    L30,26.9z M36.6,25.5c0-4.7,2.7-12.7,4-13.3s6.7,1.3,8.7,2.7s2.7,6,2.7,10c-0.7,1.3-0.7,1.3-4.7,2c-2,0-5.3,0.7-7.3,0.7l-3.3,0.7
    L36.6,25.5z M54.6,4.2c4,1.3,5.3,4.7,6,10.7c0.7,8,0.7,14.7,0.7,14.7c-1.1,0-2.3-0.2-3.3-0.7l-3.3-1.3l-0.7-6c0-6-0.7-6.7-2-8
    c-1.3-0.7-3.3-2-4.7-2.7c-6.7-2-6-2-3.3-5.3C47.9,2.2,49.9,1.6,54.6,4.2L54.6,4.2z”/>
    </svg>

    #1569175
    David
    Staff
    Customer Support

    You need to remove the inline styles from your SVG.
    Here is an example of the Icons we added to GB:

    <svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm92.49 313l-20 25a16 16 0 01-22.49 2.5l-67-49.72a40 40 0 01-15-31.23V112a16 16 0 0116-16h32a16 16 0 0116 16v144l58 42.5a16 16 0 012.49 22.5z"></path></svg>

    See in the path we define: fill="currentColor"

    #1571522
    Heinrich

    hi david,

    sorry, i cannot find a solution. i am exporting the icons as svg from adobe illustrator.
    they are shown correctly on the page except the color. i tried to delete the <style> and added fill=currentcolor..nothing changes.

    i tried a complete new svg exported from illustrator. after setting the html-code all icons on the page were not longer white??? your icon example is very simple. the icon i tried to use is grouped?

    any idea how to proceed?

    #1572177
    Elvin
    Staff
    Customer Support

    Hi,

    Try this:

    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 90.5 105" style="enable-background:new 0 0 90.5 105;" xml:space="preserve">
    <path fill="currentColor" d="M42,4.2c-2,2-3.3,3.3-3.3,4S37.3,9.6,36,9.6c-2.6,1.5-4.9,3.5-6.7,6c-0.8,0.8-1.5,1.7-2,2.7
    c-1.6,2.1-2.5,4.7-2.7,7.3c0,1.3-0.7,1.3-3.3,2c-2,0-3.3,0.7-3.3,1.3s-2,2-3.3,3.3l-3.3,2.7l-0.7,5.3c0,3.3-0.7,6.7-1.3,7.3
    c0,0.7-0.7,6-1.3,10.7c-1.3,8-2,11.3-3.3,15.3C4,75.5,0,98.1,0,100.1c0,0.7,0,0.7,2,0.7c8.1,0.1,16.1,1,24,2.7
    c8,1.3,34.6,2,45.3,1.3c6-0.7,6-1.3,10-7.3c2.1-3.6,4.8-6.7,8-9.3c1.3-2,2-4,0-5.3c0,0-0.7-2.7-1.3-6c-1.3-5.3-2.7-9.3-8-24.6
    c-2-6-2.7-8.7-2.7-15.3c0-6,0-6.7-1.3-6.7c-0.7-0.7-4-0.7-6.7-0.7l-4.7,0.7l-0.7-8c-0.7-14-3.3-20-11.3-22C47.9-0.4,45.3,0.2,42,4.2
    z M76.6,93.5c0.7,2.7,0.7,5.3-0.7,6.7s-10,3.3-12.6,2.7c-1.3,0-9.3-0.7-16.7-0.7c-8,0-16-0.7-17.3-1.3c-2.5-0.2-4.9-0.7-7.3-1.3
    c-10-1.3-13.3-2-14-4c0-0.7-0.7-6.7-0.7-12.6c0-8.7,0.7-13.3,2-18.7c0.7-3.7,1.1-7.5,1.3-11.3c0.7-2,1.3-6,2-8.7
    c0.4-2.2,0.7-4.4,0.7-6.7c0-0.7,0-1.3,1.3-0.7c1.3,0,4,0.7,6,0.7l4,0.7l-0.7,4c-0.7,8-0.7,8,1.3,8s2,0,2-2c0.7-1.3,0-2-0.7-2
    C26,45.5,26,44.9,26,41.5v-4l2.7,0.7c2,0,6,0.7,9.3,0.7c3.4,0,6.7,0.5,10,1.3l4,0.7v2c-0.1,1.4-0.6,2.8-1.3,4c-1.3,3.3-0.7,4.7,2,4
    c3.3,0,4-1.3,1.3-4.7c-0.5-1-0.8-2.2-0.7-3.3c0.7-1.3,0.7-2,8-2h7.3l0.7,10.7c0.7,5.3,1.3,10.7,1.3,11.3s0.7,4,1.3,7.3
    c1.3,9.3,1.3,9.3,2.7,16C75.3,89.5,75.9,92.8,76.6,93.5z M73.9,36.2c0.7,0,1.3,2,1.3,4.7c0,2,1.3,7.3,2,10.7c0.7,4,1.3,7.3,1.3,7.3
    c0,0.7,0.7,2,2,4c1.3,4,2.7,8,5.3,15.3c1.3,4.7,1.3,6.7-0.7,9.3l-2,2.7l-1.3-2l-1.3-2.7c-0.1-0.7-0.6-1.3-1.3-1.3
    c-0.9-1.4-1.4-3-1.3-4.7c-0.4-1.5-1.1-2.8-2-4c-0.3-1.6-0.8-3.1-1.3-4.7c-0.1-2.3-0.5-4.5-1.3-6.7c-1.3-3.3-2.7-20.6-2-23.3
    C72.6,37.5,73.3,35.5,73.9,36.2L73.9,36.2z M57.9,33.5c2.6-0.1,5.2,0.6,7.3,2c4.7,3.3,4,3.3-4,3.3h-7.3v-6L57.9,33.5z M42.6,30.9
    c2.1,0.8,4.4,1.2,6.7,1.3l3.3,0.7v6l-2-0.7c-2-0.7-15.3-2-22.6-2c-2,0-2,0-2-2.7v-2.7L42.6,30.9z M24,33.5v2.7l-4-0.7
    c-1.4,0.1-2.7-0.2-4-0.7c0-1.3,4.7-4,6.7-4.7C24,30.2,24,30.2,24,33.5z M30,26.9h-3.3l0.7-3.3c0.7-1.3,1.3-3.3,2-3.3
    c0.4,0,0.7-0.3,0.7-0.6c0,0,0,0,0,0c0-0.7,4-5.3,4.7-5.3c1.3,0,1.3,3.3,0.7,5.3c-0.7,0.7-0.7,2.7-0.7,3.3C34,26.9,33.3,27.5,30,26.9
    L30,26.9z M36.6,25.5c0-4.7,2.7-12.7,4-13.3s6.7,1.3,8.7,2.7s2.7,6,2.7,10c-0.7,1.3-0.7,1.3-4.7,2c-2,0-5.3,0.7-7.3,0.7l-3.3,0.7
    L36.6,25.5z M54.6,4.2c4,1.3,5.3,4.7,6,10.7c0.7,8,0.7,14.7,0.7,14.7c-1.1,0-2.3-0.2-3.3-0.7l-3.3-1.3l-0.7-6c0-6-0.7-6.7-2-8
    c-1.3-0.7-3.3-2-4.7-2.7c-6.7-2-6-2-3.3-5.3C47.9,2.2,49.9,1.6,54.6,4.2L54.6,4.2z"/>
    </svg>

    This is also using fill="currentColor" meaning its dynamic depending on what you set on the Headline Block’s color settings.

    If you don’t want it to be dynamic, replace the “currentColor” value to a fixed value, example fill="red".

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.