Separate Map Page

[caroline]

I've got the map showing as a separate page and now I would like to add a box below it as Rich has done here:-
http://photos.lmsportspix.com/map/
I have looked at his css and page source but I need a hand please:bow:bow

Also as I'm not much of a traveller I would like to change the words "Around the World" to something more appropriate to my wanderings (like around the Mendips:D)

Caroline

[Allen]

I've got the map showing as a separate page and now I would like to add a box below it as Rich has done here:-
http://photos.lmsportspix.com/map/
I have looked at his css and page source but I need a hand please:bow:bow

Also as I'm not much of a traveller I would like to change the words "Around the World" to something more appropriate to my wanderings (like around the Mendips:D)

Caroline It's all done by adding the div's to the footer. Open his page source for his
maps page and search for "After selecting one". You'll see this in his footer.

<div class="boxBottom" id="testBox">
<h3 class="title">After selecting one of the green markers above you can:</h3>
<ul class="noindent">
<li>Use the slider to zoom</li>
<li>Click &amp; drag to scroll</li>
<li>Click a map marker to see a thumbnail &amp; caption</li>
<li>Click the thumbnail to see a larger version</li>
<li>Click the thumbnails &amp; links on the right column for tricky surprises</li>
</ul>
</div>
Then look at his CSS for .testbox for formating.

This might get the title changed.

YE.onContentReady('mapTitle', function() {this.innerHTML = this.innerHTML.replace('around the world', 'around the Mendips')});

[caroline]

It's all done by adding the div's to the footer. Open his page source for his
maps page and search for "After selecting one". You'll see this in his footer.

<div class="boxBottom" id="testBox">
<h3 class="title">After selecting one of the green markers above you can:</h3>
<ul class="noindent">
<li>Use the slider to zoom</li>
<li>Click &amp; drag to scroll</li>
<li>Click a map marker to see a thumbnail &amp; caption</li>
<li>Click the thumbnail to see a larger version</li>
<li>Click the thumbnails &amp; links on the right column for tricky surprises</li>
</ul>
</div>
Then look at his CSS for .testbox for formating.

This might get the title changed.

YE.onContentReady('mapTitle', function() {this.innerHTML = this.innerHTML.replace('around the world', 'around the Mendips')});

I'm partly there but still need some wizardry please:D
This is what it looks now:-
http://myskitch.com/carolineshipsey/caroline_s_personal_photos_-_powered_by_smugmug-20070723-172610.jpg

Kind of similar to the navbar situation of yesterday, so I tried experimenting with the code that Andy gave me but all I managed to do is remove the light grey background:scratch

Caroline

EDIT:- Aaaaaaargh - Ive just noticed that the box not only appears on the map page but on all the others as well.

[caroline]

Bill, this is the link ot my map page :-
http://caroline2.smugmug.com/map
To clarify,
my starting point was from RichW's page here:-
http://photos.lmsportspix.com/map/

1. I want to achieve something like the box below the map on his page, but in the style of the theme I am using ie no borders or such like around the text, and I don't have the images of the little green marker yet.

2. The 'box below the map' to appear only on the map page, currently it appears on all pages.

Basically if the light grey 'box' containing the text can be the same width as the others in this style, ie 750px wide I would be content :) if not ecstatic

Caroline

[oxy8384]

Caroline,
To make the box the 'proper' width, add this to your CSS (just add the width line to your existing #testBox CSS section):
#testBox {
width: 750px;
}

To make it disappear on all your pages except the map page, change this CSS
.map #testBox,.all #testBox {
display: block;
height: auto;
margin-top: 0px;
margin-bottom: 10px;
text-align: justify;} to this
#testBox {
display: none;
height: auto;
margin-top: 0px;
margin-bottom: 10px;
text-align: justify;} and add this:
.map #testBox {
display: block;
}
and to replace the default bullet in your list to the SmugMug maps flag, you can use this code:
#testBox li
{
list-style-image: url(<image URL>);
}
I have attached a gif you can use. Save it in a gallery somewhere and then change the <image URL>, above, to match its location. If you need more details, let me know...




