Anyone use Blogspot?

brandofamily · August 30, 2013

On my legacy account I had a product page that was quite code intense. It use a lengthy CSS section and a bunch of JS calls to create a tabbed page similar to the SM catelog page.
Any users of Blogspot know if I can add code like this to a page there and then use the feed to have it show on my SM site?
I know how to get the blog page to show, but I need to know if I can host a highly code filled page there and get it to work.

thenickdude · August 30, 2013

I believe that SmugMug basically takes the text from Blogspot, then runs the page through the same HTML-sanitiser that they apply to our HTML content blocks, stripping out every piece of JavaScript inside. I just tried a test and "" tags were allowed, but "" tags definitely not...

I think I remember that product page, it had an epic series of tabs explaining all about the different prints and sizes, right? If it's the one I'm thinking of, I think it was broadly a copy of the same information presented in the SmugMug help pages?

I'm not sure which part the JavaScript was required for. Was it just the tabs? I think it is actually possible to create a series of clickable tabs with pure CSS these days, now that old Internet Explorer versions have finally fallen by the wayside.

brandofamily · August 30, 2013

Lamah wrote: »

I believe that SmugMug basically takes the text from Blogspot, then runs the page through the same HTML-sanitiser that they apply to our HTML content blocks, stripping out every piece of JavaScript inside. I just tried a test and "<b>" tags were allowed, but "<script>" tags definitely not...

I think I remember that product page, it had an epic series of tabs explaining all about the different prints and sizes, right? If it's the one I'm thinking of, I think it was broadly a copy of the same information presented in the SmugMug help pages?

I'm not sure which part the JavaScript was required for. Was it just the tabs? I think it is actually possible to create a series of clickable tabs with pure CSS these days, now that old Internet Explorer versions have finally fallen by the wayside.

Yes that is the page. Originally It was all html and css. But on old SM the length of the html was too much for the description box of a gallery (character limits), therfore I had to put it in the header section w/ a div and hide it from the rest of the galleries. Unfortunately that meant the code loaded on every page load and was then hidden... slooooowwwwing everything down.
To work around that I found an online code converter that changed each line into a JS call. That way I could call it only on the page where I wanted it. Thus the JS.
I have all the code saved from the original html / CSS version and am thinking about giving it a shot in NEW SM...
Not sure if the code is too long for an html box though.... I guess I'll try it and see what happens...

brandofamily · August 30, 2013

Lamah wrote: »

I believe that SmugMug basically takes the text from Blogspot, then runs the page through the same HTML-sanitiser that they apply to our HTML content blocks, stripping out every piece of JavaScript inside. I just tried a test and "<b>" tags were allowed, but "<script>" tags definitely not...

I think I remember that product page, it had an epic series of tabs explaining all about the different prints and sizes, right? If it's the one I'm thinking of, I think it was broadly a copy of the same information presented in the SmugMug help pages?

I'm not sure which part the JavaScript was required for. Was it just the tabs? I think it is actually possible to create a series of clickable tabs with pure CSS these days, now that old Internet Explorer versions have finally fallen by the wayside.

I looked at the code. I was wrong. The tabs are controlled via JS. I guess there will be no "epic tabbed" product page.<img src="https://us.v-cdn.net/6029383/emoji/eek7.gif" border="0" alt="" >

thenickdude · August 30, 2013

Can you share the code? I'm pretty sure I can get tabs working without JavaScript.

brandofamily · August 31, 2013

Lamah wrote: »

Can you share the code? I'm pretty sure I can get tabs working without JavaScript.

Code is way too long to load in a post. Go to this link and download the file... Be warned it very long. But I think you'll be able to find the breaks for the sections... The are labeled.

http://www.brandolinoimaging.com/Unlisted-Picture-Galleries/Other/Test

This is a link to the code prior to me converting it to JS calls. There is still a short JS section to make the tabs work. If you can't get it working no problem thanks.

thenickdude · August 31, 2013

Ah, the link is a 404, I think you must have the page set to private. Please set to Unlisted and copy the link again.

brandofamily · August 31, 2013

