Tagged: social icons
-
AuthorPosts
-
May 30, 2014 at 1:05 am #272178
Hi guys, i was wondering how to add vertical separators between posts in blog portfolio grid here is screen shot http://abolengo.com.ar/anuevo/wp-content/uploads/2014/05/Novedades-correciones2.jpg and here is the site http://abolengo.com.ar/anuevo
Also want to add my own social icons, how i do it?
thanks
- This topic was modified 10 years, 5 months ago by smorrone.
May 30, 2014 at 6:46 pm #272521Hey smorrone!
You can change the default icons used for things with this: http://kriesi.at/documentation/enfold/change-icon-used-for-standard-theme-elements/
And add in your own icons with http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/ .
If you wanted to use image based icons then I would suggest using a third party plugin instead since the theme only uses font based icons.
For the separator, you can do something like this:
.home .avia-builder-el-11:before, .home .avia-builder-el-15:before{ content: ''; height: 220px; border-left: 2px solid #B83B3B; display: block; position: absolute; left: -30px; visibility: visible; }
It doesn’t have full browser support since its using :before but it will work in most modern browsers. Just make sure that you put it inside a desktop only media query (see example in the css>custom.css file of the theme files) so that it doesn’t show up on mobile/tablets unless you want it to of course.
The css is targeting those specific elements on that home page so if you move things around it would need to be changed.
Best regards,
DevinMay 30, 2014 at 7:03 pm #272530Hi Devin!
The vertical separators are for the blog grid view here http://abolengo.com.ar/anuevo/?page_id=3071 not in the home, so where i have to put that code?The other thing any plugin suggested to use image as icon?
thanksJune 2, 2014 at 3:04 pm #273274Hey!
Please try changing the code to following one
.page-id-3071 .slide-loop-2:before, .page-id-3071 .slide-loop-3:before{ content: ''; height: 220px; border-left: 2px solid #B83B3B; display: block; position: absolute; left: -30px; visibility: visible; }
Cheers!
YigitJune 2, 2014 at 3:30 pm #273286Hi Yigit that worked fine!
I have one thing more, i want the blog post title and caption to be above de image, not below, how can i acheive that?
thanksJune 2, 2014 at 3:59 pm #273299Hi!
Please refer to Josue’s post here – https://kriesi.at/support/topic/move-featured-image-below-post-title-date-etc/#post-185070
Regards,
YigitJune 2, 2014 at 4:56 pm #273338Hi Yigit, i followed the instructions in josue´s post. But nothing happened, nothing changes, everytinhg is still below the images http://abolengo.com.ar/anuevo/?page_id=3071
June 2, 2014 at 4:58 pm #273339ps i am working with a child them, i don´t know if that changes something
June 2, 2014 at 10:38 pm #273552Hi,
Try adding this at the very end of your child theme functions.php file:
function add_custom_script(){ ?> <script> jQuery(window).load(function(){ jQuery('.page article.slide-entry').each(function(){ jQuery(this).find('.slide-meta').after(jQuery(this).find('.slide-image').detach()); }) }); </script> <?php } add_action('wp_footer', 'add_custom_script');
Regards,
JosueJune 2, 2014 at 10:48 pm #273556This reply has been marked as private.June 2, 2014 at 11:06 pm #273567Fixed:
http://abolengo.com.ar/anuevo/There were some errors in the code:
http://abolengo.com.ar/anuevo/wp-admin/theme-editor.php?file=functions.php&theme=enfold-child&scrollto=0&updated=trueBest regards,
JosueJune 2, 2014 at 11:24 pm #273587This reply has been marked as private.June 2, 2014 at 11:25 pm #273588Añade esto al Quick CSS:
li.social_bookmarks_abolengo.av-social-link-abolengo a { font-size: 36px; }
June 2, 2014 at 11:40 pm #273600Funciónó bien hasta que hice un cambio en una de las páginas, usando el editor nada de código y volvió a verse chico como antes…
June 2, 2014 at 11:42 pm #273602ya está es que agregué otro ícono y les quedó cambiado el orden
Cómo los ubico como en la imagen siguiente
http://abolengo.com.ar/anuevo/wp-content/uploads/2014/06/social-icons.png
gracias
June 2, 2014 at 11:53 pm #273611Prueba con esto:
.social_bookmarks{ margin-top: 25px; } .social_bookmarks li a:after{ content: ""; width: 1px; background: #cad2d4; height: 20px; position: absolute; right: -4px; top: 4px; } .social_bookmarks li:last-child a:after{ content: ""; background: transparent; }
June 2, 2014 at 11:57 pm #273616Aparecieron las lineas verticales pero siguen en la misma posición
June 2, 2014 at 11:58 pm #273618Ponle important a esta parte:
.social_bookmarks{ margin-top: 25px !important; }
June 3, 2014 at 12:06 am #273621Éxito Josué! muchas gracias! Tengo otra consulta en relación a espacios e interlineado en texto, la coloco aquí o abro otro thread?
June 3, 2014 at 12:08 am #273622De nada, seria mejor en otro post y ponlo en inglés también, de esa forma todo el equipo te puede ayudar :)
June 3, 2014 at 12:09 am #273624Perfect, muchas gracias!
-
AuthorPosts
- The topic ‘Vertical separators’ is closed to new replies.