Cheers,

Bill

[caroline]

Caroline,
To make the box the 'proper' width, add this to your CSS (just add the width line to your existing #testBox CSS section):
#testBox {
width: 750px;
}

To make it disappear on all your pages except the map page, change this CSS
.map #testBox,.all #testBox {
display: block;
height: auto;
margin-top: 0px;
margin-bottom: 10px;
text-align: justify;} to this
#testBox {
display: none;
height: auto;
margin-top: 0px;
margin-bottom: 10px;
text-align: justify;} and add this:
.map #testBox {
display: block;
}
and to replace the default bullet in your list to the SmugMug maps flag, you can use this code:
#testBox li
{
list-style-image: url(<image URL>);
}
I have attached a gif you can use. Save it in a gallery somewhere and then change the <image URL>, above, to match its location. If you need more details, let me know...
Cheers,
Bill


Its still extending on the LH side and cutting the edge of the ? background.
Thx for the gif - I'll get to dealing with that later :)

Caroline

[oxy8384]

...this to the #testBox CSS:
#testBox {
...
margin: 0 auto;
...
}

[oxy8384]

I just realized that in order to make this work, you need to create an outer div that handles the background with the text data inside. I suggest leaving the outer box as #testBox and then putting what is in the #testBox into an inner div called #testText (or whatever). To make the background from your theme, add this to your CSS for the testBox...
padding-left: 35px;
padding-right: 35px;
background-color: transparent;
background-image: url(/img/themes/White/small_center.jpg);
background-repeat: repeat-y;

Then, you need to enclose the text. If you use the #testText id I suggested, add the following, just inside the <div id="testBox"></div> tags in your HTML code (in your footer...?)
<div id="testText">
[...list stuff...]
</div>
and add this to your CSS:
#testText {
background-color: #f1f1f1;
}

I doubt even this will get it all, but it should be a lot closer...

Bill

[caroline]

Then, you need to enclose the text. If you use the #testText id I suggested, add the following, just inside the <div id="testBox"></div> tags in your HTML code (in your footer...?)
<div id="testText">
[...list stuff...]
</div>
and add this to your CSS:
#testText {
background-color: #f1f1f1;
}
I doubt even this will get it all, but it should be a lot closer...
Bill

I'm not understanding what should go where in the footer, this is what I currently have:-

<div class="boxBottom" id="testBox">
<h3 class="title">After selecting one of the green markers above you can:</h3>
<ul class="noindent">
<li>Use the slider to zoom</li>
<li>Click &amp; drag to scroll</li>
<li>Click a map marker to see a thumbnail &amp; caption</li>
<li>Click the thumbnail to see a larger version</li>
</ul>
</div>

I tried adding <div id="testText"> but then the stuff below, powered by smugmug etc, went out of line, the background color worked though.

Caroline

[oxy8384]

I was not very clear. My guess is that the footer got messed up because I didn't explain how to 'close' the new div I told you to open... If you want to give it a quick try, add the two bold italic lines, below...

<div class="boxBottom" id="testBox">
<div id="testText">
<h3 class="title">After selecting one of the green markers above you can:</h3>
<ul class="noindent">
<li>Use the slider to zoom</li>
<li>Click &amp; drag to scroll</li>
<li>Click a map marker to see a thumbnail &amp; caption</li>
<li>Click the thumbnail to see a larger version</li>
</ul>
</div>
</div>


then add this to your CSS:
#testText {
width: 750px;
background-color: #f1f1f1;
}

We may need to tweak the format of the testText to get exactly what you want, but this should restore the gray background you had before...

Bill

[caroline]

I was not very clear. My guess is that the footer got messed up because I didn't explain how to 'close' the new div I told you to open... If you want to give it a quick try, add the two bold italic lines, below...

<div class="boxBottom" id="testBox">
<div id="testText">
<h3 class="title">After selecting one of the green markers above you can:</h3>
<ul class="noindent">
<li>Use the slider to zoom</li>
<li>Click &amp; drag to scroll</li>
<li>Click a map marker to see a thumbnail &amp; caption</li>
<li>Click the thumbnail to see a larger version</li>
</ul>
</div>
</div>


