Additional social accounts in general settings

#23

How would I add an additional link to an external account link with an icon? (alongside the twitter and facebook links).

I tried adding everything that a grep -r twitter_url returned, with my desired rsi_url data but restarting ghost broke my setup; resulting in a 500 and missing rsi_url helper in default.hbs.

What is the correct way to do this

0 Likes

#24

In case this helps anybody - I managed to achieve this by altering the Casper theme and doing the following:

Add a linkedin.hbs file in partials/icons/ with the following SVG:

<svg height="64" viewBox="0 0 32 32" width="64" xmlns="http://www.w3.org/2000/svg"><g stroke-width=".424533" transform="matrix(1.2327382 0 0 1.2327382 -44.651454 13.534524)"><path d="m60.258392-10.978809h-22.121116c-1.057086 0-1.915916.838027-1.915916 1.87049v22.214515c0 1.033737.85883 1.872613 1.915916 1.872613h22.121116c1.05879 0 1.92144-.838876 1.92144-1.872613v-22.214515c.00042-1.032463-.86223-1.87049-1.92144-1.87049z" fill="#0177b5"/><g fill="#fff"><path d="m40.070173-1.247249h3.85051v12.387859h-3.85051zm1.926104-6.157845c1.23072 0 2.230918 1.000199 2.230918 2.231768 0 1.232418-1.000198 2.232616-2.230918 2.232616-1.234116 0-2.233042-1.000198-2.233042-2.232616 0-1.231569.998926-2.231768 2.233042-2.231768"/><path d="m46.335424-1.247249h3.692584v1.692611h.05137c.514109-.973878 1.769874-2.000822 3.642914-2.000822 3.89891 0 4.61849 2.565875 4.61849 5.901002v6.794644h-3.84754v-6.024117c0-1.436618-.0263-3.284608-2.00082-3.284608-2.00337 0-2.310731 1.564827-2.310731 3.180598v6.128127h-3.84669v-12.387435z"/></g></g></svg>

Alter partials/floating-header.hbs and add the following lines below the “Share This” div (<div class="floating-header-share-label">Share this {{> "icons/point"}}</div>)

        <a class="floating-header-share-fb" href="https://www.linkedin.com/shareArticle?mini=true&amp;title={{encode title}}&amp;url={{url absolute="true"}}"
            onclick="window.open(this.href, 'share-linkedin', 'width=550,height=235');return false;">
            {{> "icons/linkedin"}}
        </a>

It’s a bit hacky because I haven’t set-up dedicated classes for the Linkedin logo or anything, but it does work.


Edit: I ended up doing this properly:

partials/floating-header.hbs now has the following (note the class change):

        <a class="floating-header-share-li" href="https://www.linkedin.com/shareArticle?mini=true&amp;title={{encode title}}&amp;url={{url absolute="true"}}"
            onclick="window.open(this.href, 'share-linkedin', 'width=550,height=235');return false;">
            {{> "icons/linkedin"}}
        </a>

Then add floating-header-share-li to screen.css in the following places:

.floating-header-share-li,
.floating-header-share-tw,
.floating-header-share-fb {
    display: block;
    align-items: center;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 48px;
    text-align: center;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
@media (max-width: 900px) {
    .floating-header {
        height: 40px;
    }
    .floating-header-title,
    .floating-header-logo {
        font-size: 1.5rem;
    }
    .floating-header-share-li,
    .floating-header-share-tw,
    .floating-header-share-fb {
        width: 40px;
        height: 40px;
        line-height: 38px;
    }
}

And lastly make sure the background colour matches the SVG background:

.floating-header-share-li {
    background: rgb(17, 120, 179);
}

It then results in the following:

image

Note: I also changed the SVG height to be 60% as it looked better IMO. You can do this by amending the following line in screen.css:

.floating-header-share svg {
    width: auto;
    height: 60%;
    fill: #fff;
}

Which looks like this, on Desktop:

image

2 Likes

#25

Thanks omisnomis,
This worked very well for me.
https://news.sureconsult.ca/

0 Likes

#26

You’re welcome @bruce_norton

Glad it helped you!

0 Likes