| Newsflash | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
||||||||||
| CSS to create rounded content corners |
|
|
| Tuesday, 06 June 2006 | |
|
Creating rounded corners in modules is easy enough using the load modules position options but creating rounded corners in content items is a bit trickier and involves a tiny little hack to the file components/com_content/content.html.php.
What you'll need:
1) A copy of your components/com_content/content.html.php file 2) About 5 minutes to apply my little hack 3) Your round corner images Steps 1) At or around line 449 of the above mentioned file look for this line of code:
Code:
<table class="contentpaneopen<?php echo $params->get( 'pageclass_sfx' ); ?>">
and replace it with:
Code:
<div class="contentitem<?php echo $params->get( 'pageclass_sfx' ); ?>">
2) do the same at or around line 470 (you'll see the same openening <table> tag as before)<div> <div> <div> <table class="contentpaneopen<?php echo $params->get( 'pageclass_sfx' ); ?>"> 3) At or around line 526 you'll fine the closing </table> tag for the above tables immediately after that line close off the new <div> tags like this:
Code:
</div>
4) in your CSS add the style declarations for your new rounded corner divs like this:</div> </div> </div>
Code:
.contentitem {
You
can also add different rounded corners or different colours etc by
using the page class suffix - I'll assume that you know how yo do that
bit.background: url(../images/top_right_corner.png) top right no-repeat; position:relative; } .contentitem div { background: url(../imagestop_left_corner.png) top left no-repeat; } .contentitem div div{ background: url(../images/bottom_left_corner.png) bottom left no-repeat; } .contentitem div div div{ background: url(../images/bottom_right_corner.png) bottom right no-repeat; } And Voila you now have rounded corners on all of your content items and each individual blog content item. You can apply the same technique to have rounded corners on your content category tables if you wanted to. |
|
| Last Updated ( Tuesday, 06 June 2006 ) |
| Next > |
|---|



