Theme help

[sthig]

Okay after countless hours of pouring over CSS (and telling myself Rome wasn't burned in a day) I'm at an impass.

I took Andy's "Midas" theme and have been trying to modify it.

What I want to do is insert a graphic (or my logo) complete with a live url that would go to my website.

So I'm providing an example of what I want.

THIS is my website with Andy's Midas theme applied and modified some (I'd like to do more but this css is a pain):

www.scojobo.com (http://www.scojobo.com)

What I'd like to do is add an image/banner/ above the slideshow to rest right on top of the border and look like this (please excuse the rough edges)

http://scojobo.smugmug.com/photos/68783220-L.jpg

I've read up on how to insert background images and position them like so. but what I'd like to do would be able to put a few images in here and there to my liking (like this: http://www.csszengarden.com/?cssfile=/171/171.css&page=2 <--how he got the images to come up on the sides totally blows my mind...I guess I'm still thinking in HTML).

For reference, here is Andy's MIDAS (http://www.dgrin.com/showthread.php?t=33271&highlight=midas)

oh and lastly, on my site...how can I make those two boxes connect or at least be closer -- or even better, a graphic between them would be excellent and my most preferred choice

Thanks!

[ivar]

Okay after countless hours of pouring over CSS (and telling myself Rome wasn't burned in a day) I'm at an impass.

I took Andy's "Midas" theme and have been trying to modify it.

What I want to do is insert a graphic (or my logo) complete with a live url that would go to my website.

So I'm providing an example of what I want.

THIS is my website with Andy's Midas theme applied and modified some (I'd like to do more but this css is a pain):

www.scojobo.com (http://www.scojobo.com)

What I'd like to do is add an image/banner/ above the slideshow to rest right on top of the border and look like this (please excuse the rough edges)

http://scojobo.smugmug.com/photos/68783220-Th.jpg

I've read up on how to insert background images and position them like so. but what I'd like to do would be able to put a few images in here and there to my liking (like this: http://www.csszengarden.com/?cssfile=/171/171.css&page=2 <--how he got the images to come up on the sides totally blows my mind...I guess I'm still thinking in HTML).

For reference, here is Andy's MIDAS (http://www.dgrin.com/showthread.php?t=33271&highlight=midas)

oh and lastly, on my site...how can I make those two boxes connect or at least be closer -- or even better, a graphic between them would be excellent and my most preferred choice

Thanks!
I'm not exactly sure what you are wanting to get eventually:scratch, but if you add this to your CSS, you will get a banner on top:

#myHeader {
height: 100px;
width: 700px;
background: url(/photos/XXXXXXX-O.gif) no-repeat;
margin: 0px auto;
}change the height/width appropriately, and change the X's to the correct image number.

[sthig]

I add that to my css or my css in the theme I'm working on?

[ivar]

I add that to my css or my css in the theme I'm working on?Ok, you have both custom CSS AND a custom theme? okay, well should work in both, but it is really up to you. If the header image is theme specific you can put it in the theme, if you want it on other pages, outside of the theme you are running too put it in your custom CSS, but it doesn't really matter.

[Mike Lane]

Scott, it's not so hard to build a theme on your own. In fact, I'd say it's more difficult to modify the work that somone has done. I'd say start over. Build your custom site from scratch and this time don't use a theme, use your customizations page so you can put in headers and footers and other html to go along with your CSS.

[sthig]

oh yeah?

hey thanks! I thought that's what you were supposed to do -to use a theme (I kept thinking "this is counter prductive").

thanks!
will get on this

[sthig]

mmmKay Mike,

I'm going to take your advice and start from block one (and move up from there).

So I made my layout (this was done in Adobe Illustrator, I can slice/dice/export this out anyway I want to).

I am posting and example of how I'd like my site to look:

See here:
http://static.flickr.com/44/144170900_ebb196e0d6_o.jpg

and this is the layout of how I want things

http://static.flickr.com/44/144170901_e293e7443a_o.jpg

Now to get that to work I have some questions about CSS.

1. I know how to put the BG image in, so it's that .background, right?

2. the burlap texture would be where my slideshow would go. Should that also be a BG image or would that go under .slideshow or something?

3. I've got the code for moving the boxes around but I want to make sure they they are right under the slideshow (which means I'd have to slice the texutre). So in the .whatevertheboxesarecsscode, do I tell it to be the bg image there as well? and can I get it flush with the top part?

4. my logo (scojobo) would be need to be clickable, I am unsure how to insert it (however I'm guessing Mike's reference before this post would help)

5. in the other pages, filmstrip, categories, smugmug, traditional, etc... I want to just use the BG, the Logo and place a burlap texture inside the boxes (containing the images). Is this possible? I'm guessing "yes" but I wanted to make sure.

6. I hope I'm not asking too much and hopefully this will play as a tool for the gratefully ignorant people on CSS like me.

[sthig]

holy crap, I'm figuring this out..in fact, css is rather simple once you get the hang of it!

[bwg]

holy crap, I'm figuring this out..in fact, css is rather simple once you get the hang of it!dude, i just visited your lillustration site....those are awesome! you're really talented :bow

[Andy]

dude, i just visited your lillustration site....those are awesome! you're really talented :bow

:agree

Your work is top-shelf. I enjoyed my tour of your illustrations. Sthig, give me a shout by email please (click on my name) I have a question for you :D

[Mike Lane]

I third that about your illiustrations. Wow! I know I would be very, very interested to learn about illustrator's powers. Maybe you'd be interested in giving us some hints?

That's for another thread though, let's talk about your photography site in here...

I like the design you're going for. It's going to be easy to do. I've taken your images above and I've put some red lines in where I'd like you to create individual images. I'll post it and if it doesn't make sense you can ask questions.

[sthig]

Mike,

in your own words...

"It appears you're having a problem with illustrator. Would you like some help with that?"
..I'm about on year 10 of using illustrator so I probably can answer and/or give a demo of anything you need.

and thanks,

wow I appreciate the compliments!

[sthig]

oh and actually I'm actually figuring it out except for a few things here and there (the pebble and my logo)

I've made a repeating burlap background and I've got the bg in check.

but the category box, what is the trigger for that? #category?

[Mike Lane]

oh and actually I'm actually figuring it out except for a few things here and there (the pebble and my logo)

I've made a repeating burlap background and I've got the bg in check.

but the category box, what is the trigger for that? #category?

Use all your tools :D The use the information > display element information tool in the firefox webdeveloper toolbar to find out that the categories box has an ID of #categoriesBox :thumb

[sthig]

no way....

wow that FF plugin is invaluable.

okay this is great.

Oh, Andy, email has been sent.

[sthig]

okay I wouldn't say I've got a PhD in CSS but I'm happy with the outcome thus so far!

www.scojobo.com

Now onto modifying the other pages (bleh!)

[sthig]

okay i've tried everything I know what to do to get rid of the grey box here:
http://www.scojobo.com/Wild

but nothing is working. What is it I should be doing to turn the grey into transparent? I got it to work on the homepage, but this is one is none cooperative.

actually i'd like to put the repeating burlap texture inside where the grey box is (and line up my boxes in there however i've been unsuccessful in doing so)

thanks!
Scott

[ivar]

okay i've tried everything I know what to do to get rid of the grey box here:
http://www.scojobo.com/Wild

but nothing is working. What is it I should be doing to turn the grey into transparent? I got it to work on the homepage, but this is one is none cooperative.

actually i'd like to put the repeating burlap texture inside where the grey box is (and line up my boxes in there however i've been unsuccessful in doing so)

