Joomla Templates Club 406,261 posts

[TuzTref Friend TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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 SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#1084703

Here

https://svpromo.ru/soft/booking/restaurant-or-cafe/128-shakira-adam-levine-and-remaining-voice-singers-come-together-for-club-show

3 and 4 buttons.

[TuzTref Friend TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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 SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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 SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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 SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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, 10 months ago by  TuzTref.
• This reply was modified 6 years, 10 months ago by  TuzTref.
• This reply was modified 6 years, 10 months ago by  TuzTref.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#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 TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#1085545

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

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1085704

Is that ok now? https://svpromo.ru/shop/all/product/view/9/11

[TuzTref Friend TuzTrefJoin date: March 2015Posts: 78Downloads:169Uploads:12]

#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?

[Author]

Posts