Premium Theme Support › Pro Theme Design › Chronicle

Social menu

  • Author
    Posts
  • #138786

    twobeardgaming
    Member

    Hi, is there anyway of adding additional icons logos to the social menu? I have a link to discord which defaults as the generic link icon.

    Thanks

    The blog I need help with is twobeardgaming.com.

    #138814

    binarymoon
    Theme Author

    Hi there

    We could add this with some custom css:

    .menu-social-links ul li a[href*="discordapp.com"]:before {
    background: url(IMAGEURL) center no-repeat;
    background-size: cover;
    width: 1.2em;
    display: inline-block;
    text-indent: -106em;
    border-radius: 0;
}

    You would need to add the IMAGEURL yourself.

    If you download the discord logo from here – https://discordapp.com/branding (I would use the black logo with the transparent background in the alternate logo section at the bottom). You would then need to upload it to your media library, and you replace the IMAGEURL with the new image path.

    #138816

    twobeardgaming
    Member

    Hi
    thanks for the update, can’t get it working. Tried a few different variants, any ideas?

    1.
    .menu-social-links ul li a[href*=”discordapp.com”]:before {
    background: url(https://twobeardgaming.files.wordpress.com/2019/01/discord-logo-black.png) center no-repeat;
    background-size: cover;
    width: 1.2em;
    display: inline-block;
    text-indent: -106em;
    border-radius: 0;
    }

    2.
    .menu-social-links ul li a[href*=”discordapp.com”]:before {
    background: https://twobeardgaming.files.wordpress.com/2019/01/discord-logo-black.png center no-repeat;
    background-size: cover;
    width: 1.2em;
    display: inline-block;
    text-indent: -106em;
    border-radius: 0;

    #138818

    binarymoon
    Theme Author

    Oh – I forgot to say. Currently the link you are using for Discord is a Twitter short url. You will need to change the url to be a direct Discord one.

    https://discordapp.com/invite/TchHDc4

    #138820

    twobeardgaming
    Member

    thanks, got it working on desktop although it doesn’t work on mobile? will another code be needed for that?

    thanks again

    #138846

    binarymoon
    Theme Author

    doh – I didn’t realise they were separate.

    Swap

    .menu-social-links ul li a[href*="https://discordapp.com/invite/TchHDc4"]:before

    for

    nav.menu-primary .menu .social_links a[href*="discordapp.com"]:before, .menu-social-links ul li a[href*="discordapp.com"]:before

    and it should work

  • Author
    Posts

You must be logged in to reply to this topic.