-
AuthorPosts
-
August 11, 2014 at 11:22 am #302474
I would like the social share buttons to be in colour and then change to white on hover over, any ideas how I do this?
Taaaaaa!
PS: Also how do I change the wording of …. ‘Share this entry’ to something different
- This topic was modified 10 years, 4 months ago by Jamie A.
August 11, 2014 at 11:32 am #302481Hi Jamie A!
Which social icons are you using? You can post the link to your website and we can send you custom CSS code for social icons you are using.
Please add following code to Functions.php file in Appearance > Editorfunction new_share_title() { $output = "Your new share title here"; return $output; } add_filter('avia_social_share_title', 'new_share_title');
Regards,
YigitAugust 11, 2014 at 11:49 am #302494Sorry yigit my site is http://shutterliving.com/yoga-grand-palais-paris/
Also could you tell me how to CENTRE the text over the buttons~?
August 11, 2014 at 12:14 pm #302507Hi Jamie!
1- Your website is not down appearantly but i cannot connect to it :/ Can you tell me which social icons you are using? Or maybe you can post a screenshot? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.
2- Please add following code to Quick CSSh5.av-share-link-description { text-align: center; }
Regards,
YigitAugust 11, 2014 at 12:39 pm #302524Very strange that you cant see the website may be try access this post instead: http://shutterliving.com/british-royal-guard/
August 11, 2014 at 12:47 pm #302533Hey!
Please add following code to Quick CSS as well
#top #wrap_all .av-social-link-facebook:hover a, #top #wrap_all .av-social-link-twitter:hover a, #top #wrap_all .av-social-link-gplus:hover a, #top #wrap_all .av-social-link-pinterest:hover a { color: #888; background-color: white; } #top #wrap_all .av-social-link-facebook a { color: #fff; background-color: #37589b; } #top #wrap_all .av-social-link-twitter a { color: #fff; background-color: #46d4fe; } #top #wrap_all .av-social-link-gplus a { color: #fff; background-color: #de5a49; } #top #wrap_all .av-social-link-pinterest a { color: #fff; background-color: #cb2027; }
Cheers!
YigitAugust 11, 2014 at 1:02 pm #302547This worked perfectly Thanks : only this is it is also effecting the social icons at the top of my page (see link)
https://www.dropbox.com/s/c4nmnef3sl6v0m9/Capture2.PNG
Is there any way to have them all in colour?
- This reply was modified 10 years, 4 months ago by Jamie A.
August 11, 2014 at 1:14 pm #302554Hi!
Please add following code as well
#top #wrap_all .av-social-link-mail a { color: #fff; background-color: #9fae37; } #top #wrap_all .av-social-link-linkedin a { color: #fff; background-color: #419cca; } #top #wrap_all .av-social-link-linkedin:hover a, #top #wrap_all .av-social-link-mail:hover a { color: #888; background-color: white; }
Regards,
YigitAugust 11, 2014 at 1:28 pm #302575Perfect thanks this worked great. however the original code you gave me is not working ? any ideas
function new_share_title() {
$output = “Your new share title here”;
return $output;
}
add_filter(‘avia_social_share_title’, ‘new_share_title’);August 11, 2014 at 1:31 pm #302578August 11, 2014 at 1:41 pm #302586For some reason it is still not working
here is ALL the code i have may be there is a conflict?
#top .fullsize .template-blog .post .entry-content-wrapper > * { max-width: 800px; }
#footer a {
color: black;
}
#footer a:hover {
color: blue;
}.widget_recent_entries li a {
font-style: normal !important;
}.image-overlay {
visibility: hidden;
}div#commentform.fb-social-plugin {
margin-left: 17%;
}@media only screen and (max-width: 767px) {
.container.template-blog {
width: 94%;
}}span.blog-tags.minor-meta {
display: none;
}.home .content { padding-bottom: 10px; }
span.av-masonry-date { display: none; }
.av-masonry-entry .av-inner-masonry-content { padding: 20px; }@media only screen and (max-width: 767px) {
.responsive .tabcontainer .tab_titles {
display: block;
border-top: 1px solid #555555;
}
.responsive .top_tab .tab.fullsize-tab {
display: none;
}
.responsive #top .footer_color .tabcontainer .active_tab {
color: #444; }
}@media only screen and (max-width: 480px) {
.av-inner-masonry-content.site-background {
background: rgba(255,255,255,0.5) !important;
}}body .container_wrap .hr.avia-builder-el-first { margin: 10px 0; }
.av-special-heading { margin-top: 10px; }
.avia-content-slider { margin: 10px 0; }@media only screen and (max-width: 479px) {
.responsive #top .related_entries_container .av_one_eighth {
margin-bottom: 3px;
}}#scroll-top-link {
background-color: grey;
}@media only screen and (max-width: 767px) {
ul.av-share-box-list {
margin-bottom: 80px;
}
}h5.av-share-link-description {
text-align: center;
}#top #wrap_all .av-social-link-facebook:hover a, #top #wrap_all .av-social-link-twitter:hover a, #top #wrap_all .av-social-link-gplus:hover a, #top #wrap_all .av-social-link-pinterest:hover a {
color: #888;
background-color: white;
}
#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
color: #fff;
background-color: #46d4fe;
}
#top #wrap_all .av-social-link-gplus a {
color: #fff;
background-color: #de5a49;
}
#top #wrap_all .av-social-link-pinterest a {
color: #fff;
background-color: #cb2027;
}#top #wrap_all .av-social-link-mail a {
color: #fff;
background-color: #9fae37;
}
#top #wrap_all .av-social-link-linkedin a {
color: #fff;
background-color: #419cca;
}
#top #wrap_all .av-social-link-linkedin:hover a, #top #wrap_all .av-social-link-mail:hover a { color: #888;
background-color: white;
}#top .avia-post-nav { background: rgba(0,0,0,0.4); padding: 30px; }
function new_share_title() {
$output = “Your new share title here”;
return $output;
}
add_filter(‘avia_social_share_title’, ‘new_share_title’);August 11, 2014 at 1:56 pm #302592Hi!
Please remove that last code from Quick CSS and add it in Functions.php file inside Appearance > Editor. As i mentioned here – https://kriesi.at/support/topic/reverse-the-colours-of-the-social-share-buttons/#post-302481 function code should go to Functions.php file
Best regards,
YigitAugust 11, 2014 at 2:10 pm #302603Sorry Yigit I should have read it better… my bad!
However I have removed it from the quick css and added it to the functions PHP file as discussed, however it has not worked?
https://www.dropbox.com/s/wotax2xplpyhnvi/1121.PNG
(I have cleared my cache)
August 11, 2014 at 2:16 pm #302607Hi!
It does work fine on my end on both parent and child theme. Which version of the theme are you using? If not the latest 2.9.1, please update the theme via FTP – http://vimeo.com/67209750
Best regards,
YigitAugust 11, 2014 at 2:31 pm #302618I’m using 2.7 will update and test. thanks
August 11, 2014 at 2:41 pm #302623Hi!
We will keep the thread open. Please try and let us know so we can mark this thread as resolved or assist you further :)
Regards,
YigitAugust 11, 2014 at 4:07 pm #302680Updated to latest version and all is now fine. Resolved ! thanks a million Yigit.
August 11, 2014 at 4:10 pm #302683 -
AuthorPosts
- The topic ‘Reverse the colours of the social share buttons’ is closed to new replies.