Sign in

Telegram-styled share button

  • This topic has 7 replies, 3 voices, and was last updated 7 months, 4 weeks ago by .
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #4355
    Krusty

    Hi, I like the share button of the ‘Simple’ theme. How can I add a Telegram share button with the same characteristics?

    #4356
    Bob

    Hi,

    You should update a few files in the following location (‎⁨Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME)

    • /assets/svg/svg-map.svg
    • /assets/js/svg-map.js
    • /partials/share-buttons.hbs

    and for styling use the Customs CSS Tool.

    To preserve the custom code changed from being overwritten the next time your theme is updated, please make sure you have created override files, which are essentially copies of the existing theme files and are stored separately → https://getpublii.com/dev/theme-overrides/

     

     

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #4357
    Krusty

    Ok thanks, so there’s no “easier” way to do it for someone who’s not really into HTML and CSS. I’ll see what I can do 🙂

    #4358
    Bob

    It is not too difficult, just look at the existing part of the code and “duplicate it”.
    You can also consider using our paid service https://getpublii.com/customization-service/

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #4359
    Krusty

    Okay thank you again. One last thing: what if I don’t have /assets/js/svg-map.js ? Should I create it? Thank you very much for the support

    #4360
    Bob

    If you use our themes, there should be this file, in general, this file is not needed for the website, you only need it for local site preview due to security rules that prevent loading external URLs from a different domain.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #4770
    JOduMonT

    It is not too difficult, just look at the existing part of the code and “duplicate it”.

    I have the same perception while it come to cybersecurity and adding a rules in IPFW, it is very easy google and cut and paste. 😛

    Sadly, since an hour I try to have a icon for messenger, o i clean the original svg than add it to maps.svg and the js file and it appear on the site, but I’m unable to match the style.

    if anyone would like to help me to match the style it would be great

    here the original facebook messenger svg

    than here my current code

    <symbol id="messenger" viewBox="0 0 224 226">
    <defs>
    <linearGradient id="a" y1="6.76%" x2="50%" x1="50%" y2="95.6%">
    <stop stop-color="#00C6FF" offset="0"/>
    <stop stop-color="#0068FF" offset="1"/>
    </linearGradient>
    </defs>
    <path fill="url(#a)" d="m41.255 185.52v40.2l37.589-21.37c10.478 3.02 21.616 4.65 33.156 4.65 61.86 0 112-46.79 112-104.5 0-57.714-50.14-104.5-112-104.5-61.856 0-112 46.786-112 104.5 0 32.68 16.078 61.86 41.255 81.02z"/>
    <path fill="#fff" d="m100.04 75.878l-60.401 63.952 54.97-30.16 28.721 30.16 60.06-63.952-54.36 29.632-28.99-29.632z"/>
    </symbol>

     

    "#messenger": {
    "viewbox": "0 0 224 226",
    "content": "<defs><linearGradient id=\"a\" y1=\"6.76%\" x2=\"50%\" x1=\"50%\" y2=\"95.6%\"><stop stop-color=\"#00C6FF\" offset=\"0\"/><stop stop-color=\"#0068FF\" offset=\"1\"/></linearGradient></defs><path fill=\"url(#a)\" d=\"m41.255 185.52v40.2l37.589-21.37c10.478 3.02 21.616 4.65 33.156 4.65 61.86 0 112-46.79 112-104.5 0-57.714-50.14-104.5-112-104.5-61.856 0-112 46.786-112 104.5 0 32.68 16.078 61.86 41.255 81.02z\"/><path fill=\"#fff\" d=\"m100.04 75.878l-60.401 63.952 54.97-30.16 28.721 30.16 60.06-63.952-54.36 29.632-28.99-29.632z\"/>"
    }

     

     

     

    Attachments:
    #4773
    JOduMonT

    @Krusty

    I figured it is easier with a flaticon

    my trick is to go at flaticon.com, search for the icon and be sure to not clicking on the sponsored one, which give me this for telegram

    than I open the file with a text editor such as VS-Codium or Atom, …

    than you copy the viewBox and path property in ./assets/svg/svg-map.svg and ./assets/js/svg-map.js which are located in your override theme directory.

    example for svg-map.svg you add this code just before the </svg> which is

    <symbolid="telegram"viewBox="0 0 24 24">
    <pathd="m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z"fill="#fff"/>
    </symbol>

    for the js file it is a little bit tricker since you have to escape the special character ” inside the propriety of content
    so ever time you see a in the path you have to add \ in front of it

    example for svg-map.js you add this code just before the }; which is

    ,
    "#telegram": {
    "viewbox": "0 0 24 24",
    "content": "<path d=\"m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z\" fill=\"#fff\" />"
    }
    };

    be sure to add a , after the }, of whatsapp since it is not the last entry.

    "#whatsapp": {
    "viewbox": "0 0 32 32",
    "content": "<path d=\"M24.09,19.64c0.1,0.17,0.1,0.96-0.23,1.88c-0.33,0.93-1.92,1.77-2.69,1.88c-0.69,0.1-1.55,0.14-2.51-0.16c-0.58-0.18-1.32-0.43-2.27-0.83c-3.99-1.72-6.6-5.72-6.8-5.98c-0.2-0.26-1.63-2.15-1.63-4.1c0-1.95,1.03-2.91,1.39-3.31c0.36-0.4,0.8-0.5,1.06-0.5s0.53,0,0.76,0.01c0.24,0.01,0.57-0.09,0.9,0.68c0.33,0.79,1.13,2.74,1.23,2.94c0.1,0.2,0.17,0.43,0.03,0.69c-0.13,0.26-0.2,0.43-0.4,0.66s-0.42,0.52-0.6,0.69c-0.2,0.2-0.41,0.41-0.17,0.81c0.23,0.4,1.03,1.69,2.21,2.74c1.52,1.35,2.8,1.77,3.2,1.97c0.4,0.2,0.63,0.17,0.86-0.1c0.23-0.26,1-1.16,1.26-1.55c0.27-0.4,0.53-0.33,0.9-0.2c0.36,0.13,2.32,1.09,2.72,1.29C23.73,19.37,23.99,19.47,24.09,19.64z M32,15.87c0,8.74-7.15,15.86-15.93,15.86c0,0,0,0,0,0h-0.01c-2.67,0-5.29-0.67-7.61-1.93L0,32l2.26-8.22c-1.39-2.4-2.13-5.13-2.13-7.93C0.14,7.11,7.28,0,16.07,0c4.26,0,8.26,1.65,11.27,4.65C30.35,7.65,32,11.63,32,15.87z M29.31,15.87c0-3.52-1.37-6.83-3.88-9.32c-2.5-2.49-5.83-3.86-9.36-3.87c-7.3,0-13.25,5.91-13.25,13.18c0,2.49,0.7,4.92,2.02,7.01l0.31,0.5l-1.34,4.86l5.01-1.31l0.48,0.29c2.03,1.2,4.36,1.84,6.74,1.84h0.01C23.37,29.05,29.31,23.13,29.31,15.87z\" />"
    },

    note: obviously, as Bob mention, you have to understand how to override a theme

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.