Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • TuzTref Friend
    #1084311

    Hi! Explain how I need to add VK button in the upper left part of the site. Now, if I add the line:

    top <a class="addthis_button_vk_follow" addthis:userid="login-user">

    or

    left <a class="addthis_button_vk">

    the link is added, and the picture is always facebook

    As I understand it, it is necessary to change the pictures /templates/ja_fixel/images/ico-social.the top and png templates/ja_fixel/images/social.png bottom so that the sequence of references was the same as in the picture?

    Specify the cell dimensions for each icon??

    Saguaros Moderator
    #1084420

    Hi,

    Kindly share the URL and login info of your site and tell me how you want to achieve, I will take a look.

    TuzTref Friend
    TuzTref Friend
    #1084815

    Also I would like to understand how to display additional buttons of social networks on the pages jshopping?

    https://svpromo.ru/shop/all/product/view/9/11

    Saguaros Moderator
    #1085022

    Hi,

    For the Social links in JShopping page, kindly check the custom HTML module in bookmark-jshopping position, here is the default output:

    <!-- AddThis Follow BEGIN -->
    <div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
     <a class="addthis_button_facebook"></a>
     <a class="addthis_button_twitter"></a>
     <a class="addthis_button_google_plusone_share"></a>
    </div>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fbcd3a05926764">&lt;/script&gt;
    <!-- AddThis Follow END -->

    You can add more social icons as you wish, then you must edit the social image: https://svpromo.ru/templates/ja_fixel/images/social.png

    to add the icons

    Then, you add some styles to show associated icons like suggested here

    TuzTref Friend
    #1085204

    Welcome!
    Here is a new picture
    https://svpromo.ru/templates/ja_fixel/images/social.png

    Here is the code from the plugin in the admin panel

    <div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
     <a class="addthis_button_vk"></a>
     <a class="addthis_button_odnoklassniki_ru"></a>
     <a class="addthis_button_mymailru"></a>
     <a class="addthis_button_google_plusone_share"></a>
     <a class="addthis_button_twitter"></a>
     <a class="addthis_button_facebook"></a>
    </div>
    // Social Link
    .social-link {
      background-color: #111;
      .transition(~"background-color 0.6s ease-out, border-color 0.6s ease-out");
    
      .custom {
        display: block;
      }
    
      .addthis_toolbox {
        background-color: #111;
        height: 60px;
        border-left: solid 1px #1D1D1D;
        .transition(~"background-color 0.6s ease-out, border-color 0.6s ease-out");
    
        > a {
          border-right: solid 1px #1D1D1D;
          margin: 0 !important; 
          padding: 0 !important;
                height: 60px !important;
          .transition(border-color 0.6s ease-out);
    
                > span {
                    background-color: transparent !important;
                    background-size: inherit !important;
                    height: 60px !important;
                    line-height: 60px !important;
                    width: 60px !important;
                }
        }
    
        > a > span .at-icon  {
                background-color: transparent !important;
          background-image: url("@{T3ImagePath}/ico-social.png") !important;
          background-size: inherit !important;
          height: 60px !important;
          line-height: 60px !important;
          width: 60px !important;
                text-indent: -999em;
    
                g {
                    display: none;
                }
    
          &.at-icon-vk {
                    background-position: 0 0 !important;
    
            &:hover {
                        background-position: -60px 0px !important;
            }
          }
    
          &.at-icon-odnoklassniki_ru{
                    background-position: 0 -60px !important;
            &:hover {
                        background-position: -60px -60px !important;
            }
          }
    
          &.at-icon-mymailru{
                    background-position: 0 -180px !important;
            &:hover {
                        background-position: -60px -180px !important;
            }
          }
    
          &.at-icon-google_plusone_share {
                    background-position: 0 -240px !important;
            &:hover {
                        background-position: -60px -240px !important;
            }      
    
        &.at-icon-twitter {
                    background-position: 0 -300px !important;
            &:hover {
                        background-position: -60px -120px !important;
            }   
    
        &.at-icon-facebook {
                    background-position: 0 -360px !important;
            &:hover {
                        background-position: -60px -360px !important;
            }
          }
        }
      }
        // Social Link End

    And that does not change

    https://svpromo.ru/soft/booking/rental-or-transport/126-billboard-music-awards-tickets-are-on-sale

    what I did wrong?

    TuzTref Friend
    #1085206

    And this is the code in the HTML module on store

    `
    <div class="addthis_toolbox addthis_floating_style addthis_32x32_style"><a class="addthis_button_vk"> <a class="addthis_button_odnoklassniki_ru"> <a class="addthis_button_mymailru"> <a class="addthis_button_google_plusone_share"> <a class="addthis_button_facebook"> <a class="addthis_button_twitter"> <a class="addthis_button_facebook"> <a class="addthis_button_google_plusone_share">
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fbcd3a05926764" type="text/javascript"></script>

    `
    And here, too, nothing has changed …
    https://svpromo.ru/shop/all/product/view/9/22
    I understand that somewhere made a mistake – help me find her.

    Saguaros Moderator
    #1085405

    Hi,

    As I mentioned in my last post, you should use the CSS property background-position to locate the position of the social icon in the social image. Pls try adding this:

    .list-icons .addthis_internal_container a span .at-icon.at-icon-facebook {
        background-position: 0px 60px !important;
    }
    
    .list-icons .addthis_internal_container a span .at-icon.at-icon-twitter {
        background-position: 0px 120px !important;
    }
    
    .list-icons .addthis_internal_container a span .at-icon.at-icon-google_plusone_share {
        background-position: 0px 180px !important;
    }
    
    .list-icons .addthis_internal_container a span .at-icon.at-icon-mymailru {
        background-position: 0px 240px !important;
    }
    
    .list-icons .addthis_internal_container a span .at-icon.at-icon-odnoklassniki_ru {
        background-position: 0px 300px !important;
    }
    
    .list-icons .addthis_internal_container a span .at-icon.at-icon-vk {
        background-position: 0px 360px !important;
    }

    Regards

    TuzTref Friend
    #1085506

    Thanks for the reply. I would be grateful if You will specify where you need to place this code. Placing it here
    /templates/ja_fixel (your default template)/less/modules.less didn’t give any results!

    Saguaros Moderator
    #1085510

    Hi,

    It’s CSS code, you can put it into this CSS file: root/templates/ja_fixel/css/custom.css (create this file if it doesn’t exist).

    Regards

    TuzTref Friend
    #1085516

    And this code

          &.at-icon-vk {
                    background-position: 0 0 !important;
    
            &:hover {
                        background-position: -60px 0px !important;
            }
          }
    
          &.at-icon-odnoklassniki_ru{
                    background-position: 0 -60px !important;
            &:hover {
                        background-position: -60px -60px !important;
            }
          }
    
          &.at-icon-mymailru{
                    background-position: 0 -180px !important;
            &:hover {
                        background-position: -60px -180px !important;
            }
          }
    
          &.at-icon-google_plusone_share {
                    background-position: 0 -240px !important;
            &:hover {
                        background-position: -60px -240px !important;
            } 
        }
    
        &.at-icon-twitter {
                    background-position: 0 -300px !important;
            &:hover {
                        background-position: -60px -300px !important;
            }
        }
    
        &.at-icon-facebook {
                    background-position: 0 -360px !important;
            &:hover {
                        background-position: -60px -360px !important;
            }
          }

    must remain in the file /templates/ja_fixel (your default template)/less/modules.less ??

    Can I use custom and existing template.css ?

    • This reply was modified 6 years, 6 months ago by  TuzTref.
    • This reply was modified 6 years, 6 months ago by  TuzTref.
    • This reply was modified 6 years, 6 months ago by  TuzTref.
    Saguaros Moderator
    #1085527

    Your site is running with CSS, if you want to change in LESS file, pls backup your site, go to Template manager > enable Development Mode and compile less to css.

    And share the admin + FTP account of your site, I will check for you.

    TuzTref Friend
    #1085545

    Thank you for Your answers, Mr. Saguaros!
    I’m all turned out, thank you!

    Saguaros Moderator
    #1085704
    TuzTref Friend
    #1085738

    Yes! All excellent, amazing level of support! Thank You!

    Tell me how to configure the output icon print, email and PDF in the block with social buttons on the store pages? In the same way as it is done in Joomla content pages. Is this possible?

Viewing 15 posts - 1 through 15 (of 19 total)

This topic contains 18 replies, has 2 voices, and was last updated by  TuzTref 6 years, 6 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum