• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support SmugMug Customization change "save photo"

FAQtoid

Ever wanted to create an Avatar? Creating an Avatar!

Searching Dgrin with Google Searching with Google

Dgrin Challenges

Congratulations to the Winner of DSS #130 (Hot or Cold), Memol..

The next Dgrin Challenge DSS #131 (Music) is open for entries through June 24th, 2013 at 8:00pm PDT.

As always, we look forward to your participation but please do take a moment to read through the rules before posting your entry.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Need some help with Accessories?

Tutorials

Ever find yourself wondering just how someone managed to create an image using different effects?

Here are three simple tutorials we hope will encourage you to try something new.

The Hot Seat

A lifelong interest in landscape photography has led Eyal Oren to make a study of his adopted hometown of Marblehead, MA. As you can see, his dedication is paying off!

Africa!

Dgrinners Harryb, Pathfinder, and others joined Andy Williams and Marc Muench on Safari in East Africa recently. Here are some awesome threads to check out!

SmugMug How To:

SmugMug News:

SmugMug Status

 
Thread Tools Display Modes
Old Jun-03-2006, 02:29 PM
#1
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
change "save photo"
Specifically I want to make the "Save photo" LARGE and offset so people know how to download the photos. I can't seem to do this. I made the whole "other sizes" section larger but I couldn't even make it red.

http://mpmcleod.smugmug.com/gallery/1470992

If it requires it could we add Id tags for the other photo sizes?
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Old Jun-03-2006, 02:36 PM
#2
ivar is offline ivar
I'd be happy with a cookie
ivar's Avatar
Quote:
Originally Posted by mpmcleod
Specifically I want to make the "Save photo" LARGE and offset so people know how to download the photos. I can't seem to do this. I made the whole "other sizes" section larger but I couldn't even make it red.

http://mpmcleod.smugmug.com/gallery/1470992

If it requires it could we add Id tags for the other photo sizes?
CSS wise it is not possible to only change the color of 'save photo'. You will change the s/m/l/o links aswell. You can use
Code:
#exifOtherSizes a {
  color: red;
}
for that.

You can't add id or class tags to items as a manual function, maybe Javascript could help you with the save photo thing.
__________________
Ivar
www.ivarborst.nl & smugmug
Old Jun-03-2006, 05:57 PM
#3
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by ivar
CSS wise it is not possible to only change the color of 'save photo'. You will change the s/m/l/o links aswell. You can use
Code:
#exifOtherSizes a {
  color: red;
}
for that.

You can't add id or class tags to items as a manual function, maybe Javascript could help you with the save photo thing.
I tried the color thing notice the red pipe at the end) but it doesn't seem to take for the text and I don't really understand why.

I know I can't add an id. I am hoping that SM will add an id tag around "save photo" so that I can specifically modify that link.

any ideas?

edit: found that I was using #exifOtherSizes.a { instead of #exifOtherSizes a {

so that fixed the red problem.

THANKS!
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Last edited by mpmcleod; Jun-03-2006 at 06:13 PM.
Old Jun-05-2006, 03:52 AM
#4
wellman is offline wellman
Swimming for Them
wellman's Avatar
Give this a try in your footer...

Code:
<script type="text/javascript">
// Make "save photo" stand out
var objElement = document.getElementById("exifOtherSizes")
if (objElement != null) 
{
  var str = new String(objElement.innerHTML);
  str = str.replace('save photo', '<span id="makeStandOut">save photo</span>')
  objElement.innerHTML = str;
}
</script>
Then put this in your CSS:
Code:
#makeStandOut {
  color: red;
  font-weight: bold;
  }
This is purely off the top of my head and untested, so it may need some massaging. The general concept should work, though.

-Greg
__________________
Greg Wellman
Swim for Them | WellmanHouse.net | AlbumFetcher | SmugShowBuilder
Old Jun-05-2006, 09:06 AM
#5
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by wellman
Give this a try in your footer...

Code:
<script type="text/javascript">
// Make "save photo" stand out
var objElement = document.getElementById("exifOtherSizes")
if (objElement != null) 
{
  var str = new String(objElement.innerHTML);
  str = str.replace('save photo', '<span id="makeStandOut">save photo</span>')
  objElement.innerHTML = str;
}
</script>
Then put this in your CSS:
Code:
#makeStandOut {
  color: red;
  font-weight: bold;
  }
This is purely off the top of my head and untested, so it may need some massaging. The general concept should work, though.

-Greg
very cool. I will give this a try.
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Old Jun-06-2006, 01:26 PM
#6
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by mpmcleod
very cool. I will give this a try.
Couldn't quite make that work (not sure why) but here is what works for me.

