Frequently Requested Simple Modifications / Tweaks

Claudia J

OMG...it worked! That's the step I was missing! Thanks so much Lille Ulven! I really appreciate your help.
Alles Gute!
Claudia

WinsomeWorks

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.

leftquark

WinsomeWorks wrote: »

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

Lille Ulven

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

leftquark

Lille Ulven wrote: »

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.

Lille Ulven

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.

NicRacine

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!

BDJ

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' Mike

BDJ wrote: »

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

Brian Jones

A link to your site would help.

BDJ

Hikin' Mike wrote: »

A link to your site would help.

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' Mike

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.

BDJ

Hikin' Mike wrote: »

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. Webster

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. Webster

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 Ulven

W.W. Webster wrote: »

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

W.W. Webster

Lille Ulven wrote: »

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!

However I would like to apply this to images in a Lightbox. Can you help with this?

Lille Ulven wrote: »

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.

denisegoldberg

W.W. Webster wrote: »

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 Ulven

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

W.W. Webster

denisegoldberg wrote: »

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!

leftquark

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.

leftquark

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;
}

W.W. Webster

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!

W.W. Webster

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. Webster

W.W. Webster wrote: »

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 Ulven

Try this one then:

 .sm-user-ui .sm-lightbox-title {
  max-width: 1000px !important;
}

Good luck

Lille Ulven

W.W. Webster

Lille Ulven wrote: »

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.

Lille Ulven

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

W.W. Webster

Lille Ulven wrote: »

By the smiley you are using, I assume your sentence is missing a "not"...

Oops, now corrected. Sorry!

Lille Ulven wrote: »

... 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. Webster

W.W. Webster wrote: »

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 Ulven

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