then add this to your CSS:
#testText {
width: 750px;
background-color: #f1f1f1;
}

We may need to tweak the format of the testText to get exactly what you want, but this should restore the gray background you had before...

Bill

Thats got it Bill, if it is possible to indent the text a couple of spaces so it is like 'around Mendip' in alignment that would be great - if its tricky no worries.

Strangely my galleries now appear on the Map page when I am logged in - not sure when that happened :scratch

Thanks for your help Bill.

Caroline

PS I'm on a Mac so can only see this in FF and Safari so if you could check it in IE please. Thx

[oxy8384]

In the CSS for the #testText, add this:
padding: 5px 10px;
border: 1px solid #ffffff;

and replace this HTML
<h3 class="title">
with this
<h3 class="title notopmargin">

The padding is off a bit in IE6, but I think this will straighten it out for all.

Bill

[caroline]

In the CSS for the #testText, add this:
padding: 5px 10px;
border: 1px solid #ffffff;

and replace this HTML
<h3 class="title">
with this
<h3 class="title notopmargin">

The padding is off a bit in IE6, but I think this will straighten it out for all.

Bill

Hi Bill
The grey box now overlaps on the RH side - I feel like I'm nit picking here about the text and wasting your time :) I have to rush off for a while now but unless you can see any easy (for you) answer I'll revert to the text as was. Hope this doesn't offend - I'm sure others have more pressing need for your assistance:D
Thanks anyway for everything.
Caroline

[oxy8384]

Caroline,
No worries! I'm in it until you're happy. I'll have an answer when you get back...

Bill

[oxy8384]

We can fix it in FF and Mozilla by simply removing the width declarations for both #testBox and #testText. But that appears to upset IE. If you delete the width for #testBox and change the width for #testText to 730px, that should fix both. But I can't tell for sure until you try it. Also, I can only test IE6 here. I have IE7 on my wife's laptop which I can test later. Post back here once you've made the changes and I'll see how IE looks...

Bill

[caroline]

We can fix it in FF and Mozilla by simply removing the width declarations for both #testBox and #testText. But that appears to upset IE. If you delete the width for #testBox and change the width for #testText to 730px, that should fix both. But I can't tell for sure until you try it. Also, I can only test IE6 here. I have IE7 on my wife's laptop which I can test later. Post back here once you've made the changes and I'll see how IE looks...

Bill

Hi Bill
I've done the above, take a peek and let me know :))
Thx
Caroline

[oxy8384]

...I'll check IE7 later tonight (unless someone, here, beats me to it.)
:thumb

Bill

[oxy8384]

It looks like we've lost the padding around for testText...

Whoops! You left out the semicolon after 'width:730px'.
Add that back in and you should be good to go...
Bill

[caroline]

It looks like we've lost the padding around for testText...

Whoops! You left out the semicolon after 'width:730px'.
Add that back in and you should be good to go...
Bill

Hi Bill
Fixed that now, silly me:wink

I've now put some text at the bottom of all pages but the same thing happens, I've tried using the code you gave me to fix the map page text but cant get it right. Could you take another look at it for me please ?
Is there a standard code I can add to fix this should it occur with other modifications ?

Cheers
Caroline

[Allen]

Hi Bill
Fixed that now, silly me:wink

I've now put some text at the bottom of all pages but the same thing happens, I've tried using the code you gave me to fix the map page text but cant get it right. Could you take another look at it for me please ?
Is there a standard code I can add to fix this should it occur with other modifications ?

Cheers
Caroline
Like this?:D

#myCopyright {
text-align:center;
margin:0;
padding:0;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
}

.map #myCopyright {
margin-top: -10px;
}

[oxy8384]

...he's at the 20, the 10! THE 5!! TOUCHDOOOOOOOOWN!!!!:thumb

Bill

[caroline]

Like this?:D

#myCopyright {
text-align:center;
margin:0;
padding:0;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
}