in CSS:
#makeStandOut {
font-size: 200%;
color: red;
font-weight: bold;
}

in head tag (not in Javascript section):
<script type="text/javascript">
function makeStandOut() {
// Make "save photo" stand out
if (document.getElementById("exifOtherSizes") != null)
{
document.getElementById("exifOtherSizes").innerHTM L=document.getElementById("exifOtherSizes").innerH TML.replace("save photo","<span id=\"makeStandOut\">save photo</span>");
}
}
</script>

in body:
<body onLoad="makeStandOut();">

thanks for the help!!!

Now I just need to make the CSS prettier (add boders, shading, etc.) to make Save Photo really pop!
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Old Jun-06-2006, 01:54 PM
#7
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by mpmcleod
Couldn't quite make that work (not sure why) but here is what works for me.

in CSS:
#makeStandOut {
font-size: 200%;
color: red;
font-weight: bold;
}

in head tag (not in Javascript section):
<script type="text/javascript">
function makeStandOut() {
// Make "save photo" stand out
if (document.getElementById("exifOtherSizes") != null)
{
document.getElementById("exifOtherSizes").innerHTM L=document.getElementById("exifOtherSizes").innerH TML.replace("save photo","<span id=\"makeStandOut\">save photo</span>");
}
}
</script>

in body:
<body onLoad="makeStandOut();">

thanks for the help!!!

Now I just need to make the CSS prettier (add boders, shading, etc.) to make Save Photo really pop!
Ok one problem is that SM uses different Id tags depending on the style (for example the div id under traditional is "sizePicker".

Will have to look into the possible solutions for this.
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Old Jun-06-2006, 02:21 PM
#8
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by mpmcleod
Ok one problem is that SM uses different Id tags depending on the style (for example the div id under traditional is "sizePicker".

Will have to look into the possible solutions for this.
here is a hack around:
<script type="text/javascript">
function makeStandOut() {
// Make "save photo" stand out
replaceText = new RegExp("\>save photo\<\/a\>\\s*\\|");
document.body.innerHTML=document.body.innerHTML.re place(replaceText,"class=\"makeStandOut\">save photo</a><br />");
}
</script>
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Last edited by mpmcleod; Jun-06-2006 at 02:32 PM.
Old Jun-06-2006, 02:51 PM
#9
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
additional features:

CSS:
#showSaveDirections {
font-size: 125%;
font-weight: bold;
font-family: Arial,sans-serif;
color: red;
background-color: white;
border: 1px solid red;
}
#hideSaveDirections {
display: none;
}

head tag:
<script type="text/javascript">
function makeStandOut() {
// Make "save photo" stand out
replaceText = new RegExp("\>save photo\<\/a\>\\s*\\|");
if (replaceText.exec(document.body.innerHTML)) {
document.body.innerHTML=document.body.innerHTML.re place(replaceText,"class=\"makeStandOut\">save photo</a><br />");
document.body.innerHTML=document.body.innerHTML.re place("hideSaveDirections","showSaveDirections");
}
}
</script>

header:
<span id="hideSaveDirections">&nbsp;To save a photo right-click on "save photo" and then select "Save Target as..." or "Save Link as ..."&nbsp;</span>

---
what this does is display a header with instructions for people to save the photos but only on pages where the option to save a photo exists.
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Old Jun-06-2006, 09:01 PM
#10
mpmcleod is offline mpmcleod OP
Got DNA?
mpmcleod's Avatar
Quote:
Originally Posted by mpmcleod
additional features:

CSS:
#showSaveDirections {
font-size: 125%;
font-weight: bold;
font-family: Arial,sans-serif;
color: red;
background-color: white;
border: 1px solid red;
}
#hideSaveDirections {
display: none;
}

head tag:
<script type="text/javascript">
function makeStandOut() {
// Make "save photo" stand out
replaceText = new RegExp("\>save photo\<\/a\>\\s*\\|");
if (replaceText.exec(document.body.innerHTML)) {
document.body.innerHTML=document.body.innerHTML.re place(replaceText,"class=\"makeStandOut\">save photo</a><br />");
document.body.innerHTML=document.body.innerHTML.re place("hideSaveDirections","showSaveDirections");
}
}
</script>

header:
<span id="hideSaveDirections">&nbsp;To save a photo right-click on "save photo" and then select "Save Target as..." or "Save Link as ..."&nbsp;</span>

---
what this does is display a header with instructions for people to save the photos but only on pages where the option to save a photo exists.
Well apparently this only works on FF.

Hmm.... will have to debug this.
__________________
-- Mike

smugmug nickname: mpmcleod
http://www.michaelmcleod.com/
Tell The World!  

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump