[themes] Rounded corners like drupal.org

Sean Wingert seanw at norris-stevens.com
Tue Apr 15 17:21:16 UTC 2008


I have searched Google and drupal.org but cannot find a walkthrough for the rounded corners at drupal.org--especially the orange and green blobs at the top, which are awesome.

Can anyone explain, or provide an educational link, to understand their code? Below is output from Firebug for the orange box:

<div class="box">
<div class="w1">
<div class="w2">
<div class="w3">
<div class="w4">
<p>
</p>
<p>Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.</p>
<ul id="missionlinks">
</ul>
<div id="missionlinks4"/>
</div>
</div>
</div>
</div>


#mission .box .w4 {6a2940069b4343128... (line 1)
background-image:url(/themes/bluebeach/block2-bl.png);
background-position:0% 100%;
background-repeat:no-repeat;
left:-2px;
min-height:187px;
padding:16px 195px 16px 16px;
position:relative;
z-index:10;
}
Inherited fromdiv.box
#mission .box {6a2940069b4343128... (line 1)
color:#4E3000;
font-size:1.1em;
}
Inherited fromdiv#contentwrapper
#contentwrapper {6a2940069b4343128... (line 1)
font-size:0.8em;
}
Inherited frombody
html > body {6a2940069b4343128... (line 1)
font-size:16px;
}
body, .form-text, .form-password, textarea, th, td {6a2940069b4343128... (line 1)
color:#003150;
}
body, input, textarea, th, td, select {6a2940069b4343128... (line 1)
font-family:"Bitstream Vera Sans",Verdana,Helvetica;
}
body {6a2940069b4343128... (line 1)
font-size:100%;
}

Thanks!


More information about the themes mailing list