Lamah wrote: »

Ah, the link is a 404, I think you must have the page set to private. Please set to Unlisted and copy the link again.

Sorry... using old test galleries...
http://www.brandolinoimaging.com/Info-Pages/Test/n-dXbFC

thenickdude · August 31, 2013

That's 100kB, so I'm not surprised you noticed slow page loading from having this in the header of every page! I'm starting to work on this now.

thenickdude · August 31, 2013

Well, it's 90% of the way there now, I think. Add an HTML box to your page with this HTML:

http://pastebin.com/raw.php?i=2zUhL1cA

And this CSS:

http://pastebin.com/raw.php?i=yvnWDu7c

Please note that this doesn't work even the slightest bit in Internet Explorer 8 or earlier.

Here's what it looks like:

http://n-sherlock.smugmug.com/Test/n-t6LqN

brandofamily · August 31, 2013

Lamah wrote: »

Well, it's 90% of the way there now, I think. Add an HTML box to your page with this HTML:

http://pastebin.com/raw.php?i=2zUhL1cA

And this CSS:

http://pastebin.com/raw.php?i=yvnWDu7c

Please note that this doesn't work even the slightest bit in Internet Explorer 8 or earlier.

Here's what it looks like:

http://n-sherlock.smugmug.com/Test/n-t6LqN

Just got home and pasted in the code.... It looks very nice. One question though, because I tried and could not figure it out, can the tabs be made to use images instead of text?

brandofamily · August 31, 2013

I can get images to use if you can show me how to implement them. Here are 2 from my gallery...

Active Guarantee:
http://www.brandolinoimaging.com/photos/i-RFZz92S/0/O/i-RFZz92S-O.png

Inactive Guarantee:
http://www.brandolinoimaging.com/photos/i-Gm7xPBM/0/O/i-Gm7xPBM-O.png

thenickdude · August 31, 2013

They must be in a private gallery, because I can't see them.

I can add those images in later today.

brandofamily · August 31, 2013

Lamah wrote: »

They must be in a private gallery, because I can't see them.

I can add those images in later today.

That's odd. They are in the same gallery as all my site images. Maybe copy the link and paste it in the browser. They are showing up when I'm logged out too.

If you can do the one I can figure out the rest. Thanks a ton. If I can get that page running my site will be back to legacy version but actually better.

I have updated it all from the current SM pages and have it on my page here...
http://www.brandolinoimaging.com/Info-Pages/Test-2/n-zvWvH

As you can see I changed the background color of the content box, but the tabs are still hard to see.

thenickdude · September 1, 2013

Okay, there's just one button for you still to add! Replace all the CSS with this code:

/* Hide the radio buttons used to remember the selected tab by shoving them way off-screen */
.ss-tabs > input[type="radio"] {
	position: absolute;
	left: -9999px;
	top: 0;
}

/* Default style for tab headers */
.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;
}

/* Active style of tab headers */
.ss-tabs > input[type="radio"]:checked + label {
	width: 148px;
	top: 3px;
	margin: 0 -14px;
	
	/* Float on top of the tab content panel border */
	z-index: 2;
}

