RocketTheme - TOPIC: Module with rounded corners (2/3)

Welcome Guest! Login

0 items Join Now

Re: Module with rounded corners

Posted 18 years 11 months ago
- Yves I think I almost got it...
  Hold on - need to refine a bit.
#9911
- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Re: Module with rounded corners

Posted 18 years 11 months ago
- I added the code between <div> and </div> to an article content, then added the css to my template_css.css, put some content in  and it is displayed in a anti-aliased rounded box, as I want, without image nor javascript.
  
  The thing is that I would like this background for a module. Do you think a Module Class Suffix could be used (I am not familiar with it, if you could give me a link that clarifies the matter...)
- Yves
#9912
- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Re: Module with rounded corners

Posted 18 years 11 months ago
- Thomas M. Nielsen wrote:
  Yves I think I almost got it...
  Hold on - need to refine a bit.
  
  Man, you are fast ! What did you put in your coffee ?
- Yves
#9913
Re: Module with rounded corners

Posted 18 years 11 months ago
- Spiffy works - look mom no images...
#9914

Re: Module with rounded corners

Posted 18 years 11 months ago

Ok here is how it works.

1 - define what your box should look like on that spiffy site, and press generate

2 - add this css code to your template_css.css file (for the template your are using of course):

.spiffy{
display:block
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6
}
.spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.spiffy_content{
padding:0px 5px;
background:#0a67e6;
}

Then you need to define the modules class in the index.php - I just did it for the newsflash module in the open office template, but you can do it on others I'm sure - see this example (line 73-96):

<td class="sidenav">
<div class="forcewidth">
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b> <div class="spiffy_content">
<?php if (mosCountModules('newsflash') > 0) { ?>
<?php mosLoadModules('newsflash', -1); ?>
<?php } ?>
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

The box CAN get messed up, if you just add a little text with some odd line height, but other than that it should work.

#9917

Re: Module with rounded corners

Posted 18 years 11 months ago
- The DIV order does not look 100% correct, it worked but I think it can be corrected a little - I think I will play with that in the next tutorial along with some other styling.
#9918
Re: Module with rounded corners

Posted 18 years 11 months ago
- Hhhm it only works in Firefox, IE is behaving odd.
  Will have to play with this - let me know if you figure something out Yves!
#9919
- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Re: Module with rounded corners

Posted 18 years 11 months ago
- Thanks a lot Thomas.
  
  What I am not familiar at all with, is the modules class in index.php. I need to find some basic information on how it works, now it's chinese...
  
  But at least, I can copy your example and play with it...
- Yves
#9922
- Andy Miller
- Preeminent Rocketeer
- Posts: 9919
- Thanks: 96
- Web Kahuna
Re: Module with rounded corners

Posted 18 years 11 months ago
- Guys, there are better options than spiffy. here's a list of some I keep around.
  
  www.curvycorners.net <- coolest but takes most horsepower
  www.acko.net/anti-aliased-nifty-corners
  pro.html.it/esempio/nifty/nifty8js.html
  www.editsite.net/blog/rounded_corners.html
  seky.nahory.net/2005/04/rounded-corners/
#9925
- Yves
- Preeminent Rocketeer
- Posts: 9214
- Thanks: 5
Re: Module with rounded corners

Posted 18 years 11 months ago
- Thanks Andy, a lot to explore !
- Yves
#9930

Time to create page: 0.075 seconds