Help changing rendering order of a couple of Divs

Hi, I'm new here and would like some help. I have some experience with MVC apps and CSS, so I am not a novice. I have taken a copy of Clean_Canvas theme and I am currently customising it to resemble a wordpress theme I use for the rest of my site.

Wordpress: http://boroniaparkframing.com.au/
Gallery3: http://boroniaparkframing.com.au/shop/

I have successfully made progress with the layouts in the theme CSS. Now I need to (I assume) move into the Gallery php and make some changes. I have some questions and need some help.

1. I want to move the Div g-info to render inside the Div g-album-grid (so it looks like the wordpress site). I can't find where these Divs exist in the php. I have downloaded a copy of the entire gallery3 folder to my PC, and searched for the text using windows search, but still couldn't find it. Can someone help me find where these divs exist?
2. I want to modify the g-site-menu Div so it renders 100% of the width of the site, but once again can't find it.
3. Is there a way I can change the php while still keeping the changes in the theme? ie can I take a copy of the php files and put htem in the theme folders hence making Gallery3 upgradable without recoding?
4. I made a copy of the clean_canvas, changed the theme.info and loaded it on my site in a new folder, but it doesn't appear in the themes list in my site. Am I missing a step?

That is enough to get me started. If someone can help with these things, I could probably finish it off.

Thanks in anticipation.

Matt

Yes, that is very nice, but I am trying to set up an online shop.

Can anyone help me with my questions?

Floridave

I have made some progress- thanks

I am now trying to render an image before and after the nav bar. I have added this code immediately after the #g-site-menu css. Trouble is it is not rendering. I have no idea why - this is the same code used in wordpress.

#g-site-menu:before{
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	display: block;
	background: url("http:/boroniaparkframing.com.au/images/nav-left.png") no-repeat;
	/* left: -50px;
	top: 0px; */

}

#g-site-menu:after {
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	display: block;
	background: url("http:/boroniaparkframing.com.au/images/nav-right.png") no-repeat;
	left: 0px;
	top: 0px;

}

The second issue I am having is that I can't find the CSS for the actual menu items. I am looking for g-menu-link and sf-with-ul and I can't find them in any of the gallery files. I don't actually understand WHY I can't find them, nor how to go about finding them. I have searched for the text using windows search, but for some reason that never seems to work. Any advice on how I can improve my efforts to find the CSS code I am looking for would be appreciated. I use Firefox inspector to find out the name of the css I need to find.

OK, thanks. I have tried all the conceivable permutations but can't get anything to work (with before/after).

Thanks. That's a good idea. The before and after is the way it is done in wordpress, and that allows for modifications to the width of the site. But given my width is already decided, I can take the approach you suggest.

Thanks for your help. I have tried this and it didn't work. But I am now thinking that maybe there is something different wrong. This is what I have.

#g-site-menu {
	bottom: 0;
	left: 0;
        height: 45px;
        width: 960px;
	background: url('http://boroniaparkframing.com.au/events/themes/clean_canvas/images/nav-bg.png') #8F4DB3 ;
        position: relative;
}

For some reason this background image is not rendering at all. I have tried everything I can think of, including the full path of the image. If I change the colour, it updates just fine. I have tried background-image: as an alternative, but that doesn't help. So why wouldn't this image be rendering if the colour is working?

So how did you find what the background was set to? I have changed it, I hope it is right now, but it still doesn't render.

Hey, thanks a lot for the tip. Firebug looks really good and helped me solve this problem (first step anyway). I have got the bg image happening, can now see that the before and after css code is not rendering into the live CSS. I will take a look at that when I have more time. If anyone has any ideas why that code doesn't come through, I would be please to hear from you. Could it be a CSS version issue?

I have got the background image fixed thanks to the tips and firebug. What is now interesting (using Firebug) is that not all the CSS is showing in Firebug

so I have this

#g-site-menu {
	bottom: 0;
	left: 0;
        height: 45px;
        width: 960px;
	background: url('../images/nav-bg.png') #8F4DB3;
        position: relative;
}

#g-site-menu:before {
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	display: block;
	background-image: url('../images/nav-left.png') no-repeat;
	left: 0px;
	top: 0px;

}

#g-site-menu:after {
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	display: block;
	background-image: url('../images/nav-right.png') no-repeat;
	left: 0px;
	top: 0px;

}

but this is what firebug shows

#g-site-menu {
    background: url("http://boroniaparkframing.com.au/events/themes/clean_canvas/css/../images/nav-bg.png") repeat scroll 0 0 #8F4DB3;
    bottom: 0;
    height: 45px;
    left: 0;
    position: relative;
    width: 960px;
}
#g-site-menu:after {
    content: " ";
    display: block;
    height: 50px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
}

So any ideas why:
1) the #g-site-menu:before is missing
2) the image reference in the "after" is missing