Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #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.
    #302481

    Hi 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 > Editor

    function new_share_title() {
    	$output = "Your new share title here";
    	return $output;
    }
    add_filter('avia_social_share_title', 'new_share_title');

    Regards,
    Yigit

    #302494

    Sorry yigit my site is http://shutterliving.com/yoga-grand-palais-paris/

    Also could you tell me how to CENTRE the text over the buttons~?

    #302507

    Hi 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 CSS

    h5.av-share-link-description {
    text-align: center;
    }

    Regards,
    Yigit

    #302524

    Very strange that you cant see the website may be try access this post instead: http://shutterliving.com/british-royal-guard/

    https://www.dropbox.com/s/7xs9uycgxhagkdo/Capture.PNG

    #302533

    Hey!

    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!
    Yigit

    #302547

    This 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.
    #302554

    Hi!

    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,
    Yigit

    #302575

    Perfect 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’);

    #302578

    Hi!

    Please copy&paste the code from here – http://pastebin.com/qe5Mv93z

    Regards,
    Yigit

    #302586

    For 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’);

    #302592

    Hi!

    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,
    Yigit

    #302603

    Sorry 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)

    #302607

    Hi!

    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,
    Yigit

    #302618

    I’m using 2.7 will update and test. thanks

    #302623

    Hi!

    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,
    Yigit

    #302680

    Updated to latest version and all is now fine. Resolved ! thanks a million Yigit.

    #302683

    Hey!

    You are welcome Jamie, glad we could help :) Let us know if you have any other questions or issues

    Regards,
    Yigit

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Reverse the colours of the social share buttons’ is closed to new replies.