Forums  ›  Dolphin 6.1  ›  General
 

Borders for designblocks

I am trying to use images for borders around each of the blocks, I want the images to surround both:

*Designboxfirst

and

*Boxfirstheader

==========================================

I have come close, but can only get the images to show all jumbled - first off, what should I be editing? And next should I do it with a <img class> in one of the html templates? Or should I use a <div class>, then assign the images through css?

You might try editing or changing /templates/tmpl_uni/designbox_1.html
(tmpl_uni) being the template name of your template.

Depending on what you have for your template, and if you have made any changes to this or other files related to it.

You could edit or add a table, tr, td, etc. with the background url. Maybe <table background="http://www.mysite.com/folder/myimage.jpg">

If you create a table with a tr/td you can potentially create a border around the design boxes. It's a matter of playing around with it.

The green square looking images I have in the design boxes I actually added by editing the file designbox_1.html, designbox_2.html. It worked out pretty well actually.

Just think standard html for it. Keep the references to
<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
But then add your standard table afterwards you should be able to accomplish what you are after.

Here is what my designbox_1.html looks like to get the green grid squares:
<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="10" bgcolor="#000000" background="http://www.familybin.com/3link/template/BlueSkin/img/cat-bull-small.gif" border="0" width="99%">

<tr bgcolor="#000000"><td width="2%"></td>
<td width="98%" background="http://www.dialme.com/templates/tmpl_uni/images/green_grid.gif">
__designbox_content__

</td>
</tr>
</table>

I had to add the td column 2% to get it to line up right, but aside from that it looks pretty decent I think.

Ok, I got it to work great in Firefox, Chrome, and Opera. However, IE is throwing up some weird lines that I don't realize from my code. If you have any idea what I am doing wrong.


======================


<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td height="18" width="18">
<img height="18" width="18" alt="" src="/images/tl.png"/>
</td>
<td height="18" style="background: url(./images/tm.png) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-   policy: -moz-initial;"/>
</td>
<td height="18" width="18">
<img height="18" width="18" alt="" src="/images/tr.png"/>
</td>
</tr>
<tr>
<td width="18" style="background: transparent url(./images/ml.png) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
<td>
<table class="tablebg" cellspacing="0" width="100%">
<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
<div class="boxContent">__designbox_content__</div>
</div>
</table>
</td>
<td width="18" style="background: transparent url(./images/mr.png) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
</tr>
<tr>
<td height="18" align="right" width="18">
<img height="18" width="18" alt="" src="/images/bl.png"/>
</td>
<td height="18" style="background: transparent url(./images/bm.png) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
</td>
<td height="18" width="18">
<img height="18" width="18" alt="" src="/images/br.png"/>
</td>
</tr>
</tbody>
</table>

I fixed some of it, but IE still looks different.

----------

I removed this from around the boxcontent

-

<table class="tablebg" cellspacing="0" width="100%">
</table>

I see what you mean it looks great in firefox, but a little odd in ie. Kind of looks like there is some space between the images or the table or table row maybe.

I wonder if setting the td align/valign in would help any. Like <td valign="top"> for instance. Maybe this would push it up or valign="bottom" push it down.

Hard to say right off hand but this was just a quick thought.

Do you think it could have to do with general css? Let me know if anything stands out at you.


.disignBoxFirst
{
background:#ffffff;
clear:left;
color:#000000;
margin-bottom:0px;
padding-top:0px;
position:relative;
}

.boxFirstHeader
{
background:#FFFFFF url(../images/db_bg.jpg) repeat-x scroll left top;
color:#FFFFFF;
font-size:17px;
font-weight:bold;
height:20px;
padding:3px 0px 5px 3px;
position:relative;
text-align:left;
text-transform:uppercase;
}

.boxContent
{
height:100%;
font-size:13px;
overflow:hidden;
padding:10px 10px 10px 10px;
position:relative;
}

.disignBoxFirst .boxFirstHeader .dbTopMenu,
.disignBoxFirst .boxFirstHeader .caption_item
{
color:#FFFFFF;
font-size:11px;
font-weight:bold;
position:absolute;
right:0;
text-transform:capitalize;
top:0;
white-space:nowrap;
}

.disignBoxFirst .boxFirstHeader .caption_item
{
padding-top:3px;
padding-right:5px;
}

Forums  ›  Dolphin 6.1  ›  General