thanks!
ScottHi Scott, do you mean the box which contains your miniBox'? if so, use the following:#subcategoriesBox .boxBottom {
background: transparent;
}

or#subcategoriesBox .boxBottom {
background: url(/photos/XXXXXXXX-O.png);
}if you want to use a background image.

[sthig]

that does indeed work however I can't seem to remove the border around it. I'm currently searching the code for it right now but I don't seem to be successful.

[ivar]

that does indeed work however I can't seem to remove the border around it. I'm currently searching the code for it right now but I don't seem to be successful.removing the code around the boxBottom you mean? #subcategoriesBox .boxBottom {
background: transparent;
border:0;
}

[sthig]

perfecto

[sthig]

okay I ran into another snag I can't seem to find an answer for here or on the internets.

My logo (scojobo) and my little zen pebble on my homepage (see www.scojobo.com) were, I thought, lined up like I wanted them however that doesn't seem to be the case now that I look at it on different screen sizes and browsers.

How can I get my logo (scojobo) to be perfectly centered and have the pebbled at the bottom right of the screen at all times (i'd prefer it if the pebble didn't scroll...it keeps the site all feng shooey that way :) )

I'm really learning a *lot* about css. I used to code in CFM and html (in the early days) so catching onto css was not so tough (but I'm still having trouble with this here and that there).

thanks!

[sthig]

I've run into another problem that is completely baffling me.

If you click here, all looks swell:
http://www.scojobo.com/World

but if you click here, there is a black line (where the repeating gif should be)
http://www.scojobo.com/Wild

it's the same class and everything however it's not seeming to carry over.

What am I doing wrong (aside from that and centering my logo and putting the pebble at the bottom)

[Mike Lane]

In your Wild category you're using a theme and in your World category you're not. Make sure all your pages are set to the default theme.

[sthig]

you beat me to it, I juuuuuuuuuuuuust figured that out!

hey, Mike if you check back in, can you tell me about how to center my logo and to make the pebble stay down in the lower right hand corner? (no scroll)

[sthig]

I figured out the centering of the logo, hooray!

now just the pebble

[Mike Lane]

you beat me to it, I juuuuuuuuuuuuust figured that out!

hey, Mike if you check back in, can you tell me about how to center my logo and to make the pebble stay down in the lower right hand corner? (no scroll)

The secret grasshopper is to make the pebble a background image of the body tag. Make it so it doesn't repeat and so it sets on the bottom right with fixed positioning.

When you can snatch that pebble, your traning is complete.

[sthig]

The secret grasshopper is to make the pebble a background image of the body tag. Make it so it doesn't repeat and so it sets on the bottom right with fixed positioning.

When you can snatch that pebble, your traning is complete.

you can do this with two images? right now I already have one there. I will try.

[Mike Lane]

you can do this with two images? right now I already have one there. I will try.

No you can't do that with 2 images. However, if you want to make it so the pebble stays put in all browsers then you must make it a background image in the body tag. If the other image isn't set to be fixed in place remove it and we'll use some ninja trickery for that.

[sthig]

actually I think I've got a work around for it as is (just with a push of the margins).

or is it funky on your screen?

[Mike Lane]

actually I think I've got a work around for it as is (just with a push of the margins).

or is it funky on your screen?

Funky...

[sthig]

Funky...

doh!

okay what is the secret ninja code then?

[Mike Lane]

http://www.dgrin.com/showpost.php?p=307090&postcount=29

Start there. Post the other images that you want on your page...

[sthig]

actually I think I'm happy with it as is. shoo...lotsa work but I learned a lot...

thanks for you help ya'll!!!