Forums  ›  Dolphin 6.1  ›  General
 

Headers on boxes

Any chance you would share how you changed the top header of the boxes on your main page?

Im talking about how you have a rounder and faded image or something.  IE: where sites stats and so on are.

Thanks

Hummerman

And how did you add backgrounds to them :)

Thanks

The top header part of the design boxes are pre-made images which fade to dark/black. They wouldn't work on a white or light background. They are actual images so there really isn't a code that specifically makes them round. The image itself is round.

The backgrounds...the green boxes is very easy to change. There are a couple of ways one could do this. The easiest is to add them to the .html file associated with them. I simply added a standard html table to this file.

/templates/tmpl_uni/designbox_1.html

depending on the template and what you are after possibly these too:
/templates/tmpl_uni/designbox2.html


The content in this file will show up inside the design boxes...where my green squares are.

So I simply added a html table with the background="http://www.mysite.com/imagelocation.jpg"

Like so:
<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" bgcolor="#000000" 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>

You can also explore, edit and make some changes in /templates/tmpl_uni/css/general.css

And alter many other things related to the layout. Font colors, sizes, styles...bold, underline, etc. that type of thing.

If you have firefox I would highly recommend getting the firebug addon/plugin. It will help you with design and save you a lot of time.

Check this one for some brief info about firebug:
Firebug for Firefox

gameutopia

I keep getting just pure black when i add this to designbox_1

<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" bgcolor="#000000" 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 did create a gif image 48x48 (the same size as your green one)

I even tried using your green one on my site and still got the pure black.

Any ideas?

I did change the image location directory aswell.

<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" bgcolor="#000000" border="0" width="99%">

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

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

Mine is the exact code I use you may need to edit it slightly to fit your needs this line with the bgcolor #000000 is black #ffffff is white for example. If you don't declare it defaults to white. So you can omit that part if necessary.

</div><table cellspacing="1" cellpadding="5" bgcolor="#000000" border="0" width="99%">

like:
</div><table cellspacing="1" cellpadding="5" bgcolor="#ffffff" border="0" width="99%">
or
</div><table cellspacing="1" cellpadding="5" border="0" width="99%">

I use the cellspacing and cellpadding to get it to line up right. Depending on your template you may or may not need to increase/decrease cellspacing and cellpadding.

I also use a column in the code that is 2% and 98% to get mine to line up. These are certainly changeable too.

green_grid.gif is not included in dolphin itself anywhere. You would have to get an image you like somewhere first. Then upload it anywhere on your host.

In the example of:
<td width="98%" background="http://www.nudecrave.com/templates/tmpl_uni/images/green_grid.gif">

That means that you would really need to have an image called green_grid.gif upload to your host in:
nudecrave.com/templ_uni/images/green_grid.gif

If it's not there it will fail to display and load it.

The image can be located on the web anywhere too, providing they do allow linking to the site in particular. The drawback of that is if the other site is down it wont display. If the image their is deleted or moved it wont work either.

So it is much better to have the image on your hosting account. And it looks more professional too.

Ok i will try this again.

I do have the image uploaded to my server.  I actually uploaded yours and the one i made.

Tried yours just to make sure it was not a image issue.


I did omit the bgcolor and still got the totally black background instead of the image.

I will try now to omit the first bgcolor aswell.

Thanks again for your help

Derrick

Same with this one: 000000 is black:

<tr bgcolor="#000000"><td width="2%"></td>

You can change that to #ffffff or just <tr> all by itself.

Since my template is primarily black based I just included it to make sure. Any time you see the #000000 it is referring to the color black. You can use a online html picker for specific colors it's a 6 digit number and/or letter code.

Im still getting a black background.

Seems to me like its not picking up the image,  but i know the link to image is correct and i know the image is ok.

Any other ideas?

Maybe move the image up a few levels?

Thank

Starting to wonder if im retarded or not......lol

I opened the designbox_1.html

And removed current code and added this code

<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" bgcolor="" border="0" width="99%">

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

</td>
</tr>
</table

See any reason why this isnt showing the background?

I did upload your green_grid.gif to the correct directory aswell.

Just using your Gif as a test to get it working.

Don't know if the table was a miss copy and paste <table but don't forget the close bracket too </table>

Try this if you don't just remove the reference to bgcolor. Otherwise declare an actual color:

<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" border="0" width="99%">

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

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

You will eventually need to play around with the table column widths %'s once you get it working. Maybe padding and spacing, but not until you get it to actually do what you want.

Your site is set up in a manner that the www prefix forwards/redirects or whatever we want to call it to omit the www prefix.



So this means you need to omit the www part in your code whether here for the block/header modification or for the forum spy modification.

Any code or changes you are asked to change to yoursite.com be sure you do not use the www part. Only http://yoursite.com

So in this one you would use for example:
<div class="disignBoxFirst">
<div class="boxFirstHeader">__title____caption_item__</div>
</div><table cellspacing="1" cellpadding="5" border="0" width="99%">

<tr><td width="2%"></td>
<td width="98%" background="http://nudecrave.com/templates/tmpl_uni/images/green_grid.gif">
__designbox_content__

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

Make sure you do update all reference in the install to reflect this.

Same with the forum spy code you were working on.

Thanks a million man!!!!

You were right!

Now i wonder if i can glue my hair back on my head?

Forums  ›  Dolphin 6.1  ›  General