Place banner and navbar in the breadcrumb box?

[Lori_B]

Hello DGrinners! My first post. I've already learned a lot from lurking, and I've made a banner, navbar, and slideshow. I've even figured out how to embed my navbar into my banner. :D

I actually have three questions, so I'm going to make 3 separate posts. I hope that's the preferred way of handling questions... Anyway, here's my first question:

Most of the themes have a box where my slideshow shows up, and a small box above that which seems to hold the breadcrumbs. I've made my own banner and navbar, but they kinda float above the breadbox (ha!) and don't have a nice box/border around them. I'm sure there's a way to access the code for the breadbox in order to enlarge it and place my banner inside, but my css is limited.

Check me out at http://bellaluna.smugmug.com/

Thanks!
Lori

[Allen]

..
I actually have three questions, so I'm going to make 3 separate posts. I hope that's the preferred way of handling questions... Anyway, here's my first question:
...
Please keep all your posts in this thread so your changes are easier to follow.

[Allen]

Hello DGrinners! My first post. I've already learned a lot from lurking, and I've made a banner, navbar, and slideshow. I've even figured out how to embed my navbar into my banner. :D

I actually have three questions, so I'm going to make 3 separate posts. I hope that's the preferred way of handling questions... Anyway, here's my first question:

Most of the themes have a box where my slideshow shows up, and a small box above that which seems to hold the breadcrumbs. I've made my own banner and navbar, but they kinda float above the breadbox (ha!) and don't have a nice box/border around them. I'm sure there's a way to access the code for the breadbox in order to enlarge it and place my banner inside, but my css is limited.

Check me out at http://bellaluna.smugmug.com/

Thanks!
Lori
Start here.
Move this out of your "head tag" and put in your header customize box.

<div id="my_banner">
<ul>
<li><a href="http://bellaluna.smugmug.com">Home</a></li>
<li><a href="http://bellaluna.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://bellaluna.smugmug.com/weddings">Weddings</a></li>
<li><a href="http://bellaluna.smugmug.com/events">Events</a></li>
<li><a href="http://bellaluna.smugmug.com/Portraits">Portraits</a></li>
</ul>
</div>

[Lori_B]

Start here.
Move this out of your "head tag" and put in your header customize box.

<div id="my_banner">
<ul>
<li><a href="http://bellaluna.smugmug.com">Home</a></li>
<li><a href="http://bellaluna.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://bellaluna.smugmug.com/weddings">Weddings</a></li>
<li><a href="http://bellaluna.smugmug.com/events">Events</a></li>
<li><a href="http://bellaluna.smugmug.com/Portraits">Portraits</a></li>
</ul>
</div>

Done.

[Allen]

Done.
Great, looks good:thumb. Noticed you turned off the Smugmug header.

What's next?

[Lori_B]

Great, looks good:thumb. Noticed you turned off the Smugmug header.

What's next?

See the white box just below my banner? I want to extend that box up around my banner, or in other words, actually put my banner in that box. I don't like how my banner looks lonely and floating.

[Allen]

See the white box just below my banner? I want to extend that box up around my banner, or in other words, actually put my banner in that box. I don't like how my banner looks lonely and floating. Try this, adds a background to your banner. This is all work in progress so
this is just an option and can be changed/tweaked however you like.

In your header code add the red.

<div id="bannerBackground">
<div id="my_banner">
<ul>
<li><a href="http://bellaluna.smugmug.com">Home</a></li>
<li><a href="http://bellaluna.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://bellaluna.smugmug.com/weddings">Weddings</a></li>
<li><a href="http://bellaluna.smugmug.com/events">Events</a></li>
<li><a href="http://bellaluna.smugmug.com/Portraits">Portraits</a></li>
</ul>
</div>
</div>

In your CSS change to this.

/* banner */
#my_banner {
width: 750px;
height: 200px;
margin: 10px auto;
background: url(http://bellaluna.smugmug.com/photos/213075812-O.jpg) no-repeat;
}

#bannerBackground {
margin: 0 auto;
margin-bottom: 20px;
background-image:
url(/img/themes/FreshAir/buttonBackground.gif) no-repeat;
width: 770px;
height: 220px;
border:2px outset #FDFDFD;
}

[Allen]

Another option, think you'll like this one. This includes your galleries page.

/* banner */
#my_banner {
width: 750px;
height: 200px;
margin: 10px auto;
background: url(http://bellaluna.smugmug.com/photos/213075812-O.jpg) no-repeat;
}

#bannerBackground {
margin: 0 auto;
margin-bottom: 20px;
background-image:
url(/img/themes/FreshAir/buttonBackground.gif) no-repeat;
width: 770px;
height: 220px;
border:2px outset #FDFDFD;
}

.homepage #breadcrumb {display: none;}

#bioBox,
#galleriesBox.box{background: none;
border:2px outset #FDFDFD;
}


