How to get rounded corners in table header
Getting round corners in Joomla is nothing short of a monumental task, in time, research and implementation. Using .css and no images is possible but requires a lot of work both in coding and Photoshop.
This method allows you to do this task quickly and easily.
1. Make a rounded header image in Photoshop, use the rounded corner tool. Make it 160 pixel wide and 20 high, for my template anyways.
2. Save image in the C:\Program Files\JSAS\http_root\www\yoursite\templates\yourtemplate\images
The code to use to make this is:
table.moduletable-sept {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
border-bottom: 1px solid #C0C0C0;
}
table.moduletable-sept th {
background-image: url(../images/grey.gif) ;
background-repeat: no-repeat;
background-position:
center;
color: black;
text-align: left;
padding-top: 4px;
padding-left: 18px;
height: 21px;
font-weight: bold;
font-size: 12px;
border-bottom: medium solid #3879A7
}
table.moduletable-sept td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
border-collapse: collapse;
border-spacing: 0px;
border-left: 0.03em solid #E7E7E7;
border-right: 0.03em solid #E7E7E7;
Notice that the left and right border of the table data have changed from #C0C0C0 to #E7E7E7 - this is because the initial color looked to wide, making it lighter blends with the them of the website better, thin borders.
}
|