smugmug customization - getting creazy

[lbottan]

I'm really getting creazy with my site customization. What is wrong?

I still have the following problems:

-slideshow has a border but it is fixed and doesn't change with the image. So there is a lot of black area in between. Why?
-My logo is not completely left alignet
-My logo is not Clear. Ive created a png file but text seems low res...
-I would like to change my nav bar removing the two lines and adding only one line of an orange color

This is my CSS:
/* ----this part is to hide smugmug logo and add mine */
.smuglogo {
width: 275px !important;
height: 30px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png') !important;
}
.smuglogo[class] {
background-image: url(http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png) !important;
}

/* -----this part is to control userbio */
#bioBox {background:none;}
#bioText {display:none;}
#bioBox .boxBottom {border: 2px solid #996633 !important;}


/* ----to remove stuffs *//
.nophotos {display: none;}
.loggedIn .nophotos {display: block;}
.homepage #breadcrumb {display: none;}


/* -----nav management */
#toolbar a.nav {display: none;}
#toolbar {color: #000 !important;}






#smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px;margin-right: 15px;min-width: 755px;
width: auto;
}

h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #8cca1e !important;}
#pageNavigation_top, .pageOn, #photoNavTop .title, .miniBox a.nav {font-weight: normal !important;}
#PhotoBy, .smugmug #caption_bottom {text-align: center; border: none;}
#toolbar {display: none;}


/* this is for the flash slideshow backgroud */
.box {
background-color: #000000;
}


#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
float: right;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
}

#navcontainer ul li a:hover {
color: #9e793e;
}

#navcontainer {position: absolute;
top: 16px;
_top: 10px;
right: 15px;
width: 580px;
}

/* This is for the find page */

.find #bioBox,
.find #categoriesBox,
.find #galleriesBox {
display: none !important;
}
.find #keywordsBox {
display: block !important;
}
.find #datesBox {
display: block !important;
}
.find #mapBox {
display: block !important;
}
#map {height: 500px !important;}
.find #popularPhotos {
display: block !important;
}
.find #findText {display: block !important;}

.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #keywordsBox {display: none;}

#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}

#mysearch {
text-align: right;
}
.find #findText {display: block !important;}



#feeds {
display:none;
}

/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}

/* turn map this button off */
.map_this {
display: none;
}

/* turn off keyword display under photos */
#photoKeywords {
display: none;
}

/* Can I hide just the "date updated" info next to my gallery thumbs? */
p.updated {
display: none;
}



/* gallery page separated */

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}


/* If you want to have the galleries show up on your homepage when you are logged in */
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}

Top javascript:

// change the link on the SmugMug Logo

YE.onAvailable('homelink', function(e) {
this.href = "http://photos.lorenzobottan.it/";
this.firstChild.alt = "Lorenzo Bottan Photography";
this.firstChild.title = "Lorenzo Bottan Photography";
});

// removes the pipes characters in the toolbar header
YE.onAvailable('toolbar', function(e) {
this.innerHTML = this.innerHTML.replace(new RegExp(/\|/g),"");
});

//this is for the find page
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}

Head tag:

****** http-equiv="imagetoolbar" content="no">
****** http-equiv="imagetoolbar" content="false">

Custome Header:
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/find">Find</a></li>
</ul>
</div>

Custom footer:
<div></div>

<!-- this is for the find page -->

******** type="text/javascript">
if (hasPath("find"))
YD.addClass(document.body, "find");
</********

Bottom Javascript:

// fix the pesky pipes
YE.onAvailable("cobrand_footer", function() {this.innerHTML = this.innerHTML.replace(/\||what are feeds\?/gi, '');});
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}

// this is for separating the galleries page
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");


What is wrong?
Anything else massy?

[Allen]

I'm really getting creazy with my site customization. What is wrong?

I still have the following problems:

-slideshow has a border but it is fixed and doesn't change with the image. So there is a lot of black area in between. Why?
-My logo is not completely left alignet
-My logo is not Clear. Ive created a png file but text seems low res...
-I would like to change my nav bar removing the two lines and adding only one line of an orange color
...What is wrong?
Anything else massy?
Welcome to Dgrin :wave

Got a link to your site?

[lbottan]

a

[Allen]

I'm really getting creazy with my site customization. What is wrong?

I still have the following problems:

-slideshow has a border but it is fixed and doesn't change with the image. So there is a lot of black area in between. Why?
-My logo is not completely left alignet
-My logo is not Clear. Ive created a png file but text seems low res...
-I would like to change my nav bar removing the two lines and adding only one line of an orange color
...


What is wrong?
Anything else massy?
This in your CSS is adding that border around the biobox.

#bioBox .boxBottom {border: 2px solid #996633 !important;}


Go to your customize page in your control panel and check no for Smugmug
header. We'll do it using a different method.

Change your whole header box to this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/find">Find</a></li>
</ul>
</div> <!-- closes navcontainer -->

<div id="my_banner"> </div>

</div> <!-- closes my_header -->

Add this to the top of your CSS. This replaces all your current
#navcontainer rules so remove those.

/* bottom padding pushes line down */
/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 1px solid #996633;
}

#my_banner {
width: 275px;
height: 30px;
background: url(/photos/474138023_kEx4J-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/474138023_kEx4J-X3.png');
}

#navcontainer {
float: right;
margin-top: 5px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}

#navcontainer ul li a:hover {
color: #9e793e;
}

Remove this from your CSS, no longer needed.

/* ----this part is to hide smugmug logo and add mine */
.smuglogo {
width: 275px !important;
height: 30px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png') !important;
}
.smuglogo[class] {
background-image: url(http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png) !important;
}


