Wow! Great stuff . . . I think I have it together except my tabs are driving me crazy. The colored ones look cut off. Any ideas? I did try to edit them and no luck.
Wow! Great stuff . . . I think I have it together except my tabs are driving me crazy. The colored ones look cut off. Any ideas? I did try to edit them and no luck.
Sorry. I have no idea. Seems there might either be a mistake in the page code or a code conflict. Have you tried to remove your other CSS just so see if it fixes the page?
Sorry. I have no idea. Seems there might either be a mistake in the page code or a code conflict. Have you tried to remove your other CSS just so see if it fixes the page?
That's a great idea. Took out all the CSS . . . same issue. I can live with it and may do a document compare to see if there is something else out of whack. Thanks for looking.
That's a great idea. Took out all the CSS . . . same issue. I can live with it and may do a document compare to see if there is something else out of whack. Thanks for looking.
The next thing I would try is to remove all the CSS for the page completely and reinstall it in pieces. That what you know what code does what and maybe you can find your error along the way.
I'm assuming it's a CSS issue but since it's only on that page I do not know how to play with it using the WD tools.
The next thing I would try is to remove all the CSS for the page completely and reinstall it in pieces. That what you know what code does what and maybe you can find your error along the way.
I'm assuming it's a CSS issue but since it's only on that page I do not know how to play with it using the WD tools.
I fooled around with increasing the spacing to 150 px and made new colored tabs. Good enough so I can sleep tonight :-) Thanks for your help.
This is some great code to help describe the products offered. :ivar
I fooled around with increasing the spacing to 150 px and made new colored tabs. Good enough so I can sleep tonight :-) Thanks for your help.
This is some great code to help describe the products offered. :ivar
The bothersome thing is that you should not have the issues you are having AND you are not getting the curved corners on the tabs either... there has to be a code issue someplace.
The bothersome thing is that you should not have the issues you are having AND you are not getting the curved corners on the tabs either... there has to be a code issue someplace.
If I copy Aaron's code and keep the links, it works perfect. Once, I start directing to my images, it moves.
/*
/* =====================================
Define additional fonts to be used =
=====================================
Use Open Sans Condensed */
@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 300;
src:
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
}
/* This Print Page doesn't look right on mobile browsers because the
width of the screen is too small. It must be hidden and a different
page, formatted for small screens, will be displayed. */
@media only screen and (max-width: 1180px) {
.printPageForLargeScreens {
display: none;
}
}
/* For screens large enough, hide the special mobile version of the
print page. */
@media only screen and (min-width: 1181px) {
.printForMobileDevices {
display: none;
}
}
.ss-tabs a:hover, #MerchNames a:hover {
[COLOR="Red"] color: #f36f21 !important;[/COLOR]
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.2s ease-in;
}
.ss-tabs li {
list-style-type: square;
margin-left: 30px;
display: list-item !important;
}
.ss-tabs li strong {
[COLOR="red"] color: #E1DFDF;[/COLOR]
}
h2.openSans, h3.openSans, MerchNames a {
[COLOR="red"] font-family: 'Open Sans Condensed';[/COLOR]
}
.ss-tabs>input[type='radio'] {
position: absolute;
left: -9999px;
top: 0
}
.ss-tabs>input[type='radio']+label {
display: inline-block;
position: relative;
z-index: 0;
cursor: pointer;
vertical-align: bottom;
-webkit-box-shadow: none;
box-shadow: none;
height: 45px;
width: 120px;
top: 3px;
margin-right: 1px;
background-repeat: no-repeat;
text-indent: -9999px
}
.ss-tabs>input[type='radio']:checked+label {
width: 148px;
top: 3px;
margin: 0 -14px;
z-index: 2
}
[COLOR="Red"]/* YOU NEED TO UPDATE THIS SECTION. CHANGE THE URL'S TO POINT TO OUR WEBSITE */
[/COLOR]
/* The "Prints, Bay Photo" tab, unselected */
.ss-tabs>label:nth-of-type(1) {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-FmqnrBc/0/O/i-FmqnrBc.png[/COLOR]);
margin-left: 20px
}
/* The "Prints, Bay Photo" tab, selected */
.ss-tabs>input[type='radio']:checked:nth-of-type(1)+label {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-S4v4Hdp/0/O/i-S4v4Hdp.png[/COLOR]);
margin-left: 6px
}
/* The "Paper Types" tab, unselected */
.ss-tabs>label:nth-of-type(2) {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-tx5TH2v/0/O/i-tx5TH2v.png[/COLOR])
}
/* The "Paper Types" tab, selected */
.ss-tabs>input[type='radio']:checked:nth-of-type(2)+label {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-6TWMGFG/0/O/i-6TWMGFG.png[/COLOR])
}
/* The "Downloads" tab, unselected */
.ss-tabs>label:nth-of-type(3) {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-NVfq5fj/0/O/i-NVfq5fj.png[/COLOR])
}
/* The "Downloads" tab, selected */
.ss-tabs>input[type='radio']:checked:nth-of-type(3)+label {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-tDNWXTT/0/O/i-tDNWXTT.png[/COLOR])
}
/* The "Our Gaurantee" tab, unselected */
.ss-tabs>label:nth-of-type(4) {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-W4mKqzv/0/O/i-W4mKqzv.png[/COLOR])
}
/* The "Our Gaurantee" tab, selected */
.ss-tabs>input[type='radio']:checked:nth-of-type(4)+label {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-8jHSGbq/0/O/i-8jHSGbq.png[/COLOR])
}
/* The "Ordering Help" tab, unselected */
.ss-tabs>label:nth-of-type(5) {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-85g9WVG/0/O/i-85g9WVG.png[/COLOR])
}
/* The "Ordering Help" tab, selected */
.ss-tabs>input[type='radio']:checked:nth-of-type(5)+label {
background: url([COLOR="red"]http://www.aaronmphotography.com/photos/i-mPFtJp5/0/O/i-mPFtJp5.png[/COLOR])
}
/* END OF AREA YOU NEED TO UPDATE */
.ss-tabs>div {
display: none;
position: relative;
z-index: 1;
border-radius: 5px;
border: 2px solid #454545!important
}
.ss-tabs>input:nth-of-type(1):checked~div:nth-of-type(1), .ss-tabs>input:nth-of-type(2):checked~div:nth-of-type(2), .ss-tabs>input:nth-of-type(3):checked~div:nth-of-type(3), .ss-tabs>input:nth-of-type(4):checked~div:nth-of-type(4), .ss-tabs>input:nth-of-type(5):checked~div:nth-of-type(5), .ss-tabs>input:nth-of-type(6):checked~div:nth-of-type(6), .ss-tabs>input:nth-of-type(7):checked~div:nth-of-type(7), .ss-tabs>input:nth-of-type(8):checked~div:nth-of-type(8), .ss-tabs>input:nth-of-type(9):checked~div:nth-of-type(9), .ss-tabs>input:nth-of-type(10):checked~div:nth-of-type(10), .ss-tabs>input:nth-of-type(11):checked~div:nth-of-type(11), .ss-tabs>input:nth-of-type(12):checked~div:nth-of-type(12), .ss-tabs>input:nth-of-type(13):checked~div:nth-of-type(13), .ss-tabs>input:nth-of-type(14):checked~div:nth-of-type(14), .ss-tabs>input:nth-of-type(15):checked~div:nth-of-type(15), .ss-tabs>input:nth-of-type(16):checked~div:nth-of-type(16), .ss-tabs>input:nth-of-type(17):checked~div:nth-of-type(17), .ss-tabs>input:nth-of-type(18):checked~div:nth-of-type(18), .ss-tabs>input:nth-of-type(19):checked~div:nth-of-type(19), .ss-tabs>input:nth-of-type(20):checked~div:nth-of-type(20) {
display: block
}
.ss-tabs>div {
overflow: hidden
}
.miniBox {
width: 325px!important
}
.h3.title, h3.title a.nolink {
font-size: 17px;
font-weight: 400;
color: #fff
}
h3 .nav, .boxNote, .boxNote a {
font-size: 13px
}
.box {
margin: 5px 10px 20px
}
p span.title {
font-weight: 400
}
#price {
color: #fff;
padding-bottom: 15px
}
#divLine {
border-bottom: 1px solid #5e5e5e
}
tr#MerchNames td, tr#moreNames td {
padding-top: 8px;
color: #fff
}
tr#merchDesc td {
padding-top: 0;
padding-right: 54px;
width: 152px
}
tr#moreDesc td {
padding-top: 0;
padding-right: 54px;
width: 350px
}
.printProduct th {
color: #fff;
border-bottom: 1px solid #5e5e5e;
font-size: 13px;
padding: 0 -1px 8px 8px;
text-align: center
}
.pR td, .pRO td {
color: #c5c5c5;
padding: 3px 8px
}
p.pR {
color: #c5c5c5
}
.pR #printSize, .pRO #printSize {
color: #ccc;
font-weight: 700
}
.printSize {
color: #ccc;
font-weight: 700;
border-right: 1px solid #5e5e5e
}
#printSize a {
color: #ccc
}
.firstInGroup {
border-left: 1px dashed #5e5e5e
}
#Mounted {
padding-right: 5px
}
.aP {
font-family: "Arial Unicode MS"
}
.pRO {
background-color: #363636
}
.gPC {
border-left: 1px solid #5e5e5e
}
.wPC {
border-left: 1px dashed #5e5e5e
}
.wcPC {
border-left: 1px dashed #5e5e5e
}
table.MerchTable, table.moreTable {
border-bottom: 1px solid #090909;
border-top: 1px solid #393939;
padding-bottom: 15px
}
table#topTable {
border-top: 1px solid #222
}
table#bottomTable {
border-bottom: 1px solid #222
}
/ a:link, a:visited, a:active {
color: #f36f21 !important;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.2s ease-in;
}
a:hover {
color: #fff !important;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.2s ease-in;
}
#merchDesc, #moreDesc, .MerchTable {
color: #c5c5c5
}
#MerchNames, #moreNames {
font-size: 13pt;
color: #fff!important
}
#MerchNames a, #moreNames a {
text-decoration: none;
color: #fff!important
}
a.selectedColor {
color: #fff;
text-decoration: none
}
img.right {
clear: right;
float: right;
margin: 10px 0 10px 10px;
border-radius: 8px
}
.imgBorder {
border: solid 1px #999
}
a img {
border-radius: 8px
}
FANTASTIC CODE! Thank you! Copied all code and changed all urls to my website. Copied the files to my disk, unzipped them and copied them to an UNLISTED gallery nestled in an UNLISTED folder. My tabs are not printing any text in the tabs (which is just an image file). The tabs do work when clicked. Noted when I copied the files to smugmug, the png's for the tabs copied strangely. Could this be my problem or is it because they are in an unlisted gallery? Figuring issue is the uploaded files since they are messed up. See image of how they look in the gallery below. I copied the whole set of files like I normally copy files. The images looked fine on my disk. You can see the problem by going to my site and then use the PRINTS menu option. Also, I noticed in your CSS code above for these selected and unselected lines, that the first two have a semi-colon ending the lines while the rest do not. Is that an error?
EDIT: I changed the png's to jpg's and uploaded to new gallery. They copy looking just like the images below...while looking fine on my disk.
A secondary issue I might tackle. When clicking on, say, Float Mounted Metal Prints under the Prints tab, we are taken to a NEW tab in the browser. this page at the top and bottom have the pure SmugMug header and footer. Also, loose my custom header and menu list. I will try to edit those pages to get rid of the SM stuff and get my consistent header back. OR is this a different kind of issue? Thanks again for this development!!!!!
EDIT: ACK! When I go to one of those new tab pages, I do not even get the Customize option at the top of the page. Still logged in!
My tabs are not printing any text in the tabs (which is just an image file).
Did the page/ tabs look right when linked to leftquarks site? What code did you use to insert the image from your site? If it was an unlisted gallery issue nothing would show up.
Looked at what I could and I think your image link code is faulty. I suppose the images could have loaded incorrectly, but I don't see how.
Figuring issue is the uploaded files since they are messed up. See image of how they look in the gallery below.
The look of the image in the gallery is due to you seeing them as square thumbs. Not a problem.
I think you want png files so you get the transparency and they are quicker to load.
Also, I noticed in your CSS code above for these selected and unselected lines, that the first two have a semi-colon ending the lines while the rest do not. Is that an error?
No error, there is no other parameter after the image src code in those lines thus no ;.
A secondary issue I might tackle. When clicking on, say, Float Mounted Metal Prints under the Prints tab, we are taken to a NEW tab in the browser. this page at the top and bottom have the pure SmugMug header and footer. Also, loose my custom header and menu list. I will try to edit those pages to get rid of the SM stuff and get my consistent header back. OR is this a different kind of issue?
EDIT: ACK! When I go to one of those new tab pages, I do not even get the Customize option at the top of the page. Still logged in!
Those pages you are linking to are the smugmug pages. Therefore your customizations will not apply. Look at the urls. When I put this together originally I did not want to leave my site when viewing the SM info pages.
I had actually recreated most of those pages on my legacy site, but I found to to time consuming to do it again for new SM. SM also changes those pages from time to time... what a pain to keep adjusting them.
All I can think of is there is an error in copying the code or some other CSS is causing a conflict. I do not know how to see your CSS code since it's only on that page.
FANTASTIC CODE! Thank you! Copied all code and changed all urls to my website. Copied the files to my disk, unzipped them and copied them to an UNLISTED gallery nestled in an UNLISTED folder. My tabs are not printing any text in the tabs
I use FF WD tools and added LQ's CSS back in, removing what you had... it works perfectly w/ his code. Seems you may have made some sort of editting error.
I think you may have grabbed the wrong URL info for your tab images.
I use FF WD tools and added LQ's CSS back in, removing what you had... it works perfectly w/ his code. Seems you may have made some sort of editting error.
I think you may have grabbed the wrong URL info for your tab images.
Ok, I understand everything else said above. You nailed it with the above. I went back and changed one line (unselected Prints) back to the original LQ's code and that tab worked fine! Will have to take a look to see what error I made for EACH line. WOuld not have expected to make that many errors consistently. I'll try it again from the UNLISTED gallery and if no workee, will copy the png's to a LISTED gallery and see what happens.
I copied the Shared url from the XL3 code bar. Will look closer at those and see if I should have chosen differently.
Thanks for pointing out where to look!
And HAPPY THANKSGIVING and giving your time ON Thanksgiving!
Ok, I understand everything else said above. You nailed it with the above. I went back and changed one line (unselected Prints) back to the original LQ's code and that tab worked fine! Will have to take a look to see what error I made for EACH line. WOuld not have expected to make that many errors consistently. I'll try it again from the UNLISTED gallery and if no workee, will copy the png's to a LISTED gallery and see what happens.
I copied the Shared url from the XL3 code bar. Will look closer at those and see if I should have chosen differently.
Thanks for pointing out where to look!
And HAPPY THANKSGIVING and giving your time ON Thanksgiving!
I am not sure about your method for grabbing the url, but I have been doing it thru the keyword edit screen forever. I right click the thumb I need and select "Copy Image Location" then change the "Th" in the 2 spots in the url to "O".
I am not sure about your method for grabbing the url, but I have been doing it thru the keyword edit screen forever. I right click the thumb I need and select "Copy Image Location" then change the "Th" in the 2 spots in the url to "O".
READ BELOW FOR HISTORY - BUT GO TO BOTTOM FOR THE FIX!!!!!
Ok, tried that. Tried unlisted gallery which gives me the file with the two name "codes" and the two "Th"'s. No change. Tried from a listed gallery which gives one name "code", the actual filename, and the two "Th's. Changed all "Th"'s to uppercase letter "O". Still does not work. Noticed in the original coding, there was no second "O". Removed the second "O" and the "-". Still does not work.
Ok, caught a blurb from SmugMug about problems "replacing" files when using Chrome and Safari. Well, I was uploading originals, not replacing - but thought what the heck. I deleted the two Print files (selected and not selected). I then used Firefox to upload the two files back to the system. They look the same.
I am back to where I am now sure the problem is with the image files. Previously, you thought they were ok and that I was just seeing the Square version of the thumbnail. I should have stopped right there. Note in the example I gave above how the image looks on the right of my capture screen. EDIT - OOPS, DIDN'T CAPTURE IT IN THE EXAMPLE - MY BAD] It looks EXACTLY like the thumbnail! When .........................OH CRAP! I FIGURED IT OUT!
I just went to the LISTED Gallery and looked at the settings for the gallery. The gallery was set to XL3. I changed that to ORIGINAL and saved. BINGO, the image at the right hand side of the screen now looks like the properly formatted tab with rounded edges and all the text. I know this has to be it. I'll go back to the unlisted gallery (where I want these images) and turn on ORIGINAL, and re-copy the url, plug it in and see what happens........
WHAHOOOO! Perfect. I still had to re-upload the images before they showed up with proper size and text. Also, when THEN copying the urls, there was no "Th" in the url at all and the SINGLE "O" was already in the url - looking EXACTLY like the original coding. Thus, when creating the gallery to place the image files in, you SHOULD set it up for ORIGINAL images before uploading the images. The other images worked fine which were jpg's not png's. SO, maybe the system is handling them differently. I don't think this ORIGINAL image size "gotcha" was documented in the instructions. (or I missed it). [EDIT - JUST LOOKED. NOT DOCUMENTED - BY DEFAULT, MY GALLERIES ARE SET TO XL3]. I wonder if this is the same TAB problem another user above was experiencing where he was getting rectangular tabs instead of the rounded ones (don't remember if he had text problems, too)?!!
BTW, in the original coding in the GUARANTEE area, the word Guarantee is misspelled in the explainatory text area - says "gaurantee" on both selected and unselected!!!
Thank you for your help! You guided me to the right area and after figuring out I was not doing anything particularly wrong, I had the ephiphany or EUREKA moment! Hope this helps out others!
It looks like you only changed the "th" in one place in your image code. Did you put the images back in a private gallery?
If you have "Th" in the url, you have not selected the ORIGINAL image. Check your gallery settings to see the largest file available. Once set to ORIGINAL, check to see that the actual image on the right of the screen looks perfect. If not, you might have to re-upload the file. Putting the files in an unlisted gallery works fine. When using Copy Image Url, the result will NOT have a "Th" in it. If settings are not at ORIGINAL, the "O" (original) replacing the "Th" (thumb) will not work!
I fooled around with increasing the spacing to 150 px and made new colored tabs. Good enough so I can sleep tonight :-) Thanks for your help.
This is some great code to help describe the products offered. :ivar
Think I found your problem - similar to mine - look at my thread where I found my problem a few posts above.
If you have "Th" in the url, you have not selected the ORIGINAL image. Check your gallery settings to see the largest file available. Once set to ORIGINAL, check to see that the actual image on the right of the screen looks perfect. If not, you might have to re-upload the file. Putting the files in an unlisted gallery works fine. When using Copy Image Url ( I used RIGHT-CLICK as that gallery does NOT have right-click protection turned on), the result will NOT have a "Th" in it. If settings are not at ORIGINAL, the "O" (original) replacing the "Th" (thumb) will not work! With ORIGINAL size set for the gallery and the image looks perfect, the resulting copied url will not have two "TH"'s in it and the "O" will already be in the right place looking exactly like the original code! Good luck. Hope this is the issue as the fix was easy! I asked them to document the gallery should be set to ORIGINAL before uploading the images to it.
Think I found your problem - similar to mine - look at my thread where I found my problem a few posts above.
If you have "Th" in the url, you have not selected the ORIGINAL image. Check your gallery settings to see the largest file available. Once set to ORIGINAL, check to see that the actual image on the right of the screen looks perfect. If not, you might have to re-upload the file. Putting the files in an unlisted gallery works fine. When using Copy Image Url ( I used RIGHT-CLICK as that gallery does NOT have right-click protection turned on), the result will NOT have a "Th" in it. If settings are not at ORIGINAL, the "O" (original) replacing the "Th" (thumb) will not work! With ORIGINAL size set for the gallery and the image looks perfect, the resulting copied url will not have two "TH"'s in it and the "O" will already be in the right place looking exactly like the original code! Good luck. Hope this is the issue as the fix was easy! I asked them to document the gallery should be set to ORIGINAL before uploading the images to it.
Cheers and Happy Thanksgiving!
So bottom line... turn on originals in gallery where you store the tab images....
I never thought about that one since I have my site image gallery always set to have originals on.
Glad you got it fixed.
So bottom line... turn on originals in gallery where you store the tab images....
I never thought about that one since I have my site image gallery always set to have originals on.
Glad you got it fixed.
YEP! A simple fix for a problem with a complex appearance! I had a ton of custom code in my legacy site and a lot here in the unveiled site. Didn't seem right that I was messing up code so badly:bash. Finally realized the "O" (original) was staring me in the face the whole time. Then, one click, and it's fixed!
I had seen sites with similar PRINT advice and always wanted it. Thought it would be too complex and it would have been for me. I am mostly a copy and paster; but on occassion have customized the custom code. Used to be a programmer in a lifetime 15-23 years ago. Not now! I think this code is one of the best out there. It really helps polish a website and should give a professional appearance. Can't thank you guys enough for providing the code and instructions to the world. It had to take an awesome time putting it together - and then give it away for free. Y'all are the greatest!
Now I need to look at what I am allowing folks to purchase and modify it to match what is in the guide, or modify the guide! Tweak, tweak, tweak!
It would be great if some could post up the basic code for using tabs for other things, like a prices page, about FAQ etc, would just need the stripped out html and CSS to try and build on. I've tried to do it myself from the code here but can't figure out that is content and what isn't !
It would be great if some could post up the basic code for using tabs for other things, like a prices page, about FAQ etc, would just need the stripped out html and CSS to try and build on. I've tried to do it myself from the code here but can't figure out that is content and what isn't !
I can't find my posts where I originally posted it, but here's some code for basic tabs:
The bothersome thing is that you should not have the issues you are having AND you are not getting the curved corners on the tabs either... there has to be a code issue someplace.
I did a little investigation this weekend. This may have cleared the issue.
- View the image (already pasted in my directory) in "Original" view
- Click on the image, Sizes, Original, Right Click - View Image Info
- Copy the location of the last 4 directories /i-4VL9x3H/0/O/i-4VL9x3H.jpg
- Add to: http://www.brucefratto.com/Photos (specific to each owner of a site)
- The replacement image code would be an original or http://www.brucefratto.com/Photos/i-4VL9x3H/0/O/i-4VL9x3H.jpg
This seems to go with the tips. I can't tell if it is fixed since it varies by computers. Perhaps others can tell me if the images are showing from their computer?
Comments
just gives the viewer a path back to where they came from w/o using the back button.
http://www.brucefratto.com/Print-Page
--Bruce
Homepage
I see no "item" pictures nor do I see any tabs. Are they in a private gallery?
They were. I changed them to Unlisted.
--Bruce
Homepage
Sorry. I have no idea. Seems there might either be a mistake in the page code or a code conflict. Have you tried to remove your other CSS just so see if it fixes the page?
That's a great idea. Took out all the CSS . . . same issue. I can live with it and may do a document compare to see if there is something else out of whack. Thanks for looking.
--Bruce
Homepage
The next thing I would try is to remove all the CSS for the page completely and reinstall it in pieces. That what you know what code does what and maybe you can find your error along the way.
I'm assuming it's a CSS issue but since it's only on that page I do not know how to play with it using the WD tools.
I fooled around with increasing the spacing to 150 px and made new colored tabs. Good enough so I can sleep tonight :-) Thanks for your help.
This is some great code to help describe the products offered. :ivar
--Bruce
Homepage
If I copy Aaron's code and keep the links, it works perfect. Once, I start directing to my images, it moves.
--Bruce
Homepage
Can you post a copy of the code you are using for YOUR image link? Just one... I wonder id f you are using something wrong in your link.
I think I may have the issue... but not sure...
This is the code you are using for your image link
Change the "Th" to "O" in both places in all your image links...
FANTASTIC CODE! Thank you! Copied all code and changed all urls to my website. Copied the files to my disk, unzipped them and copied them to an UNLISTED gallery nestled in an UNLISTED folder. My tabs are not printing any text in the tabs (which is just an image file). The tabs do work when clicked. Noted when I copied the files to smugmug, the png's for the tabs copied strangely. Could this be my problem or is it because they are in an unlisted gallery? Figuring issue is the uploaded files since they are messed up. See image of how they look in the gallery below. I copied the whole set of files like I normally copy files. The images looked fine on my disk. You can see the problem by going to my site and then use the PRINTS menu option. Also, I noticed in your CSS code above for these selected and unselected lines, that the first two have a semi-colon ending the lines while the rest do not. Is that an error?
EDIT: I changed the png's to jpg's and uploaded to new gallery. They copy looking just like the images below...while looking fine on my disk.
A secondary issue I might tackle. When clicking on, say, Float Mounted Metal Prints under the Prints tab, we are taken to a NEW tab in the browser. this page at the top and bottom have the pure SmugMug header and footer. Also, loose my custom header and menu list. I will try to edit those pages to get rid of the SM stuff and get my consistent header back. OR is this a different kind of issue? Thanks again for this development!!!!!
EDIT: ACK! When I go to one of those new tab pages, I do not even get the Customize option at the top of the page. Still logged in!
Looked at what I could and I think your image link code is faulty. I suppose the images could have loaded incorrectly, but I don't see how.
The look of the image in the gallery is due to you seeing them as square thumbs. Not a problem.
I think you want png files so you get the transparency and they are quicker to load.
No error, there is no other parameter after the image src code in those lines thus no ;.
Those pages you are linking to are the smugmug pages. Therefore your customizations will not apply. Look at the urls. When I put this together originally I did not want to leave my site when viewing the SM info pages.
I had actually recreated most of those pages on my legacy site, but I found to to time consuming to do it again for new SM. SM also changes those pages from time to time... what a pain to keep adjusting them.
All I can think of is there is an error in copying the code or some other CSS is causing a conflict. I do not know how to see your CSS code since it's only on that page.
Edit:
I use FF WD tools and added LQ's CSS back in, removing what you had... it works perfectly w/ his code. Seems you may have made some sort of editting error.
I think you may have grabbed the wrong URL info for your tab images.
It looks like you only changed the "th" in one place in your image code. Did you put the images back in a private gallery?
Ok, I understand everything else said above. You nailed it with the above. I went back and changed one line (unselected Prints) back to the original LQ's code and that tab worked fine! Will have to take a look to see what error I made for EACH line. WOuld not have expected to make that many errors consistently. I'll try it again from the UNLISTED gallery and if no workee, will copy the png's to a LISTED gallery and see what happens.
I copied the Shared url from the XL3 code bar. Will look closer at those and see if I should have chosen differently.
Thanks for pointing out where to look!
And HAPPY THANKSGIVING and giving your time ON Thanksgiving!
I am not sure about your method for grabbing the url, but I have been doing it thru the keyword edit screen forever. I right click the thumb I need and select "Copy Image Location" then change the "Th" in the 2 spots in the url to "O".
READ BELOW FOR HISTORY - BUT GO TO BOTTOM FOR THE FIX!!!!!
Ok, tried that. Tried unlisted gallery which gives me the file with the two name "codes" and the two "Th"'s. No change. Tried from a listed gallery which gives one name "code", the actual filename, and the two "Th's. Changed all "Th"'s to uppercase letter "O". Still does not work. Noticed in the original coding, there was no second "O". Removed the second "O" and the "-". Still does not work.
Ok, caught a blurb from SmugMug about problems "replacing" files when using Chrome and Safari. Well, I was uploading originals, not replacing - but thought what the heck. I deleted the two Print files (selected and not selected). I then used Firefox to upload the two files back to the system. They look the same.
I am back to where I am now sure the problem is with the image files. Previously, you thought they were ok and that I was just seeing the Square version of the thumbnail. I should have stopped right there. Note in the example I gave above how the image looks on the right of my capture screen. EDIT - OOPS, DIDN'T CAPTURE IT IN THE EXAMPLE - MY BAD] It looks EXACTLY like the thumbnail! When .........................OH CRAP! I FIGURED IT OUT!
I just went to the LISTED Gallery and looked at the settings for the gallery. The gallery was set to XL3. I changed that to ORIGINAL and saved. BINGO, the image at the right hand side of the screen now looks like the properly formatted tab with rounded edges and all the text. I know this has to be it. I'll go back to the unlisted gallery (where I want these images) and turn on ORIGINAL, and re-copy the url, plug it in and see what happens........
WHAHOOOO! Perfect. I still had to re-upload the images before they showed up with proper size and text. Also, when THEN copying the urls, there was no "Th" in the url at all and the SINGLE "O" was already in the url - looking EXACTLY like the original coding. Thus, when creating the gallery to place the image files in, you SHOULD set it up for ORIGINAL images before uploading the images. The other images worked fine which were jpg's not png's. SO, maybe the system is handling them differently. I don't think this ORIGINAL image size "gotcha" was documented in the instructions. (or I missed it). [EDIT - JUST LOOKED. NOT DOCUMENTED - BY DEFAULT, MY GALLERIES ARE SET TO XL3]. I wonder if this is the same TAB problem another user above was experiencing where he was getting rectangular tabs instead of the rounded ones (don't remember if he had text problems, too)?!!
BTW, in the original coding in the GUARANTEE area, the word Guarantee is misspelled in the explainatory text area - says "gaurantee" on both selected and unselected!!!
Thank you for your help! You guided me to the right area and after figuring out I was not doing anything particularly wrong, I had the ephiphany or EUREKA moment! Hope this helps out others!
Happy Thanksgiving again!
If you have "Th" in the url, you have not selected the ORIGINAL image. Check your gallery settings to see the largest file available. Once set to ORIGINAL, check to see that the actual image on the right of the screen looks perfect. If not, you might have to re-upload the file. Putting the files in an unlisted gallery works fine. When using Copy Image Url, the result will NOT have a "Th" in it. If settings are not at ORIGINAL, the "O" (original) replacing the "Th" (thumb) will not work!
Oops, replying to wrong post - kind of!
Think I found your problem - similar to mine - look at my thread where I found my problem a few posts above.
If you have "Th" in the url, you have not selected the ORIGINAL image. Check your gallery settings to see the largest file available. Once set to ORIGINAL, check to see that the actual image on the right of the screen looks perfect. If not, you might have to re-upload the file. Putting the files in an unlisted gallery works fine. When using Copy Image Url ( I used RIGHT-CLICK as that gallery does NOT have right-click protection turned on), the result will NOT have a "Th" in it. If settings are not at ORIGINAL, the "O" (original) replacing the "Th" (thumb) will not work! With ORIGINAL size set for the gallery and the image looks perfect, the resulting copied url will not have two "TH"'s in it and the "O" will already be in the right place looking exactly like the original code! Good luck. Hope this is the issue as the fix was easy! I asked them to document the gallery should be set to ORIGINAL before uploading the images to it.
Cheers and Happy Thanksgiving!
So bottom line... turn on originals in gallery where you store the tab images....
I never thought about that one since I have my site image gallery always set to have originals on.
Glad you got it fixed.
YEP! A simple fix for a problem with a complex appearance! I had a ton of custom code in my legacy site and a lot here in the unveiled site. Didn't seem right that I was messing up code so badly:bash. Finally realized the "O" (original) was staring me in the face the whole time. Then, one click, and it's fixed!
I had seen sites with similar PRINT advice and always wanted it. Thought it would be too complex and it would have been for me. I am mostly a copy and paster; but on occassion have customized the custom code. Used to be a programmer in a lifetime 15-23 years ago. Not now! I think this code is one of the best out there. It really helps polish a website and should give a professional appearance. Can't thank you guys enough for providing the code and instructions to the world. It had to take an awesome time putting it together - and then give it away for free. Y'all are the greatest!
Now I need to look at what I am allowing folks to purchase and modify it to match what is in the guide, or modify the guide! Tweak, tweak, tweak!
I used your code as a basis for creating a dumbed down version of my own that doesn't use image for the tabs. You can check it out here:
http://www.amfdigitalmedia.com/PrintsForSale/AboutOurPrints
I purposely left out the content, in the event that anyone wants to grab just the code for the tabs.
CSS
.tabs { position: relative; min-height: 600px; clear: both; margin: 0; } .tab { float: left; } .tab label { background: magenta; padding: 12px; margin-right: 5px; position: relative; cursor: pointer; font-family: Roboto Condensed, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color: white; } .tab [type=radio] { display: none; } .content { position: absolute; top: 37px; left: 0; background: #515151; right: 0; bottom: 0; padding: 12px; } [type=radio]:checked ~ label { background: #515151; z-index: 2; font-family: Roboto Condensed, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; color: cyan; } [type=radio]:checked ~ label ~ .content { z-index: 1; }HTML
<br /><br /><br /><br /> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked="checked" /> <label for="tab-1">Prints</label> <div class="content"> stuff </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1" /> <label for="tab-2">Paper Types</label> <div class="content"> more stuff </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1" /> <label for="tab-3">Downloads</label> <div class="content"> other stuff </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1" /> <label for="tab-4">Our Guarantee</label> <div class="content"> other stuff </div> </div> <div class="tab"> <input type="radio" id="tab-5" name="tab-group-1" /> <label for="tab-5">Ordering Help</label> <div class="content"> other stuff </div> </div> </div>--Bruce
Homepage
Unlisted is OK, but I don't think passworded/private will allow outsiders to see the pics.
facebook - my facebook page please LIKE me!
I think that solved the concern. Thanks for the feedback. I'll check from another computer. :ivar
--Bruce
Homepage
I can't find my posts where I originally posted it, but here's some code for basic tabs:
http://www.sherlockphotography.org/Customisations/Tabbed-pages
Add this CSS for coloured tab headers like SmugMug's print options page:
/* Use SmugMug-like coloured tabs for inactive tabs */ .ss-tabs > label { color: white; } .ss-tabs > input[type="radio"]:nth-of-type(1):not(:checked) + label { background-color: #5f394f; } .ss-tabs > input[type="radio"]:nth-of-type(2):not(:checked) + label { background-color: #bd7328; } .ss-tabs > input[type="radio"]:nth-of-type(3):not(:checked) + label { background-color: #374c5d; }Please check out my gallery of customisations for the New SmugMug, more to come!
facebook - my facebook page please LIKE me!
I did a little investigation this weekend. This may have cleared the issue.
- View the image (already pasted in my directory) in "Original" view
- Click on the image, Sizes, Original, Right Click - View Image Info
- Copy the location of the last 4 directories /i-4VL9x3H/0/O/i-4VL9x3H.jpg
- Add to: http://www.brucefratto.com/Photos (specific to each owner of a site)
- The replacement image code would be an original or http://www.brucefratto.com/Photos/i-4VL9x3H/0/O/i-4VL9x3H.jpg
This seems to go with the tips. I can't tell if it is fixed since it varies by computers. Perhaps others can tell me if the images are showing from their computer?
--Bruce
Homepage