Email with social buttons?

divamumdivamum Registered Users Posts: 9,021 Major grins
edited April 2, 2015 in SmugMug Customization
Is there a way to include a mailto (with icon) within the social buttons block? It would be great to have it all lined up in the same place on the page with Fb Twitter etc using an envelope icon that matches the others (as seen on so many other sites.) but I see no way to do that, or even include any contaact link other than on the nav bar.....

Thanks in advance!

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited March 31, 2015
    I believe you would need to use a menu content element to use the contact form. You could drag the content element next to the social icons.

    I don't see a way to use an icon in the menu content block but I suspect CSS could be used to change the menu entry.

    --- Denise
  • annnna8888annnna8888 Registered Users, Super Moderators Posts: 936 SmugMug Employee
    edited March 31, 2015
    Denise already provided an idea, and here's another option: you can use an HTML content block positioned next to the social icons. You will need to find an image/icon to use and make it clickable so the contact form opens.

    Add this code to the HTML content block:
    <div class="sm-footer-navitem-contact">
    <a href="#">
    <img src="http://www.linktotheimage.jpg" alt="image" />
    </a>
    </div>
    
    Note that the contact form will only appear when logged out.

    Ana
    SmugMug Support Hero
    Ana
    SmugMug Support Hero Manager
    My website: anapogacar.smugmug.com
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited March 31, 2015
    annnna8888 wrote: »
    Denise already provided an idea, and here's another option: you can use an HTML content block positioned next to the social icons. You will need to find an image/icon to use and make it clickable so the contact form opens.
    That's a much better solution!

    I didn't realize that the contact form could be accessed like this, good to know.

    --- Denise
  • divamumdivamum Registered Users Posts: 9,021 Major grins
    edited March 31, 2015
    Thanks! This may be beyond my skill level, but I'll see if I can figure out what you both just said lol

    ETA: I just played with the social block again, and realise there's a place for "custom" - that will display in a matching size/style icon, but of a chain (ie link). How could I customize that icon? There's nowhere in the block to choose anything other than an url. I could easily make a 'contact" page, and link it to that, I just want it to match the style next to the twitter/FB standard icons :)

    In the meantime, could this be a request to Smug? It seems it would be so easy to include it as another option in the social media block, to be used (or not) as the individual wanted!
  • annnna8888annnna8888 Registered Users, Super Moderators Posts: 936 SmugMug Employee
    edited March 31, 2015
    To the best of my knowledge, it's not possible to customize the custom link in the social icons content block, so you'll be better off going with either of the two suggestions provided in this thread.


    Ana
    SmugMug Support Hero
    Ana
    SmugMug Support Hero Manager
    My website: anapogacar.smugmug.com
  • Tom FosterTom Foster Registered Users Posts: 291 Major grins
    edited April 1, 2015
    annnna8888 wrote: »
    Note that the contact form will only appear when logged out.

    I wasted hours wondering why my contact button wasn't working and messing with CSS before I realised this!
  • jerryrjerryr Registered Users Posts: 595 Major grins
    edited April 1, 2015
    Hi
    I have used this advance css to customize the 'custom' (link button). I used 'branded' and 'medium' for the settings and created an image 40px in width by 40px in height. As indicated by the below, I changed the URLOFIMAGE to the actual URL.

    /* Social Media */
    .sm-page-widget-social-links-link .sm-official .sm-fonticon
    {
    background-image: url("URLOFIMAGE");
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: top center;
    color: transparent;
    }

    .sm-fonticon-LinkSquare:before {
    display: none;
    }

    sm-fonticon-Link:before {
    display: none;
    }


    .sm-user-ui .sm-page-widget-social-links-link .sm-official .sm-fonticon:before {
    display: none;
    }


    examples :
    http://www.meggenwatt.com/
    http://www.marcellorostagni.com/
    http://www.jakigoodmiller.com/Seniors/Home (all social media buttons customized)
  • divamumdivamum Registered Users Posts: 9,021 Major grins
    edited April 2, 2015
    Thanks!! Leftquark also replied with code here http://www.dgrin.com/showthread.php?p=1993327 so there are a few options now. Hope this helps somebody else trying to do the same thing!!
Sign In or Register to comment.