-
AuthorPosts
-
August 18, 2016 at 8:09 pm #674335
Hi guys,
I’ve seen this thread here, but it’s closed…
https://kriesi.at/support/topic/avia-principles-feature/#post-409094Just wondering: Are you going to release this feature any time soon?
If not: no worries. I’d just like to know if it’s worthwhile waiting.Thanks a lot!
August 18, 2016 at 8:12 pm #674336i think no – this seem to be one of those nice things which Kriesi exceptionally does not share:
Hi!
Sorry we currently dont share this element since its in no way easy to edit. It also adds a little uniqueness to our site which is really necessary as a theme provider using a template ;D
We will probably share the element in the future though. In any case sorry for that :)
Kriesithats very sad indeed – nice Visualisation
August 18, 2016 at 8:17 pm #674338Well, Kriesi’s own answer (from last year) which you just quoted, contradicts your answer:
“We will probably share the element in the future”.August 19, 2016 at 7:29 am #674557you see these ;D and :)
it tells its own taleAugust 19, 2016 at 4:32 pm #674814I appreciate your interpretation of these smileys, but would prefer a more official answer from Kriesi’s team. Thanks!
August 22, 2016 at 1:19 pm #675696Hi,
We have asked Kriesi once again if they will be added any time soon. He also mentioned that these features are not so user friendly. Therefore, they might never be available. Let us wait to hear from him if there is any news :)
Thanks @Guenni007 ;D
Best regards,
YigitAugust 22, 2016 at 8:08 pm #676006btw. you can reach similar successes only with enfold functions and a bit css !
See here: http://webers-testseite.de/ikom/circles/
- This reply was modified 8 years, 4 months ago by Guenni007.
August 22, 2016 at 8:49 pm #676025August 23, 2016 at 12:45 pm #676354Very cool – well done!!
August 23, 2016 at 1:56 pm #676403August 23, 2016 at 7:02 pm #676612the circle itself is not so tricky but animation and hover states are a bit more complicated.
What i have done is a container with code-block in it
in this codeblock i place the following code for the first 5 icon circel:
The container where code-block is in gets the class “circle “ but you can take ever other class name you want[av_font_icon icon='uf1fd' font='fontawesome' style='border' caption='Tradition' link='manually,#' linktarget='' size='60px' position='center' color='' custom_class='circle1-5'][/av_font_icon] [av_font_icon icon='uf0c0' font='fontawesome' style='border' caption='Leadership' link='manually,#' linktarget='' size='60px' position='center' color='' custom_class='circle2-5'][/av_font_icon] [av_font_icon icon='uf085' font='fontawesome' style='border' caption='Workflow' link='manually,#' linktarget='' size='60px' position='center' color='' custom_class='circle3-5'][/av_font_icon] [av_font_icon icon='uf0e8' font='fontawesome' style='border' caption='Organigramm' link='manually,#' linktarget='' size='60px' position='center' color='' custom_class='circle4-5'][/av_font_icon] [av_font_icon icon='uf085' font='fontawesome' style='border' caption='Workflow' link='manually,#' linktarget='' size='60px' position='center' color='' custom_class='circle5-5'][/av_font_icon] <div class="circlecaption"> <span class="circle1-5"> <strong>Tradition</strong> - kann für Ihre Firma bedeutend sein </span> <span class="circle2-5"> <strong>Leadership</strong> - überall da wo es dem Wohle der Firma dient </span> <span class="circle3-5"> <strong>Workflow</strong> - immer im Auge behalten </span> <span class="circle4-5"> <strong>Organisation</strong> - hält die Firma zusammen </span> <span class="circle5-5"> <strong>Cashflow</strong> - ganz wichtig für den Schlaf </span> <img class="circlelogo" src="http://webers-testseite.de/ikom/wp-content/uploads/WordpressWebdesign2.png" alt="WordpressWebdesign" /> </div>
that was the starting point.
Than there is primary a bit of math knowledge and a lot of positioning because here it is important that relative and absolute positioning is the trick.August 23, 2016 at 7:05 pm #676613The 5 Circle Case:
Some Positioning:
/* the circle itself border-radius has to be more than 50% of height and width */ .circle { border: 2px solid #059 !important; border-radius: 250px; display: block; height: 500px; overflow: visible; padding: 0 !important; width: 500px; position: relative; margin: 60px } /* if you like to have a background-image in the circle, with less opacity */ .circle::before { background-color: transparent; background-image: url("http://webers-testseite.de/ikom/wp-content/uploads/sh_284363741.jpg"); border-radius: 250px; content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; } /* if you don't like to change the code itself you can set the icon size here */ .circle .av_font_icon .av-icon-char { font-size: 50px !important; line-height: 50px !important; width: 50px !important; } /* this is the class from the code not the caption set by icon element and determines the position where the description is shown */ .circlecaption { position: relative; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } /* you see in that code that these are the single text elements of each Icon */ .circlecaption span { display: none; width: 250px; font-size: 16px; text-align: center } /* this is the logo or image in the center - hover states must follow than */ .circlecaption img { display: block; width: 250px; } /* very nice gimmick - the tilde (swung dash) is a special selector - read yourself */ /* it is called: General Sibling Combinator */ .circle .av_font_icon.circle1-5:hover ~ div.circlecaption span.circle1-5, .circle .av_font_icon.circle2-5:hover ~ div.circlecaption span.circle2-5, .circle .av_font_icon.circle3-5:hover ~ div.circlecaption span.circle3-5, .circle .av_font_icon.circle4-5:hover ~ div.circlecaption span.circle4-5, .circle .av_font_icon.circle5-5:hover ~ div.circlecaption span.circle5-5 { display: block; background: rgba(255,255,255,0.8); padding: 5px; border-radius: 5px } /* hover effects for the hovered links */ .circle .av_font_icon.circle1-5:hover a { background: #BF00FF; color: #fff !important } .circle .av_font_icon.circle2-5:hover a { background: #0080FF; color: #fff !important } .circle .av_font_icon.circle3-5:hover a { background: #00FF00; color: #fff !important } .circle .av_font_icon.circle4-5:hover a { background: #FFFF00; color: #000 !important } .circle .av_font_icon.circle5-5:hover a { background: #FF0000; color: #fff !important } /* hovering the icons - let the logo in the circle disappear */ .circle .av_font_icon:hover ~ div.circlecaption .circlelogo { display: none !important; } /* positioning of each icon in the uniform pentagon - so most positions are calculated and nearly not influenced*/ /* - by circle dimensions - 50px is here icon-font-size - but this is a lot trial and error */ .circle .av_font_icon a , .circle .av_font_icon span { background-color: #fff; } .av_font_icon.circle1-5 { position: absolute; top: calc(0px - 55px); left: calc(0px + 195px); } .av_font_icon.circle2-5 { position: absolute; top: calc(0px + 118px); left: calc(0px + 433px); } .av_font_icon.circle3-5 { position: absolute; top: calc(0px + 397px); left: calc(0px + 342px) } .av_font_icon.circle4-5 { position: absolute; top: calc(0px + 397px); left: calc(0px + 48px); } .av_font_icon.circle5-5 { position: absolute; top: calc(0px + 118px); left: calc(0px - 55px); }
here some code for responsive case:
@media only screen and (max-width: 720px) { .circle .av_font_icon .av-icon-char { font-size: 40px !important; line-height: 40px !important; width: 40px !important; } .circle .av_font_icon .av-icon-char { padding: 20px !important; } .circle { height: 350px; margin: 40px; overflow: visible; width: 350px; border-radius: 190px; } .av_font_icon.circle1-5 { position: absolute; top: calc(0px - 35px); left: calc(0px + 135px); } .av_font_icon.circle2-5 { position: absolute; top: calc(0px + 81px); left: calc(0px + 301px); } .av_font_icon.circle3-5 { position: absolute; top: calc(0px + 277px); left: calc(0px + 238px) } .av_font_icon.circle4-5 { position: absolute; top: calc(0px + 277px); left: calc(0px + 32px); } .av_font_icon.circle5-5 { position: absolute; top: calc(0px + 81px); left: calc(0px - 32px); } }
- This reply was modified 8 years, 4 months ago by Guenni007.
August 23, 2016 at 7:29 pm #676620and this is for rotating icons on hovering :
.circle .av_font_icon:hover .av-icon-char { animation-name: iconrotate; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: 2; animation-play-state: running; animation-direction: alternate; /* Firefox: */ -moz-animation-name: iconrotate; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 2; -moz-animation-play-state: running; -moz-animation-direction: alternate; /* Safari and Chrome: */ -webkit-animation-name: iconrotate; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 2; -webkit-animation-play-state: running; -webkit-animation-direction: alternate; -webkit-backface-visibility: visible } @keyframes iconrotate { from {transform:rotateY(0deg);} to {transform:rotateY(180deg);} } @-moz-keyframes iconrotate /* Firefox */ { from {-moz-transform:rotateY(0deg);} to {-moz-transform:rotateY(180deg);} } @-webkit-keyframes iconrotate /* Safari and Chrome */ { from {-webkit-transform:rotateY(0deg);} to {-webkit-transform:rotateY(180deg);} }
you can take every transform – here it is a rotation on Y-Achsis
August 23, 2016 at 7:38 pm #676624Bingo ! See here on top : Link
4 or 6 Icon Circles : most is the same code-block has one less or one more circle.
And only Positioning of the icons is the work to do – all the rest is similar to 5 Icon Circle !In the Code-Block you only have to complete Link, link-target and fill in you own Caption
- This reply was modified 8 years, 4 months ago by Guenni007.
August 24, 2016 at 12:41 pm #676919Please take the new code because i put it on math basis – declaration see here : link
August 24, 2016 at 11:21 pm #677267One more on that: the left shift of the icons is a bit tricky – this is in dependency to caption length.
If the length of the caption under the icon is to big the left position has to be corrected.I tried to place the av-icon-char in an absolute way (only the circles with the icon) but than positioning of the caption is not possible.
August 25, 2016 at 11:17 am #677430OK
- This reply was modified 8 years, 4 months ago by Guenni007.
August 25, 2016 at 3:52 pm #677589August 25, 2016 at 4:48 pm #677654And don’t tell Christian that i can copy his circles :)
August 25, 2016 at 10:52 pm #677818 -
AuthorPosts
- You must be logged in to reply to this topic.