.map #myCopyright {
margin-top: -10px;
}

Nearly - the text clips the bottom of the slideshow box now.......................

And i swear I didn't have Carolines Home showing - what have I done ????
Caroline

[Allen]

Nearly - the text clips the bottom of the slideshow box now.......................

And i swear I didn't have Carolines Home showing - what have I done ????
Caroline
hehe, I saw that it clipped the frame.:D Should'a looked a it. Oops, I did,
you didn't pick up the quick last second edit I did in last post.

Remove red.

#myCopyright {
text-align:center;
margin:0;
margin-top:-10px;
padding:0;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
}

[oxy8384]

...in the non-map version.

It's first and inches! Caroline takes the ball...and a hush falls over the crowd...

[caroline]

hehe, I saw that it clipped the frame.:D Should'a looked a it. Oops, I did,
you didn't pick up the quick last second edit I did in last post.

Remove red.

#myCopyright {
text-align:center;
margin:0;
margin-top:-10px;
padding:0;
background: transparent url(/img/themes/White/small_center.jpg) repeat-y;
}

I didn't miss it - its there, what now guys ?
C

[oxy8384]

it's shifting the copyright stuff up. That's what's clipping the frame.:thumb

[Allen]

I didn't miss it - its there, what now guys ?
C
Caroline fumbles the ball!
Yep, you're right, the margin-top:-10px; is still there.:D Did you not see the
"remove that line"?

[caroline]

Caroline fumbles the ball!
Yep, you're right, the margin-top:-10px; is still there.:D Did you not see the
"remove that line"?

Goal ! Goal ! :clap:clap(was going to say I scored- not very polite:wink)

It looks just beauuuuutiful now - Thanks Allen & Bill:D

Caroline

[Allen]

Goal ! Goal ! :clap:clap(was going to say I scored- not very polite:wink)

It looks just beauuuuutiful now - Thanks Allen & Bill:D

Caroline
She shoots ... she scores.:clap

Common sports term here.



That a little milder. :D

[denisegoldberg]

Uh, I hate to tell you this, but in IE7, the right and left borders of the box surrounding the site are shifted to the right on the "powered by SmugMug" line.

--- Denise

[caroline]

Uh, I hate to tell you this, but in IE7, the right and left borders of the box surrounding the site are shifted to the right on the "powered by SmugMug" line.

--- Denise

Hi Denise, if only there was life without IE :)

Its back to Allen and Bill then - please ?

Thanks for the info Denise, if you spot anything else could you let me know, I don't have access to IE/PC.

Caroline

[Allen]

Uh, I hate to tell you this, but in IE7, the right and left borders of the box surrounding the site are shifted to the right on the "powered by SmugMug" line.

--- Denise
This might fix it for IE7.

#cobrand_footer {
~margin: 0 auto 0 0 !important;}

[caroline]

This might fix it for IE7.

#cobrand_footer {
~margin: 0 auto 0 0 !important;}

Could you check now please :)

Caroline

[Allen]

Could you check now please :)

Caroline
Perfect in IE7 now.:clap

[caroline]

Perfect in IE7 now.:thumb:thumb:clap


:thumb Cheers Allen

C

[denisegoldberg]

Looks good!

I really like your photo diary. Loved this shot: http://caroline2.smugmug.com/gallery/3134014/1/176652627/Large. What a beautiful spot!

--- Denise

[oxy8384]

It brings a tear to my eye!

Congratulations, Caroline! Looking good! :thumb

Bill

[caroline]

Looks good!

I really like your photo diary. Loved this shot: http://caroline2.smugmug.com/gallery/3134014/1/176652627/Large. What a beautiful spot!

--- Denise

Thanks Denise :D
That place is just about a mile from home, a regular walking place - I had forgotten how lovely early morning sun can be as the weather has been so bad here. That was Tuesday and its rained mostly sine then :((
Caroline

[caroline]

It brings a tear to my eye!

Congratulations, Caroline! Looking good! :thumb

Bill

Cheers Bill and thanks again to all the team:clap
Caroline