Frequently Requested Simple Modifications / Tweaks

17891012

Comments

  • Claudia JClaudia J Beginner grinner Posts: 5Registered Users Beginner grinner
    edited April 12, 2015
    OMG...it worked! That's the step I was missing! Thanks so much Lille Ulven! I really appreciate your help.
    Alles Gute!
    Claudia
  • WinsomeWorksWinsomeWorks Keep Thou my Feet Posts: 1,933Registered Users Major grins
    edited October 26, 2015
    How to add more than one link to the social icons area
    I found these mods & tweaks that will help with a mail icon & etc., but when I originally added a link (which shows up as the chain-link) I was only given an option for one non-standard link in addition to all the typical ones like FB & Twitter. How can I add a couple other links for my other websites, & is there a place to choose different icons for them, rather than having more "chain-links"? I'm currently using the round style.
    Anna Lisa Yoder's Images - http://winsomeworks.com ... Handmade Photo Notecards: http://winsomeworks.etsy.com ... Framed/Matted work: http://anna-lisa-yoder.artistwebsites.com/galleries.html ... Scribbles: http://winsomeworks.blogspot.com
    DayBreak, my Folk Music Group (some free mp3s!) http://daybreakfolk.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,408Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited October 26, 2015
    I found these mods & tweaks that will help with a mail icon & etc., but when I originally added a link (which shows up as the chain-link) I was only given an option for one non-standard link in addition to all the typical ones like FB & Twitter. How can I add a couple other links for my other websites, & is there a place to choose different icons for them, rather than having more "chain-links"? I'm currently using the round style.

    In an effort to keep your profile and your website from being bloated with Social Icons we limit the social inks to the more popular sites, plus one option for an additional site which isn't listed. While it's easy to go overboard and list all the places to find you, it's best to point your visitors to the main contact points, whether it be FB, Twitter, Instagram, or some other place of your choosing. Too many options and your visitors will just ignore them all and not return :(
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited October 27, 2015
    WinsomeWorks but if you do not need all the other Social Icons already, you can twist some of them a little bit into pretending to be something else with a little bit of CSS.

    For example with the following codes:
    /* before: chain symbol, afterwards RSS sign*/
    .sm-fonticon-LinkCircle:before {
      content: '\E330' !important; /* RSS sign */ 
      color:  rgba(250,150,50,1) !important;
    }
    
    /* 500px link instead of tumblr*/
    .sm-page-widget-social-links-tumblr .sm-fonticon-TumblrCircle:before {
      content: '\E260' !important;
    }
    
    /*Logout link instead of wordpress*/
    .sm-page-widget-social-links-wordpress .sm-fonticon-WordpressCircle:before{
      content: '\E34a' !important; /* circle with cross inside */
      color: red !important;
    }
    
    
    /* Set color of YouTube-Icon (now smugmug-Icon) */
    .sm-page-widget-social-links-youTube .sm-official .sm-fonticon{
      color:   rgba(137,160,252,1)  !important;
     /* content: '\E350' !important;*/
    }
    
    /* Set icon for YouTube to Smugmug-symbol*/
    .sm-page-widget-social-links-youTube .sm-fonticon-YouTubeCircle:before{
      content: '\E200' !important;
      /*color: rgba(137,160,252,1) !impoatant; */
    }
    

    You might have to play a little with the value in the content field to get the right symbol :)

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • leftquarkleftquark SmugMug Product Team Posts: 3,408Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited October 27, 2015
    WinsomeWorks but if you do not need all the other Social Icons already, you can twist some of them a little bit into pretending to be something else with a little bit of CSS.

    For example with the following codes:
    /* before: chain symbol, afterwards RSS sign*/
    .sm-fonticon-LinkCircle:before {
      content: '\E330' !important; /* RSS sign */ 
      color:  rgba(250,150,50,1) !important;
    }
    
    /* 500px link instead of tumblr*/
    .sm-page-widget-social-links-tumblr .sm-fonticon-TumblrCircle:before {
      content: '\E260' !important;
    }
    
    /*Logout link instead of wordpress*/
    .sm-page-widget-social-links-wordpress .sm-fonticon-WordpressCircle:before{
      content: '\E34a' !important; /* circle with cross inside */
      color: red !important;
    }
    
    
    /* Set color of YouTube-Icon (now smugmug-Icon) */
    .sm-page-widget-social-links-youTube .sm-official .sm-fonticon{
      color:   rgba(137,160,252,1)  !important;
     /* content: '\E350' !important;*/
    }
    
    /* Set icon for YouTube to Smugmug-symbol*/
    .sm-page-widget-social-links-youTube .sm-fonticon-YouTubeCircle:before{
      content: '\E200' !important;
      /*color: rgba(137,160,252,1) !impoatant; */
    }
    

    You might have to play a little with the value in the content field to get the right symbol :)

    Good luck

    Lille Ulven

    Great suggestion Lille. I do want to warn you, and state it for the record now, that hacks like this can be dangerous if we ever change how Social Links are entered in the future. We're already in discussions on how to improve the Profile / Social Links and it's possible that we would change things that would make hacks like this break. Use these at your own risk, knowing that you may have to revert back to our shortened list of Social Media sites in the future.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited October 27, 2015
    Thanks for your warning, leftquark - I will try to bear that one in mind (I hope).

    Just as an idea for that part of improvement that you are discussing: what about having a restricted number of social icons like now (10 or 12 or what ever the max is right now) but let us choose what type of social media page that is. So that instead of having to twist a wordpress-icon into a 500px page have a drop down list of possible icons and a text field to enter the link...Every entry from the dropdown should then only be allowed to be chosen 1 time, but we would get a greater selection to choose from...and it would be much easier to set up for those of us who need different icons.
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • NicRacineNicRacine Beginner grinner Posts: 8Registered Users Beginner grinner
    edited October 31, 2015
    Contact Form customization
    Hi Aaron,

    First, thank you for all that great work! I am still a newbie with Smugmug and CSS, and this thread is a major learning source for me.

    I found the thread because I want to personalize the contact form by changing the field labels. I am French speaking, and desserve mostly French speaking clients, so I want to translate the form.

    Using your code, I was able to delete every label, but I can make only one appear over the erased one.

    Here is what I came up with
    /* Set the The Question text to your own wording */
    /*.sm-contact-pro-form:before {
       content: "Question, commentaire";
       position: absolute;
       top: 210px;
       left: 200px;
    }
    /* Set the Subject text to your own wording */
    .sm-contact-pro-form:before {
       content: "Courriel";
       position: absolute;
       top: 60px;
       left: 200px;
    }
    /* Set the Subject text to your own wording */
    /* .sm-contact-pro-form:before {
       content: "Objet";
       position: absolute;
       top: 135px;
       left: 200px;
    }
    /* Hack to hide the The Question */
    .sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(4) label {
        visibility: hidden;
    }
    /* Hack to hide Email */
    .sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(2) label {
        visibility: hidden;
    }
    /* Hack to hide Subject */
    .sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(3) label {
        visibility: hidden;
    }
    /* Hack to hide To */
    .sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(1) label {
        visibility: hidden;
    }
    

    Now, I know it is not complete, but I want to perfect it before I finish adding the new fields. Right now, only the last new label (Objet) appears. The other fields are empty.

    Do you know what I did wrong?

    Thanks in advance!
  • BDJBDJ Big grins Posts: 26Registered Users Big grins
    edited November 10, 2015
    Menu Border
    Very much a beginner here. Your codes look v useful. I've used your code to get a border on 4 sides of a Menu link (one short word in screen center) but cannot get a border on the right-hand side. I inserted:

    .sm-page-widget-nav-toplink
    {
    border-left: 1px solid #595959;
    border-top: 1px solid #595959;
    border-right: 1px solid #595959;
    border-bottom: 1px solid #595959;
    padding: 7px 7px 7px 7px;
    }

    I feel I'm nearly there but what am I missing?

    Brian Jones
    leftquark wrote: »
    Hi Jseelow: The css to do that has been listed on here since the beginning. That was actually the first bit of CSS I added to my site!

    Add a Line or Border Around Each Item in Your Menu:
    .sm-page-widget-nav-toplink 
    {
      border-left: 0px;
      border-top: 0px;
      border-right: 0px;
      border-bottom: 1px solid #595959;
      padding: 7px 0 7px 0;
    }
    
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,193Registered Users Major grins
    edited November 10, 2015
    BDJ wrote: »

    I feel I'm nearly there but what am I missing?

    Brian Jones

    A link to your site would help. thumb.gif
  • BDJBDJ Big grins Posts: 26Registered Users Big grins
    edited November 11, 2015
    A link to your site would help. thumb.gif

    It's at harrill.smugmug.com (passworded) and I've inserted the CSS on the Home page. There are two separate Menus, each with the right-hand border missing. I've increased the right-hand padding without result.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,193Registered Users Major grins
    edited November 11, 2015
    BDJ wrote: »
    It's at harrill.smugmug.com (passworded) and I've inserted the CSS on the Home page. There are two separate Menus, each with the right-hand border missing. I've increased the right-hand padding without result.

    I can't help without a password or a non-password page, sorry.
  • BDJBDJ Big grins Posts: 26Registered Users Big grins
    edited November 11, 2015
    I can't help without a password or a non-password page, sorry.

    Silly me! Sorry. Brain not quite in gear. Was it ever, I wonder. I'll be in touch.
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited February 29, 2016
    At the top of this thread, Aaron offered the following code:
    leftquark wrote: »
    Change the width of ... Caption ... Areas Under a Photo (in SmugMug Layout)
    /* Make the caption area wider */
    .sm-user-ui .sm-gallery-smugmug .sm-tile-info {
      max-width: 900px !important;
    }
    

    Can someone kindly tell me how I can modify this code to apply to Journal-style galleries?
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 21, 2016
    No one, it seems!

    So let me try another question. The "Change the Right Click Protection Text" text on Page 1 appears not to be working for me.

    Is this code still valid (in which case I have done something wrong)? Alternatively is there, or should there be, an update to deal with something SmugMug changed in the meantime?

    Thanks.
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited May 21, 2016
    At the top of this thread, Aaron offered the following code:


    Can someone kindly tell me how I can modify this code to apply to Journal-style galleries?

    Could you give me a link to a journal-formatted gallery of yours? I couldn't find one on a fast look-through.
    But for a general answer you would have to change the
    sm-gallery-smugmug into the adequate gallery type your macro Flowers Up Close is for example a sm-gallery-columnorganic so the code below
    /* Make the caption area wider */
    .sm-user-ui .sm-gallery-smugmug .sm-tile-info {
      max-width: 900px !important;
    }
    

    would have to be changed to
    /* Make the caption area wider */
    .sm-user-ui .sm-gallery-columnorganic .sm-tile-info {
      max-width: 900px !important;
    }
    

    As for your right click protection text: did you double-check it while you were not logged into your website? I am not aware of any changes (OK, I don't work for Smugmug) and my code is still working fine.

    Hope this helps a little bit.

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 22, 2016
    Could you give me a link to a journal-formatted gallery of yours?
    Thanks, but it's so long ago I gave up and don't have any journal-type galleries currently! :D

    However I would like to apply this to images in a Lightbox. Can you help with this?
    As for your right click protection text: did you double-check it while you were not logged into your website? I am not aware of any changes (OK, I don't work for Smugmug) and my code is still working fine.
    This is definitely not working any more, whether I'm logged in or not.

    Thanks for your help.
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,211Super Moderators moderator
    edited May 23, 2016
    So let me try another question. The "Change the Right Click Protection Text" text on Page 1 appears not to be working for me.

    Is this code still valid (in which case I have done something wrong)? Alternatively is there, or should there be, an update to deal with something SmugMug changed in the meantime?
    There is a slightly different variation of that code on leftquark's customization page. I would try the variation from the page Change the Right Click Protection Text.

    --- Denise
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited May 23, 2016
    Hi W.W.Webster

    You could try this for your lightbox caption:
    .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info
    {
    max-width: 900px;
    }
    

    If you put that code into a CSS box on "All Galleries" or even "Entire website" level it should work just fine.

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 24, 2016
    There is a slightly different variation of that code on leftquark's customization page. I would try the variation from the page Change the Right Click Protection Text.
    Thanks Denise. There's something funny going on because that code didn't work either! eek7.gif
  • leftquarkleftquark SmugMug Product Team Posts: 3,408Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited May 24, 2016
    I'm confused what you're trying to do right now -- is it change the Right Click Message, or alter the width of the caption in lightbox?

    If you're trying to change the RCM, there's no need to use code. There's an option in your Account Settings to set the RCM, under the Privacy tab.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,408Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited May 24, 2016
    This is what I use to change the width of the captions in Lightbox:
    /* Make the width of the lightbox caption wider */
    .sm-user-ui .sm-lightbox-caption {
      max-width: 1000px !important;
    }
    
    /* SmugMug had the lightbox caption area really wide but the text in it much
       skinner. The scroll bar was very far away. Bring it in to match 
       the width of the lightbox caption  */
    .sm-user-ui .sm-lightbox-panel .sm-lightbox-info {
      max-width: none !important;
      margin-right: 350px !important;
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 24, 2016
    leftquark wrote: »
    I'm confused what you're trying to do right now -- is it change the Right Click Message, or alter the width of the caption in lightbox?
    Both!
    leftquark wrote: »
    If you're trying to change the RCM, there's no need to use code. There's an option in your Account Settings to set the RCM, under the Privacy tab.
    D'uh! rolleyes1.gif
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 24, 2016
    leftquark wrote: »
    This is what I use to change the width of the captions in Lightbox ...
    Thanks Aaron, I thought i was using something like that. I'll take another look.
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 24, 2016
    I'll take another look.
    Now I think I've worked it out the problem. It's the Title that's not wide enough. I think the Caption is OK. What do i need to add to widen the Title area?
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited May 24, 2016
    Try this one then:
     .sm-user-ui .sm-lightbox-title {
      max-width: 1000px !important;
    }
    

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 24, 2016
    Try this one then ...
    Thanks for your help, Lille. I had guessed that might be the code required, but it does not seem to be working. ne_nau.gif
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited May 25, 2016
    Hi W.W. Webster.

    By the smiley you are using, I assume your sentence is missing a "not"... could you guide me to a photo where it is not looking like you want it too? Then I can play with your website in Firefox and see if I can change some CSS and make it work (and then I will send you the code, so you can fix it permanently) :)

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 25, 2016
    By the smiley you are using, I assume your sentence is missing a "not"...
    Oops, now corrected. Sorry!
    ... could you guide me to a photo where it is not looking like you want it too? Then I can play with your website in Firefox and see if I can change some CSS and make it work (and then I will send you the code, so you can fix it permanently)
    Here's an example where the title wraps short of where the caption wraps.

    Thanks for your help.
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandPosts: 3,194Registered Users Major grins
    edited May 26, 2016
    Here's an example where the title wraps short of where the caption wraps.
    I've extended the caption just to remove any doubt about what's happening (or not happening).
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 508Registered Users Major grins
    edited May 27, 2016
    Try to change
    .sm-user-ui .sm-lightbox-title {
      max-width: 1000px !important;
    }
    

    to this;
    .sm-lightbox-title {
       width: 1000px !important;
    }
    

    In theory it should do the trick :)

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
Sign In or Register to comment.