-
AuthorPosts
-
April 15, 2018 at 2:50 am #942115
Hi,
I have inserted my social media icons in a text widget.
However and resized them to 44 x 44.
It has increased the gap at the bottom of the footer.
Please can you advise how can I reduce the gap or if there is a better way to add the social icons in the footer.
Thank you.
April 15, 2018 at 3:03 am #942116Since then I have found the following code
<li class=”social_bookmarks_youtube av-social-link-youtube social_icon_3″><span class=”avia_hidden_link_text”>YouTube</span>
which seems to be doing the job
but I am struggling with two things
1). Changing the colours of icons to their original colours
2). Changing the icons themselves – currently I am only getting LinkedIn icon – please can you tell me how can I access the icons for Facebook, YouTube, Instagram and Twitter.Thank you.
April 15, 2018 at 8:31 am #942153can you try this in quick css :
#footer .social_bookmarks { position: relative; left: -8px; top: -15px; } #footer .social_bookmarks a::before { font-size: 20px; color: #fff !important; }
maybe it is better to define the link color in your enfold options – general styling – footer : highlight color
April 15, 2018 at 8:53 am #942154how did you place the social icons there – by text widget
for a while i wrote a sozial-bookmarks widget for that – but it only places the bookmarks set on Enfold Options dialog –
you can see it on my testing page in the footer on the right column: https://webers-testseite.de
So if you don’t like to show a different set than on top this would only work if you define all and get rid of some in the footer via display:none.April 15, 2018 at 12:30 pm #942178Hi @Guenni007
Thank you again for your help.
I inserted the following code in the text widget in the footer (I found this on another post)
Follow us on Social Media
<ul class=”noLightbox social_bookmarks icon_count_3″>
<li class=”social_bookmarks_mail av-social-link-mail social_icon_1″>(Email address hidden if logged out) ?subject=Inquiry from WGM Website”><span class=”avia_hidden_link_text”>Mail</span>
<li class=”social_bookmarks_linkedin av-social-link-linkedin social_icon_2″><span class=”avia_hidden_link_text”>Linkedin</span>
<li class=”social_bookmarks_youtube av-social-link-youtube social_icon_3″><span class=”avia_hidden_link_text”>YouTube</span>However the icons don’t change. I want to have the following profiles in the footer
Facebook | Instagram | Twitter | YouTube
In the header I only want Facebook and YouTube – But their circles aren’t looking right.
Looking forward to your help.
April 15, 2018 at 12:45 pm #942183your code has no closing tags at all.
a ul opens but not closing
a li the same try this :<ul class=”noLightbox social_bookmarks icon_count_3″> <li class=”social_bookmarks_mail av-social-link-mail social_icon_1″> (Email address hidden if logged out) ?subject=Inquiry from WGM Website”><span class=”avia_hidden_link_text”>Mail</span></li> <li class=”social_bookmarks_linkedin av-social-link-linkedin social_icon_2″><span class=”avia_hidden_link_text”>Linkedin</span></li> <li class=”social_bookmarks_youtube av-social-link-youtube social_icon_3″><span class=”avia_hidden_link_text”>YouTube</span></li> </ul>
April 15, 2018 at 12:49 pm #942184if it works – don’t know why if you haven’t set the social things on Enfold options – try:
just a moment i did have your wrong quotatin marks
<ul class="noLightbox social_bookmarks icon_count_5"> <li class="social_bookmarks_mail av-social-link-mail social_icon_1"> (Email address hidden if logged out) ?subject=Inquiry from WGM Website"><span class="avia_hidden_link_text">Mail</span></li> <li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><span class="avia_hidden_link_text">Facebook</span></li> <li class="social_bookmarks_instagram av-social-link-instagram social_icon_3"><span class="avia_hidden_link_text">Instagram</span></li> <li class="social_bookmarks_twitter av-social-link-twitter social_icon_4"><span class="avia_hidden_link_text">Twitter</span></li> <li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><span class="avia_hidden_link_text">YouTube</span></li> </ul>
now you can copy paste
- This reply was modified 6 years, 6 months ago by Guenni007.
April 15, 2018 at 12:51 pm #942185April 15, 2018 at 12:56 pm #942188yes because you haven’t used the code tag here on board i have transfered your wrong quotation marks.
<ul class="noLightbox social_bookmarks icon_count_5"> <li class="social_bookmarks_mail av-social-link-mail social_icon_1"> (Email address hidden if logged out) ?subject=Inquiry from WGM Website"><span class="avia_hidden_link_text">Mail</span></li> <li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><span class="avia_hidden_link_text">Facebook</span></li> <li class="social_bookmarks_instagram av-social-link-instagram social_icon_3"><span class="avia_hidden_link_text">Instagram</span></li> <li class="social_bookmarks_twitter av-social-link-twitter social_icon_4"><span class="avia_hidden_link_text">Twitter</span></li> <li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><span class="avia_hidden_link_text">YouTube</span></li> </ul>
April 15, 2018 at 1:00 pm #942190But i believe that this couldn’t work –
you have to have the social media activated on Enfold Options dialog – without these links could not work.April 15, 2018 at 1:05 pm #942192Hi @Guenni007
I have enabled all the social profiles.
They still not showing up in the footer.
I have copied your code into text widget in the footer.
April 15, 2018 at 1:09 pm #942193now put in the widget:
<ul class="noLightbox social_bookmarks icon_count_4"><li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"><a target="_blank" href="https://www.facebook.com/UNITE4HUMANITY" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li><li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a target="_blank" href="https://www.instagram.com/unite4humanity_/" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li><li class="social_bookmarks_twitter av-social-link-twitter social_icon_3"><a target="_blank" href="https://twitter.com/Unite4Humanity_" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_youtube av-social-link-youtube social_icon_4"><a target="_blank" href="https://www.youtube.com/channel/UC3HWLg_brLlmepvvdGKm4SA" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube"><span class="avia_hidden_link_text">Youtube</span></a></li></ul>
April 15, 2018 at 1:11 pm #942194and afterwards ( you don’t want to have both footer and socket links) goto enfold options – footer and deselect social icons there
April 15, 2018 at 1:16 pm #942195You are a legend @Guenni007
It worked …
Few questions if you can please help me.
1). Donate Button Header Menu – How can I create a button with a little shadow?
2). Social Icons in the header are too close to each other … how can I create a space between them
3). How can I create donate button in mobile headerFinally
Thank you very much for all your help in sorting out stuff for this website. Without your help it wouldn’t have been same.
I appreciate that.
April 15, 2018 at 1:21 pm #942198I am currently copying this code for every page to create space between the icon list.
How can I create this code to apply on all pages.
.page-id-246 .av-iconlist-small li {
margin-bottom: 15px;
}Thank you.
April 15, 2018 at 1:42 pm #942200one after the other
1)
#menu-item-668 a .avia-menu-text { box-shadow: 2px 2px 5px #333; }
…
April 15, 2018 at 1:45 pm #942202by the way – on Enfold Options – Header – Header behavior – please checkmark that “Let logo and menu position adapt to browser window”
And have a look if this isn’t better for your big wide menu!On Main Menu – what do you have on : “Menu Items for mobile” ?
April 15, 2018 at 3:13 pm #942214Hi @Guenni007,
Thank you again for your help.
My mobile menu is same as the other main menu but just as burger menu.
My menu is not working properly and is overlaying everything on ipad (both portrait and landscape views)
PS. I have ticked the option in the header option and added your code for the shadow.
April 15, 2018 at 7:38 pm #942268I came across this post for social icons in the mobile menu
I have added the code in function.php on u4h.org.uk/home and as you can see the icons are there but they are on different menu levels.
How can I make them in one level?
How can I show them at the bottom of the menu instead of at the top of the menu?Thank you for your help.
April 15, 2018 at 8:57 pm #942284see post there – i answered on that thread
you can see result here – dont know why on your site the hover effect is like it is:
https://webers-testseite.de/weber/
- This reply was modified 6 years, 6 months ago by Guenni007.
April 16, 2018 at 12:16 am #942352Sorry @guenni007
I feel like I am asking you instead of Kriesi guys … I am sure they will be thankful to you as I am.
I want to create a heading
“100% Donation Policy” with its link to the page holding this policy …
Is there a way to create a banner with just that text, which shows on top of every page on mobile and below the header image on desktop on every page.
Looking forward to your response.
April 16, 2018 at 10:21 pm #942788Hi,
That would require to add the headline on the template files and then make it visible ONLY on mobile.
Let us know if you do try that and if it will work.
Best regards,
BasilisApril 16, 2018 at 10:52 pm #942800can you please insert this into functions.php of your child-theme:
add_action('ava_main_header', function() { echo '<div class="button-on-top">'; echo do_shortcode("[av_button_big label='Donate' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]"); echo '</div>'; });
and this to quick css
#top .av-fullscreen-button .avia-button-fullwidth { border-radius: 0; padding: 30px 0px; }
maybe this looks better even on desktop if it is on top
April 16, 2018 at 11:02 pm #942803Thanks for that.
I have added the codes in the respective places.
But this button will only look better on mobile view and if it is small … is it not possible to have something like this
http://www.almustafatrust.org (on mobile display) with 100% Donation Policy and Donate Button?
or something like http://www.unicef.org.uk
Thank you for your help.
April 16, 2018 at 11:11 pm #942807isn’t it what you got ! before ???
this is under the header ( i changed the div to have an id too)
add_action('ava_after_main_title', function() { echo '<div id="button-on-top">'; echo do_shortcode("[av_button_big label='Donate' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]"); echo '</div>'; });
April 16, 2018 at 11:14 pm #942813I am happy with the layout I have right now … but yes I would love to have a top line on mobile to say 100% Donation Policy with a small donate button.
But if it is not possible then I am happy with the layout I have right now …
The button you suggested is a right idea but unfortunately will look bit out of place.
April 16, 2018 at 11:26 pm #942817don’t forget the css in quick css:
#top #button-on-top .avia-button-fullwidth { padding: 20px 0px; } #button-on-top .avia_iconbox_title { font-size: 20px !important; }
and :
add_action('ava_main_header', function() { if(wp_is_mobile()){ echo '<div id="button-on-top">'; echo do_shortcode("[av_button_big label='100% Donation Policy' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]"); echo '</div>'; } });
you see the label= that is the text in the button
you see that in the code are custom_bg color and color_hover (hex-codes) so you can change yourself.and if this fits for you – it makes no sense that you have on mobile this donate menu button:
.avia_mobile #menu-item-668 { display: none; }
April 16, 2018 at 11:41 pm #942820just change code from above – because there is the wp_is_mobile check addition
April 16, 2018 at 11:42 pm #942821Brilliant … it looks very nice on mobile and exactly the way I want it.
How can I make it just mobile only view.
With Desktop I think I will add something below the header image.
April 16, 2018 at 11:51 pm #942824i wrote it in the topic above:
take the new code:
add_action('ava_main_header', function() { if(wp_is_mobile()){ echo '<div id="button-on-top">'; echo do_shortcode("[av_button_big label='100% Donation Policy' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]"); echo '</div>'; } });
and to have not the donate button on menu ( for those mobiles with bigger screen sizes as 768/990px : ipad, ipad2 etc on landscape view) put this in quick css:
.avia_mobile #menu-item-668 { display: none; }
-
AuthorPosts
- The topic ‘Social Icons in the Footer’ is closed to new replies.