http://www.icyphoenix.com/viewtopic.php?f=36&t=6040
-----------------------------------
DWho
Sun 28 Jun, 2009 23:52

Help With Block Images
-----------------------------------
Hi I am making a new theme and I am trying to get them to work with the present icy template vars...

Basically the left hand blocks are made up of 3 images...

Header... for block title

Middle.... for block content

footer.... 

I have tried many methods using css and have come completely stuck either the block doesn't show its correct width of 180 or the content does not fit into the middle section...

Any help would be greatly appreciated..

thank you


-----------------------------------
elpulgas
Wed 08 Jul, 2009 22:16

Re: Help With Block Images
-----------------------------------
Well I don't understand very well what you want but I'll try:

If you only want the left blocks to have that style, then you must add something to it, like a div enclosing the blocks. That can be done in 3_column.tpl without problem. Then you can use something like my code:

[code linenumbers=false]

<style type="text/css">
.left-col .box-cl {background: url("images/blue/box-cl.png") 0 center repeat-y #f7f7f7;margin-bottom:5px;}
.left-col .box-cr {background: url("images/blue/box-cr.png") 100% center repeat-y;}
.left-col .box-bl {background: url("images/blue/box-bl.png") 0 100% no-repeat;} 
.left-col .box-br {background: url("images/blue/box-br.png") 100% 100% no-repeat;} 
.left-col .box-tl {background: url("images/blue/box-tl.png") 0 0 no-repeat;}
.left-col .box-tr {background: url("images/blue/box-tr.png") 100% 0 no-repeat; padding: 10px 8px 11px;}</style>

<div class="box-cl"><div class="box-cr"><div class="box-bl"><div class="box-br"><div class="box-tl"><div class="box-tr">
content here...
</div></div></div></div></div></div>
[/code]

That would apply only to items within the left column assuming you placed the div with the class left-col. If you have a fixed with then you can cut images and use only top instead of tr and tl.

Hope it helps you  :mrgreen:


-----------------------------------
DWho
Wed 08 Jul, 2009 22:47

Re: Help With Block Images
-----------------------------------
Thanks for the tips... as usual I have not explained myself correctly which is properly why no one replied....lol

what i want to do is still using 

{IMG_THL}{IMG_THC} etc

but so that instead of the images being split... like 3 for header 2 for the sides and 3 for the footer of the block...

I was hoping there was a way to make it so that you could have 1 image for the header 1 for the middle and 1 for the footer of the block....

images below might explain it better...

1 header image
 [img]http://www.icyphoenix.com/files/images/166/08_07_2009_21_44_14.png[/img] 

1 middle image
 [img]http://www.icyphoenix.com/files/images/166/08_07_2009_21_44_34.png[/img] 

1 footer image
 [img]http://www.icyphoenix.com/files/images/166/08_07_2009_21_44_58.png[/img] 

I hope that explains it better


-----------------------------------
elpulgas
Thu 09 Jul, 2009 16:25

Re: Help With Block Images
-----------------------------------
Well, that's more or less what I posted

Use something like this instead:
[code linenumbers=false]<style type="text/css">
.box-center {background: url("images/color/center.png") 0 center repeat-y #f7f7f7;margin-bottom:5px;}
.box-bottom {background: url("images/color/bottom.png") 0 100% no-repeat;}
.box-top {background: url("images/color/top.png") 100% 0 no-repeat; padding: 10px 8px 11px;}</style>

<div class="box-center"><div class="box-bottom"><div class="box-top">
content here...
</div></div></div> [/code]

Note that your top and bottom images are wider than the center image so you'll have to fix them for this to work. The padding can be adjusted as you need it. And if you want to use the {IMG_THL}{IMG_THC} codes, simply go to default.cfg and edit their values...like {IMG_THL}=$images.img_thl or something, find the variable ($images...) and edit the contet. It will have some divs in it. just put your around, or replace some, idk just try it out.

PS: If you have Firefox you can try your CSS with Firebug  :mrgreen:


-----------------------------------
DWho
Thu 09 Jul, 2009 16:51

Re: Help With Block Images
-----------------------------------
[quote user="elpulgas" post="41094"]Well, that's more or less what I posted

Use something like this instead:
[code linenumbers=false]<style type="text/css">
.box-center {background: url("images/color/center.png") 0 center repeat-y #f7f7f7;margin-bottom:5px;}
.box-bottom {background: url("images/color/bottom.png") 0 100% no-repeat;}
.box-top {background: url("images/color/top.png") 100% 0 no-repeat; padding: 10px 8px 11px;}</style>

<div class="box-center"><div class="box-bottom"><div class="box-top">
content here...
</div></div></div> [/code]

Note that your top and bottom images are wider than the center image so you'll have to fix them for this to work. The padding can be adjusted as you need it. And if you want to use the {IMG_THL}{IMG_THC} codes, simply go to default.cfg and edit their values...like {IMG_THL}=$images.img_thl or something, find the variable ($images...) and edit the contet. It will have some divs in it. just put your around, or replace some, idk just try it out.

PS: If you have Firefox you can try your CSS with Firebug  :mrgreen:[/quote]

Thanks for the info.... and my apologise for not reading your first post correctly... my only excuse was it was late and i was tired...

Thanks again I really appreciate the help...

thanks for the tip regarding firebug I was using a different add on for css but this one looks alot more interesting..

 :mrgreen:  :mrgreen: