convert html template to php with css?

[titangen]

Hi,

I try to convert a html template into ezn 1.3.7 is very difficult for me .I've tried
to customize the css file but without good results

Look this

from this template http://www.dakana.com/

to this new zen 1.3.7 http://www.dakana.com/site/

Can you give me some advise for this convertion ( css , header, picture logo, ...) big chalenge !!

Thanks in advance




Have a nice day

Chris

Ps (I've tried to export the html to the php but without result)

[afo]

It looks pretty good! What exactly did you want to do?

You're not really importing the html into ZC. The php will generate the html with help from the stylesheet (css). You've made an excellent start.

[kobra]

You can do a vertical slice along the left edge and then the right edge of your design and create an image with these slices to be used as the background image for the body in the stylesheet.css. Additional slices for the mainWrapper and the headerWrapper will be needed, again as background images.

Create a map for the tabs and this is placed into the tpl_header.php file and you should be 90% there after this

[titangen]

Thanks for your replys

I looks difficult I would like the same logo in the same place !!! for the tabs I will copy this in the categories box header not so easy but I will try ...

but the logo and contact logo ??? I'm not sure what do you meant kobra with "do a vertical slice along the left edge and then the right edge of your design"

sorry for my poor css skills

could you give me some help for this ?

after that I will put this one in contribute template (not same colors)

Have a nice day

Chris

[kobra]

I'm not sure what do you meant kobra with "do a vertical slice along the left edge and then the right edge of your design"

Try Google for "image slice" and read about this procedure.

In your design there are basically 3 major elements:
1. The body background - that part around your main orange centered rectangle
2. The centered rectangle consists of 2 parts the header section or headerWrapper
3. The other is what is below the header or the mainWrapper

Now parts of your design overlap these elements and it is this line between these elements where you will have to cut or slice your images and attach them to the element as a background image
the basic code for the header & main is below

#mainWrapper {
	float: left;
	background-image: url(../images/your_image.jpg);
	background-repeat: no-repeat;
	text-align: left;
	width: 750px;
	vertical-align: top;
	border: 1px solid #9a9a9a;
	}

#headerWrapper{
	background-image: url(../images/your_image.jpg);
	background-repeat: no-repeat;
	background-color: #ffffff;
	height:75px;
	}

[titangen]

Haaa ok it's more clear

I must to put a background like in attach

is it possible to make the logo bigger than the 750 px from the main page like
in the old site http://www.dakana.com

and how can I move the NavMainWrapper under the logo ?

Thanks in advance

Have a nice day

Chris

[kobra]

is it possible to make the logo bigger than the 750 px from the main page

Not really, and why you have to cut/slice this image to separate the left and right pieces that are wider than the center of 750px

how can I move the NavMainWrapper under the logo ?

You can re-order the complete block - bof tho eof - in a copy of the tpl_header.php file that you will place into your template

[titangen]

Could you give my a example of this ?

with /images/logo.jpg

thanks in advance

Chris