Design Box Borders

My uni template apparently is not using the "designbox_borders.html" file.

I am trying to use css image borders around the designbox and the class design_box_border doesn't show up at all in the source of the pages, so, is there a switch or something I need to turn on?

css:

div.design_box_border div.header div.ul    { background-image:url('../images/db_head_ul.gif');}
div.design_box_border div.header div.uc    { background-image:url('../images/db_head_uc.gif');}
div.design_box_border div.header div.ur    { background-image:url('../images/db_head_ur.gif');}

...etc

html: (/templates/tmpl_uni/designbox_borders.html)

<div class="design_box_border">
<div class="header">
<div class="ul"></div>
<div class="uc"></div>
<div class="ur"></div>
<div class="l"></div>
<div class="c">__title__ __caption_item__</div>
<div class="r"></div>
<div class="ll"></div>
<div class="lc"></div>
<div class="lr"></div>
</div>
<div class="keeper">
__designbox_content__
</div>
</div>

Affect is no change on page.

if that's how your writing it, then your doing it wrong in the css.  Here's an example of one working:

templates/tmpl_{tmpl}/designbox_0.html

<!-- Design Box [ Start ] here  -->
 __designbox_content__
<!-- Design Box [ End ] here  -->

templates/tmpl_{tmpl}/css/general.css

.NkBottomBg
 {
 position:relative;
 background:url(../images/bottom_bg.gif) top left repeat-x;
 top:8px;
 left:0px;
 margin:0px 7px 0px 7px;
 width-expression:(100%-14px);
 height:28px;
 }

.NkBottomLeftB
 {
  position:relative;
  float:left;
  width:8px;
  height:28px;
  top:0px;
  left:-8px;
  background:url(../images/bottom_lb.png) bottom left no-repeat;
 }
 
.NkBottomRightB
 {
  position:relative;
  float:right;
  width:8px;
  height:28px;
  top:0px;
  left:8px;
  background:url(../images/bottom_rb.png) bottom right no-repeat;
 }
 
.NkDesignBL
 {
  position:absolute;
  width:100%;
  height:10px;
  bottom:0px;
  left:0px;
  background:#96B2C9;
 } 
.NkDesignBr
 {
  position:absolute;
  width:12px;
  height:11px;
  bottom:-1px;
  right:-1px;
  background:url(../images/design_br.gif) bottom right no-repeat;
 } 
 
 .NkDesignBl
 {
  position:absolute;
  width:12px;
  height:11px;
  bottom:-1px;
  left:-1px;
  background:url(../images/design_bl.gif) bottom left no-repeat;
 }
 
 .NkLeftBorder
 {
  position:absolute;
  width:8px;
  height:100%;
  top:0px;
  left:0px;
  background:url(../images/left_b.gif) top left repeat-y;
 }
 
 .NkRightBorder
 {
  position:absolute;
  width:8px;
  height:100%;
  top:0px;
  right:0px;
  background:url(../images/right_b.gif) top right repeat-y;
 }
 
 .NkDesignTr
 {
  position:absolute;
  top:-1px;
  right:-1px;
  width:7px;
  height:5px;
  background:url(../images/design_rb.gif) top left no-repeat;
 }
 
.NkTopMenuDevider
 {
  float:left;
  width:6px;
  height:27px;
  background:url(../images/top_menu_devider.gif) center left no-repeat;
 }

 .NkTopMenuLb
 {
  position:relative;
  z-index:800;
  float:left;
  width:13px;
  height:28px;
  top:0px;
  left:-8px;
  background:url(../images/top_menu_lb.png) top left no-repeat;
 }
 
 .NkTopMenuRb
 {
  position:relative;
  float:right;
  width:8px;
  height:28px;
  top:0px;
  left:8px;
  background:url(../images/top_menu_rb.png) top right no-repeat;
 }
 
 .NkTopMenuBg
 {
  position:relative;
  height:28px;
  top:-6px;
  left:6px;
  margin:0px 13px 0px 1px;
  width:(100%-14px);
  background:url(../images/top_menu.gif) top left repeat-x;
 }
 
  .NkDesignLb
 {
  position:absolute;
  width:7px;
  height:5px;
  top:-1px;
  left:-1px;
  background:url(../images/design_lb.gif) top left no-repeat;
 }

I'm not going to post the whole thing here, but there is a vast difference in the way the css is written between these, I won't interfere with your html file as I hate and rarely use html, but your css is way off and looks more like an html coder trying to write css.

Clean it up, organize it, start using standard format for css.  Remember the ":" and ";" are your friends in css.

Try this with your code:

.div.design_box_border .div.header .div.ul   

{

background-image:url('../images/db_head_ul.gif');

with:100%;

margin:10px;

boder:1px #000000 solid;

}

Notice the subtle change to the begining of your code?  I added a period "." to it to make it read:  .div.design_box_border .div.header .div.ul   Those periods are needed to help seperate out the different items this will refer to, also note I have set a width of 100%, margin and a border.  You can play with all of these to get what your looking for in the end. 

Good luck with it.

Well, all is good after all. I did end up changing the attributes of to td.header.... but what I noticed was that I was working in the wrong file for what I wanted to change. I should have been in the designbox_1 file. That's when it began to work.

I think they came out nice: http://www.aesd.net/community

You can download the full and free version at http://www.boonex.com/unity/extensions/entry/Simple_Template_v_1_0

The CSS mydatery posted is from that free download. It shows you exactly how its done.

 Actually, that is from the Simply Black template sockpuppet.  Want to play some more.  Of course you forgot to warn them that if they use the Simple template you just listed then they're calendars on their join pages won't work in IE.  Oops, I guess you ignored that little item too!

I guess thats why your just a

Sockpuppet

oh feck. not this again.

I stand corrected. You have to understnad the CSS code is exactly the same so if it's from the Simply Black statement then so be it. Maybe the guy who made Simply Black is the same guy who posted it. I think it was nuknspax.

Whatever the case, you can get the code for what you want in the link provided.

Good luck.