- This topic has 18 replies, 6 voices, and was last updated 2 years, 8 months ago by Elvin.
-
AuthorPosts
-
December 4, 2020 at 5:43 am #1567104Heinrich
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 advanceDecember 4, 2020 at 5:54 am #1567128ElvinStaffCustomer SupportHi,
The site details included in the Private information area doesn’t seem to work, can you confirm/check?
Let us know.
December 4, 2020 at 5:57 am #1567130Heinrichhi elvin this is only the htpasswordprotection, because the site shall not bepublic yet.
if you need wp-admin, i have to create your accountDecember 4, 2020 at 6:10 am #1567149ElvinStaffCustomer SupportHi,
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/geuoWyq4Unless you mean its not working prior to it being commented out? Let us know.
December 4, 2020 at 6:15 am #1567158Heinrichhi 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.December 4, 2020 at 11:55 am #1567756TomLead DeveloperLead DeveloperHi there,
Try this instead:
.reverse-icon .gb-headline-text { order: -1; margin-right: 10px; }
December 4, 2020 at 12:11 pm #1567780Heinrichtks 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
December 4, 2020 at 5:38 pm #1567965LeoStaffCustomer SupportHave you tried the icon color option?
https://docs.generateblocks.com/article/headline-overview/#icon-colorDecember 4, 2020 at 9:44 pm #1568082Heinrichhi leo, yes, of course. but this option doesn
t 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 doesn
t appear in the frontend.December 5, 2020 at 6:21 am #1568356DavidStaffCustomer SupportHi there,
the Icon field in GenerateBlocks is sanitized which stops it from outputting potentially unsecure content. Why not use an SVG ?
December 6, 2020 at 1:39 am #1569042Heinrichhi 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?
December 6, 2020 at 1:40 am #1569043Heinrichi 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” 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”>
<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>December 6, 2020 at 5:25 am #1569175DavidStaffCustomer SupportYou 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"
December 8, 2020 at 5:54 am #1571522Heinrichhi 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?
December 8, 2020 at 4:38 pm #1572177ElvinStaffCustomer SupportHi,
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"
. -
AuthorPosts
- You must be logged in to reply to this topic.