Icon position and loading time - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
December 21, 2014 at 4:02 pm #371273

aph80
Participant

On the homepage of my website eiweisspulver-test.com I use a lot of icons.

My first question is concerning the small colorful icons I use as inline elements (magnifier, heart, …). I would like to align them centered with the percentage value next to each icon on the right side in the same line. When I use the centered position of the icon the number jumps to the next line. How can I do that?

My second question is regarding the loading time of the icons.When you scroll down you see more icons used in a table and in a slider. It takes a few seconds until they are all viewed. Is there a way to fix this?

I also checked the pagespeed with Googles tool. All in all it seems okay but two things might need some improvement.

First is browser caching. This might have nothing to do with the theme and I could to it independently?
The second message says I should remove JavaScript- und CSS-ressources in content “above the fold” that are blocking the rendering. Here the original message in German:

avaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 3 blockierende Skript-Ressourcen und 10 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.
Keine der Seiteninhalte “above the fold” (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.
Entfernen Sie JavaScript, das das Rendering blockiert:

http://www.eiweisspulver-test.com/…-includes/js/jquery/jquery.js?ver=1.11.1
http://www.eiweisspulver-test.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1
http://www.eiweisspulver-test.com/…nt/themes/enfold/js/avia-compat.js?ver=2

Optimieren Sie die CSS-Darstellung für die folgenden URLs:

http://fonts.googleapis.com/css?family=Open+Sans:400,600
http://www.eiweisspulver-test.com/…/plugins/wp-polls/polls-css.css?ver=2.68
http://www.eiweisspulver-test.com/…content/themes/enfold/css/grid.css?ver=2
http://www.eiweisspulver-test.com/…content/themes/enfold/css/base.css?ver=2
http://www.eiweisspulver-test.com/…ntent/themes/enfold/css/layout.css?ver=2
http://www.eiweisspulver-test.com/…t/themes/enfold/css/shortcodes.css?ver=2
http://www.eiweisspulver-test.com/…ld/js/aviapopup/magnific-popup.css?ver=1
http://www.eiweisspulver-test.com/…ment/skin-1/mediaelementplayer.css?ver=1
http://www.eiweisspulver-test.com/…ynamic_avia/enfold.css?ver=5495fbe406a27
http://www.eiweisspulver-test.com/…ntent/themes/enfold/css/custom.css?ver=2

December 22, 2014 at 5:09 pm #371577
Elliott
Inactive Moderator
Hey aph80!

1. Try dragging a codeblock element over to your content and add this inside.
```
<style type = "text/css">
.slide-entry-excerpt > p > span { margin-left: 40px !important; }
</style>
```
2. Try this out, https://kriesi.at/support/topic/enfold-remove-the-fade-animation-of-icons-loading/.

Cheers!
Elliott
December 22, 2014 at 5:52 pm #371608

Andy
Inactive Moderator

Hi aph80!

1.) What do you mean? For me icon + number are centered and on the same line:

Please provide a screenshot/mockup of what you want to achieve, so we can get a clear idea.

2.) Please refer to this post: https://kriesi.at/support/topic/slow-or-stop-animation-on-icon/#post-365822

3.) Google Page Speed is very strict and you couldn’t satisfy it at all, only when you remove almost every effect and feature of a theme. Enfold is a very advanced one and page speed is definitely one thing Kriesi is aware of :).
However, you can increase page speed using different plugins and this site may give you more information: http://diythemes.com/thesis/improve-website-pagespeed/

Regards,
Andy

December 22, 2014 at 6:06 pm #371619

aph80
Participant

Hey Elliot,

thank you very much! It works very well, but only until the separator. So the last icon is still on the left. I tried to put the code into the slider after the separator, as well. First it works but whenever one changes something in the slider element, the code disappears. What can I do?

Cheers,

Arkadi

December 22, 2014 at 6:11 pm #371623

aph80
Participant

Hey Andy,

thanks for the information on point two and three. I have a look at it.

I just used the code from Elliot, that´s why you see it centered :)

Best regards,

Arkadi

December 22, 2014 at 6:19 pm #371628

aph80
Participant

I just noticed that the effect of the code Elliot provided takes place on the whole page. There is second slider with icons on the same page where I want the regular alignment. Is there any code to reverse the effect after the first slider?

December 22, 2014 at 9:11 pm #371791
Elliott
Inactive Moderator
Hey!

Sorry, try this out to target just the first one.
```
.av_two_third .slide-entry-excerpt > p > span {
    margin-left: 40px !important;
}
```
Regards,
Elliott
December 22, 2014 at 9:30 pm #371808

aph80
Participant

Thank you Elliott! This works fine. Do you have a solution for the last icon under the separator?

December 22, 2014 at 11:04 pm #371865
Elliott
Inactive Moderator
Hey!

Try doing this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, and then add a class of “my_custom_class” to the icon and then add this to your custom CSS.
```
.my_custom_class { position: relative !important; margin-left: 20px !important; }
```
If that’s not correct then take a screenshot and highlight what your trying to do so we can get a better idea.

Cheers!
Elliott
December 23, 2014 at 12:13 am #371894

aph80
Participant

I did what you said but it doesn´t change anything. Here is a screenshot:

There you can see the black arrow icons and percentage values next to them are aligned left. They should be centered, as well.

Cheers,
Arkadi

December 23, 2014 at 5:16 pm #372143

Elliott
Inactive Moderator

Hi!

I didn’t see any classes added to them in the source code. Send us a WordPress login.

Cheers!
Elliott

December 23, 2014 at 9:03 pm #372265

aph80
Participant

Hi Elliot,

I tried it again and now it works. Last time I used a dot in the class name and maybe that was the problem. Anyway, thank you very much for your help and have nice Christmas days!

Cheers,
Arkadi
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Icon position and loading time’ is closed to new replies.