/* -----nav management */
#toolbar a.nav {display: none;}
#toolbar {color: #000 !important;}

[lbottan]

This in your CSS is adding that border around the biobox.

#bioBox .boxBottom {border: 2px solid #996633 !important;}


Go to your customize page in your control panel and check no for Smugmug
header. We'll do it using a different method.

Change your whole header box to this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/find">Find</a></li>
</ul>
</div> <!-- closes navcontainer -->

<div id="my_banner"> </div>

</div> <!-- closes my_header -->

......




Thanks a lot!!!!

Now is much better but not completely solved. Still have the two problems:

-slideshow has a border but it is fixed and doesn't change with the image. So there is a lot of black area in between. Why?
-My logo is not Clear. Ive created a png file but text seems low res...

I recap my code

Bio:

<html>
********>
var ssConfig = {
showLogo: 'false',
randomStart: 'true',
AlbumID: '7366614',
newWindow: 'false',
transparent: 'true',
clickUrl: 'http://photos.lorenzobottan.it',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '350'
};
SM.flash.insertSlideshow(720, 720, ssConfig, 'transparent');
</********
</html>


CSS:


/* bottom padding pushes line down */
/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 1px solid #996633;
}
#my_banner {
width: 275px;
height: 30px;
background: url(/photos/474138023_kEx4J-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/474138023_kEx4J-X3.png');
}
#navcontainer {
float: right;
margin-top: 5px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}
#navcontainer ul li a:hover {
color: #9e793e;
}

/* -----this part is to control userbio */
#bioBox {background:none;}
#bioText {display:none;}
#bioBox .boxBottom {border: 2px solid #996633 !important;}

/* ----to remove stuffs *//
.nophotos {display: none;}
.loggedIn .nophotos {display: block;}
.homepage #breadcrumb {display: none;}

#smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px;margin-right: 15px;min-width: 755px;
width: auto;
}
h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #8cca1e !important;}
#pageNavigation_top, .pageOn, #photoNavTop .title, .miniBox a.nav {font-weight: normal !important;}
#PhotoBy, .smugmug #caption_bottom {text-align: center; border: none;}
#toolbar {display: none;}

/* this is for the flash slideshow backgroud */
.box {
background-color: #000000;
}

/* This is for the find page */
.find #bioBox,
.find #categoriesBox,
.find #galleriesBox {
display: none !important;
}
.find #keywordsBox {
display: block !important;
}
.find #datesBox {
display: block !important;
}
.find #mapBox {
display: block !important;
}
#map {height: 500px !important;}
.find #popularPhotos {
display: block !important;
}
.find #findText {display: block !important;}
.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #keywordsBox {display: none;}
#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
#mysearch {
text-align: right;
}
.find #findText {display: block !important;}

#feeds {
display:none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
/* turn map this button off */
.map_this {
display: none;
}
/* turn off keyword display under photos */
#photoKeywords {
display: none;
}
/* Can I hide just the "date updated" info next to my gallery thumbs? */
p.updated {
display: none;
}

/* gallery page separated */
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

/* If you want to have the galleries show up on your homepage when you are logged in */
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}



custom header:


<div id="my_header">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/find">Find</a></li>
</ul>
</div> <!-- closes navcontainer -->
<div id="my_banner"> </div>
</div> <!-- closes my_header -->




options of sidewide:

stretchy:yes
background: viewer controlled
display smugmug header: no
display footer: no

Thanks in advance for your support! very nice!

the rest is unchanged since before...

[Allen]

Thanks a lot!!!!

Now is much better but not completely solved. Still have the two problems:

-slideshow has a border but it is fixed and doesn't change with the image. So there is a lot of black area in between. Why?
-My logo is not Clear. Ive created a png file but text seems low res...

...

Thanks in advance for your support! very nice!

the rest is unchanged since before...
The biobox has a border and not the slideshow so all that black is the
background showing through. You can remove that border as I posted
above and add a border to your slideshow by adding the bold to your show
script in the bio.

...
showThumbs: 'false',
showButtons: 'false',
borderThickness: '8',
borderColor: '996633',
crossFadeSpeed: '350'
};

SM.flash.insertSlideshow(720, 720, ssConfig, 'transparent');
...

[lbottan]

This in your CSS is adding that border around the biobox.

#bioBox .boxBottom {border: 2px solid #996633 !important;}


Go to your customize page in your control panel and check no for Smugmug
header. We'll do it using a different method.

Change your whole header box to this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/find">Find</a></li>
</ul>
</div> <!-- closes navcontainer -->

<div id="my_banner"> </div>

</div> <!-- closes my_header -->
Add this to the top of your CSS. This replaces all your current
#navcontainer rules so remove those.

/* bottom padding pushes line down */
/* right/left padding indents banner and nav in from ends of line */
#my_header {
margin: 10px 40px 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 1px solid #996633;
}

#my_banner {
width: 275px;
height: 30px;
background: url(/photos/474138023_kEx4J-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/474138023_kEx4J-X3.png');
}

#navcontainer {
float: right;
margin-top: 5px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}

#navcontainer ul li a:hover {
color: #9e793e;
}
Remove this from your CSS, no longer needed.

/* ----this part is to hide smugmug logo and add mine */
.smuglogo {
width: 275px !important;
height: 30px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png') !important;
}
.smuglogo[class] {
background-image: url(http://photos.lorenzobottan.it/photos/474138023_kEx4J-X3.png) !important;
}


/* -----nav management */
#toolbar a.nav {display: none;}
#toolbar {color: #000 !important;}


Great!
It works perfectly!

Thanks a lot!