|
|
| View previous topic :: View next topic |
| Author |
Message |
adris72
Joined: 01 Jan 1970
Posts: 1
 |
Posted: Thu Feb 01, 2007 5:08 am
Post subject: ROUND CORNER BOXES WITH CSS
|
 |
|
I saw some people asking this question (how to do this) so I thought I would post a mini-tutrorial on round corners.
Note: you can make this with the two areas: vertical and horizontal (one or both) but not with single articles. You can make different colors for each area if you want.
Source: http://kalsey.com/2003/07/rounded_corners_in_css/
First, you have to upload to your website the 4 corners that you will find in the above page. (Change the color in a graphic program and don't forget to take note of the color in hexadecimal format, you'll use that color for the background). In this example the color of the box is #f90 (or #ff9900)
I uploaded the 4 images to components/com_magazine/layouts/images/bg/ if you upload them to a different folder don't forget to change the image path in both css and html template files.
Now, just copy and paste the css code in the style that you are using. (Don't forget to change the color unless you want to use that exact orange, also you can change the color of the font, this example uses white)
| Code: | /* round corners */
.roundcont {
width: 100%;
background-color: #ff9900;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(/components/com_magazine/layouts/images/bg/tr.g
if) no-repeat top right;
}
.roundbottom {
background: url(/components/com_magazine/layouts/images/bg/br.g
if) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
} |
Now open the html layout that you are using and add the following codes:
Put this code before the tag {zone-1} (or zone_2, or both if you want both zones with the same color)
| Code: | <div class="roundcont">
<div class="roundtop">
<img src="/components/com_magazine/layouts/images/bg/tl
.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div> |
Put the following code right after the same tag:
| Code: | <div class="roundbottom">
<img src="/components/com_magazine/layouts/images/bg/bl
.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div> |
If you want a different color for each zone, just make new images with new names and repeat the whole process.
That's it. Good luck. |
|
| Back to top |
|
|
BRAINS
Joined: 01 Jan 1970
Posts: 4
|
Posted: Thu Feb 22, 2007 10:16 pm
Post subject:
|
|
|
Works great.
I wanted to extend this (or simplify it!) and just wanted to have a single rounded corner over the top right on the title bars.
It works OK in IE but not in Firefox.
Anyone any ideas on this:
.general_heading,.heading{
background: url(/images/bg/tr.gif) no-repeat top right #000066;
display: block;
height: 23px;
line-height: 23px;
text-indent: 8px;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
}
The CSS is probably all wrong somewhere! |
|
| Back to top |
|
|
m1gu3
Joined: 01 Jan 1970
Posts: 1
|
Posted: Fri Sep 07, 2007 8:32 pm
Post subject: mine is not working
|
|
|
 it only shows the round corners on the left side, already checked the code Im no expert buy dont see anything wrong what might be happening?
can somebody help me with that maybe posting your layout or css style? I dont know i just want to get my articles wrapped in a round corner box 
maybe like this one can somebody help me with this http://www.ijoomla.net/news/
thanks in advance for the help. |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
|
|
Shopping Cart
|
FAQ
Search
Register
Log in