/* Image tabs */
.ss-tabs > label:nth-of-type(1) {
	background: url(http://www.smugmug.com/img/tabs/cat_prints_Bayinactive2.png);
	margin-left: 20px;
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(1) + label {
	background: url(http://www.smugmug.com/img/tabs/cat_prints_Bayactive2.png);
	margin-left: 6px;
}
.ss-tabs > label:nth-of-type(2) {
	background: url(http://www.smugmug.com/img/tabs/cat_prints_EZinactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(2) + label {
	background: url(http://www.smugmug.com/img/tabs/cat_prints_EZactive2.png);
}
.ss-tabs > label:nth-of-type(3) {
	background: url(http://www.smugmug.com/img/tabs/cat_merchandise_inactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(3) + label {
	background: url(http://www.smugmug.com/img/tabs/cat_merchandise_active2.png);
}
.ss-tabs > label:nth-of-type(4) {
	background: url(http://www.smugmug.com/img/tabs/cat_more_inactive.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(4) + label {
	background: url(http://www.smugmug.com/img/tabs/cat_more_active.png);
}
.ss-tabs > label:nth-of-type(5) {
	background: url(http://www.smugmug.com/img/tabs/cat_downloads_inactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(5) + label {
	background: url(http://www.smugmug.com/img/tabs/cat_downloads_active2.png);
}
.ss-tabs > label:nth-of-type(6) {
	background: url(http://www.brandolinoimaging.com/photos/i-Gm7xPBM/0/O/i-Gm7xPBM-O.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(6) + label {
	background: url(http://www.brandolinoimaging.com/photos/i-RFZz92S/0/O/i-RFZz92S-O.png);
}
.ss-tabs > label:nth-of-type(7) {
	background: url(http://www.brandolinoimaging.com/photos/i-Gm7xPBM/0/O/i-Gm7xPBM-O.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(7) + label {
	background: url(http://www.brandolinoimaging.com/photos/i-RFZz92S/0/O/i-RFZz92S-O.png);
}

/* Tab body style */
.ss-tabs > div {
	display: none;
	position: relative;
	z-index: 1;
	border-radius: 5px;
	border: 2px solid #454545 !important;
}

/* Support a reasonable number of possible tabs: */
.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;
}


/* **** Here begins the CSS specific to the SmugMug help page emulation **** */

.ss-tabs>div {
	overflow: hidden;
}

.miniBox {
	width: 325px !important;
}

.h3.title, h3.title a.nolink {
	font-size: 17px;
	font-weight: normal;
	color: #fff;
}

h3 .nav, .boxNote, .boxNote a {
	font-size: 13px;
}

.box {
	margin: 5px 10px 20px;
}

p span.title {
	font-weight: normal;
}

#price {
	color: #FFFFFF;
	padding-bottom: 15px;
}

#divLine {
	border-bottom: 1px solid #5E5E5E;
}

tr#MerchNames td,tr#moreNames td {
	padding-top: 8px;
	color: #FFFFFF;
}

tr#merchDesc td {
	padding-top: 0px;
	padding-right: 54px;
	width: 152px;
}

tr#moreDesc td {
	padding-top: 0px;
	padding-right: 54px;
	width: 350px;
}

.printProduct th {
	color: #FFFFFF;
	border-bottom: 1px solid #5E5E5E;
	font-size: 13px;
	padding: 0px -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: bold;
}

.printSize {
	color: #CCC;
	font-weight: bold;
	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 #222222;
}

table#bottomTable {
	border-bottom: 1px solid #222222;
}

a:link, a:visited, a:active {
	color: #CCC;
}

a:hover {
	color: #fff;
}

strong,b {
	color: #CCC !important;
}

h3 {
	color: #FFFFFF;
	font-family: "Trebuchet MS", Arial;
	font-size: 16pt;
	font-size-adjust: none;
	font-stretch: normal;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: normal;
	margin-top: 20px;
	margin-bottom: 10px;
}

#merchDesc, #moreDesc {
	color: #C5C5C5;
}

#MerchNames, #moreNames {
	font-size: 13pt;
	color: #FFFFFF !important;
}

#MerchNames a,#moreNames a {
	text-decoration: none;
	color: #FFFFFF !important;
}

a.selectedColor {
	color: white;
	text-decoration: none;
}

img.right {
	clear: right;
	float: right;
	margin: 10px 0 10px 10px;
}

.imgBorder {
	border: solid 1px #999999;
}

Replace the old tab headers code:

<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked"> 
		<label for="ss-tab-radio-1" class="sm-panel-content sm-panel-flat">Bay Photo</label> 
		<input id="ss-tab-radio-2" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-2" class="sm-panel-content sm-panel-flat">EZ-Prints</label> 
		<input id="ss-tab-radio-3" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-3" class="sm-panel-content sm-panel-flat">Merchandise</label> 
		<input id="ss-tab-radio-4" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-4" class="sm-panel-content sm-panel-flat">Books &amp; More</label> 
		<input id="ss-tab-radio-5" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-5" class="sm-panel-content sm-panel-flat">Downloads</label> 
		<input id="ss-tab-radio-6" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-6" class="sm-panel-content sm-panel-flat">Our Guarantee</label>
		<input id="ss-tab-radio-7" type="radio" name="ss-selected-tab"> 
		<label for="ss-tab-radio-7" class="sm-panel-content sm-panel-flat">Ordering Help</label>

With:

<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked"><label for="ss-tab-radio-1">Bay Photo</label><input id="ss-tab-radio-2" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-2">EZ-Prints</label><input id="ss-tab-radio-3" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-3">Merchandise</label><input id="ss-tab-radio-4" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-4">Books &amp; More</label><input id="ss-tab-radio-5" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-5">Downloads</label><input id="ss-tab-radio-6" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-6">Our Guarantee</label><input id="ss-tab-radio-7" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-7">Ordering Help</label>

This is what it looks like:

http://www.sherlockphotography.org/Test/n-t6LqN

(I think you have external linking disabled for the photos in your gallery, so your custom button image might not show up when embedded on my site there)

brandofamily · September 1, 2013

Lamah wrote: »

Okay, there's just one button for you still to add! Replace all the CSS with this code:

/* Hide the radio buttons used to remember the selected tab by shoving them way off-screen */
.ss-tabs > input[type="radio"] {
    position: absolute;
    left: -9999px;
    top: 0;
}

/* Default style for tab headers */
.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;
}

/* Active style of tab headers */
.ss-tabs > input[type="radio"]:checked + label {
    width: 148px;
    top: 3px;
    margin: 0 -14px;
    
    /* Float on top of the tab content panel border */
    z-index: 2;
}

/* Image tabs */
.ss-tabs > label:nth-of-type(1) {
    background: url(http://www.smugmug.com/img/tabs/cat_prints_Bayinactive2.png);
    margin-left: 20px;
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(1) + label {
    background: url(http://www.smugmug.com/img/tabs/cat_prints_Bayactive2.png);
    margin-left: 6px;
}
.ss-tabs > label:nth-of-type(2) {
    background: url(http://www.smugmug.com/img/tabs/cat_prints_EZinactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(2) + label {
    background: url(http://www.smugmug.com/img/tabs/cat_prints_EZactive2.png);
}
.ss-tabs > label:nth-of-type(3) {
    background: url(http://www.smugmug.com/img/tabs/cat_merchandise_inactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(3) + label {
    background: url(http://www.smugmug.com/img/tabs/cat_merchandise_active2.png);
}
.ss-tabs > label:nth-of-type(4) {
    background: url(http://www.smugmug.com/img/tabs/cat_more_inactive.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(4) + label {
    background: url(http://www.smugmug.com/img/tabs/cat_more_active.png);
}
.ss-tabs > label:nth-of-type(5) {
    background: url(http://www.smugmug.com/img/tabs/cat_downloads_inactive2.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(5) + label {
    background: url(http://www.smugmug.com/img/tabs/cat_downloads_active2.png);
}
.ss-tabs > label:nth-of-type(6) {
    background: url(http://www.brandolinoimaging.com/photos/i-Gm7xPBM/0/O/i-Gm7xPBM-O.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(6) + label {
    background: url(http://www.brandolinoimaging.com/photos/i-RFZz92S/0/O/i-RFZz92S-O.png);
}
.ss-tabs > label:nth-of-type(7) {
    background: url(http://www.brandolinoimaging.com/photos/i-Gm7xPBM/0/O/i-Gm7xPBM-O.png);
}
.ss-tabs > input[type="radio"]:checked:nth-of-type(7) + label {
    background: url(http://www.brandolinoimaging.com/photos/i-RFZz92S/0/O/i-RFZz92S-O.png);
}

/* Tab body style */
.ss-tabs > div {
    display: none;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    border: 2px solid #454545 !important;
}

/* Support a reasonable number of possible tabs: */
.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;
}


/* **** Here begins the CSS specific to the SmugMug help page emulation **** */

.ss-tabs>div {
    overflow: hidden;
}

.miniBox {
    width: 325px !important;
}

.h3.title, h3.title a.nolink {
    font-size: 17px;
    font-weight: normal;
    color: #fff;
}

h3 .nav, .boxNote, .boxNote a {
    font-size: 13px;
}

.box {
    margin: 5px 10px 20px;
}

p span.title {
    font-weight: normal;
}

#price {
    color: #FFFFFF;
    padding-bottom: 15px;
}

#divLine {
    border-bottom: 1px solid #5E5E5E;
}

tr#MerchNames td,tr#moreNames td {
    padding-top: 8px;
    color: #FFFFFF;
}

tr#merchDesc td {
    padding-top: 0px;
    padding-right: 54px;
    width: 152px;
}

tr#moreDesc td {
    padding-top: 0px;
    padding-right: 54px;
    width: 350px;
}

.printProduct th {
    color: #FFFFFF;
    border-bottom: 1px solid #5E5E5E;
    font-size: 13px;
    padding: 0px -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: bold;
}

.printSize {
    color: #CCC;
    font-weight: bold;
    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 #222222;
}

table#bottomTable {
    border-bottom: 1px solid #222222;
}

a:link, a:visited, a:active {
    color: #CCC;
}

a:hover {
    color: #fff;
}

strong,b {
    color: #CCC !important;
}

h3 {
    color: #FFFFFF;
    font-family: "Trebuchet MS", Arial;
    font-size: 16pt;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 10px;
}

#merchDesc, #moreDesc {
    color: #C5C5C5;
}

#MerchNames, #moreNames {
    font-size: 13pt;
    color: #FFFFFF !important;
}

#MerchNames a,#moreNames a {
    text-decoration: none;
    color: #FFFFFF !important;
}

a.selectedColor {
    color: white;
    text-decoration: none;
}

img.right {
    clear: right;
    float: right;
    margin: 10px 0 10px 10px;
}

.imgBorder {
    border: solid 1px #999999;
}

Replace the old tab headers code:

<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked"> 
        <label for="ss-tab-radio-1" class="sm-panel-content sm-panel-flat">Bay Photo</label> 
        <input id="ss-tab-radio-2" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-2" class="sm-panel-content sm-panel-flat">EZ-Prints</label> 
        <input id="ss-tab-radio-3" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-3" class="sm-panel-content sm-panel-flat">Merchandise</label> 
        <input id="ss-tab-radio-4" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-4" class="sm-panel-content sm-panel-flat">Books &amp; More</label> 
        <input id="ss-tab-radio-5" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-5" class="sm-panel-content sm-panel-flat">Downloads</label> 
        <input id="ss-tab-radio-6" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-6" class="sm-panel-content sm-panel-flat">Our Guarantee</label>
        <input id="ss-tab-radio-7" type="radio" name="ss-selected-tab"> 
        <label for="ss-tab-radio-7" class="sm-panel-content sm-panel-flat">Ordering Help</label>

With:

<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked"><label for="ss-tab-radio-1">Bay Photo</label><input id="ss-tab-radio-2" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-2">EZ-Prints</label><input id="ss-tab-radio-3" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-3">Merchandise</label><input id="ss-tab-radio-4" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-4">Books &amp; More</label><input id="ss-tab-radio-5" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-5">Downloads</label><input id="ss-tab-radio-6" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-6">Our Guarantee</label><input id="ss-tab-radio-7" type="radio" name="ss-selected-tab"><label for="ss-tab-radio-7">Ordering Help</label>

This is what it looks like:

http://www.sherlockphotography.org/Test/n-t6LqN

(I think you have external linking disabled for the photos in your gallery, so your custom button image might not show up when embedded on my site there)

THANKS!!!!!!!
I have it all working and even styled a bit more.. I actually loaded all the images into my Site Image gallery too, so I'm linking to my site for the images and not SM.
Many of the links go to the SM pages, but that keeps me from recreating them. Hope SM doesn't drop them anytime soon.

http://www.brandolinoimaging.com/Info-Pages/Help-Pages/n-zvWvH

Anyone use Blogspot?

Comments