In your bio change the height to 440, it's one of these, don't remember which one.
createSWF(600,600, oPar...

[Lori_B]

Ok, we're getting there - thanks a ton, Allen!

I'm wondering, can we tweak this further? Can I make the box around my banner the same color as the breadbox and the gallery box? Also, is there a way to actually *merge* the breadbox and the banner box? I do like the breadcrumbs, but I dont like that they have a whole box to themselves. Selfish little guys. They really should share.

Thanks again,
Lori B.

[Allen]

Ok, we're getting there - thanks a ton, Allen!

I'm wondering, can we tweak this further? Can I make the box around my banner the same color as the breadbox and the gallery box? Also, is there a way to actually *merge* the breadbox and the banner box? I do like the breadcrumbs, but I dont like that they have a whole box to themselves. Selfish little guys. They really should share.

Thanks again,
Lori B.
Change the background to white and add the homepage breadcrumb
removal. The breadcrumb still shows on all your gallery pages.

#bannerBackground {
margin: 0 auto;
margin-bottom: 20px;
background: white;
width: 770px;
height: 220px;
border:2px outset #FDFDFD;
}

.homepage #breadcrumb {display: none;}

Did you see the slideshow height change above in post?

[Lori_B]

Did you see the slideshow height change above in post?

No, oops, somehow I missed that last post. I'll play with these and then come back.

Thanks!

[Lori_B]

No, oops, somehow I missed that last post. I'll play with these and then come back.

Thanks!
Ok, I'm back. Can I say, Allen, that you're amazing? I hadn't even asked how to make the border around my slideshow smaller, but you knew I was thinking it! :thumb

So I did a few things, in addition to the resize. I figured out that the Fresh Air template that I'm using actually uses an image to get a gradient very-light-grey-to-white for the boxes, so I went ahead and applied that to my galleries box to match the breadbox. For my banner however, I have a vignette around the image and it would be too difficult to have the vignette match the gradient. So I re-did my banner to vignette to white, and just made the banner box white. I'm really liking my progress so far! I'm grateful for the fish and I'm also trying to learn to fish as I go. :-)

I've got a few bugs to work out:

1) When I load my homepage logged out, an error message from Adobe Flash 9 appears in its own window:
-- begin error message--
An ActionScript has occurred.

RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/getChildAt()
at mx.core::Container/getChildAt()
at com.smugmug.controls::AlbumScroller/slideTo()
at slideshow/::splashFadeOver()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.effects::Effect/mx.effects:Effect::effectEndHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.effects::EffectInstance/finishEffect()
at mx.effects::EffectInstance/finishRepeat()
at mx.effects.effectClasses::TweenEffectInstance/onTweenEnd()
at mx.effects.effectClasses::FadeInstance/onTweenEnd()
at mx.effects::Tween/endTween()
at mx.effects::Tween/http://www.adobe.com/2006/flex/mx/internal::doInterval()
at mx.effects::Tween$/::timerHandler()
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()
--end error message--

I have no idea what any of this means.

2) When viewing an individual gallery, there's a little drop down menu for the viewer to select a viewing style. It's showing up in an odd place. Can I just get rid of this?

Thanks again................
Lori B.

[Allen]

...
2) When viewing an individual gallery, there's a little drop down menu for the viewer to select a viewing style. It's showing up in an odd place. Can I just get rid of this?

Thanks again................
Lori B.
No idea on the error message. Your show doesn't run in IE6 here, but that's just
my browser and haven't figured out why yet.

Set each gallery style under customize gallery and it disappears.

[Allen]

...
I figured out that the Fresh Air template that I'm using actually uses an image to get a gradient very-light-grey-to-white for the boxes,
...
A couple of posts ago, post #8, I has an option to add the gradient for the
backgrounds of the homepage, banner and galleries boxes.

I thought it looked really sharp with the see thru gradient. :D

[Lori_B]

A couple of posts ago, post #8, I has an option to add the gradient for the
backgrounds of the homepage, banner and galleries boxes.

I thought it looked really sharp with the see thru gradient. :D

Ah, so you did. I'm still trying to learn to "speak" CSS, so I didn't realize that was what that code meant.

I still don't know what to do about the error messages... perhaps that is related to your not seeing my slideshow in IE6?

Other questions, as long as I'm posting:
1) I've created a sharegroup for my personal photos to share with friends and family. That sharegroup is in smugmug black... is there a way to make it match the rest of my site?
2) I have Dreamweaver and Flash on my computer. How much can I do with these inside of SmugMug?

Lori B.

[Allen]

Ah, so you did. I'm still trying to learn to "speak" CSS, so I didn't realize that was what that code meant.

I still don't know what to do about the error messages... perhaps that is related to your not seeing my slideshow in IE6?

Other questions, as long as I'm posting:
1) I've created a sharegroup for my personal photos to share with friends and family. That sharegroup is in smugmug black... is there a way to make it match the rest of my site?
2) I have Dreamweaver and Flash on my computer. How much can I do with these inside of SmugMug?

Lori B. I haven't worked with sharegroups in a long time. I would think the
sharegroup page would use the default theme that you can set in your
control panel. All the galleries in the sharegroup can be customized though.

You could create your own flash files and show them on Smug but the files
would have to be hosted elsewhere.

Problem with using external programs is they add all kinds of overhead/junk
to your code. Best not to use them.