cool, I've used some subtle rounding and shadow CSS on my Arras blog as well. Gives it just some depth.

Thanks for the share!

I'm a newbie in coding, would you be so kind to tell, where exactly i should put this code? =\ can I add it to user.css?

Hi all,

Same boat for me I'm afraid. I took a look in editor and checked my CSS stylesheet - I have a user.css template and style.css template, but I can't find a default.css template.

I've looked in the other 2 but there is actually very little content. Wasn't sure where to put the code at all.

In my style.css template i have:

/* Default Stylesheet */
@import url('css/default.css');
/* User Override Stylesheet */
@import url('user.css');

/* Trick the WordPress Theme Bot *Evil* */
.aligncenter            { display: block; margin: 0 auto; }
.alignright                { float: right; margin: 0 0 1em 1em; }
.alignleft                { float: left; margin: 0 1em 1em 0; }
.floatleft                { float: left; }
.floatright                { float: right; }
img.aligncenter, img.alignright, img.alignleft  { border: 1px solid #fff000; text-align: center; background: #404040; padding: 4px; }

.textcenter                { text-align: center; }
.textright                { text-align: right; }
.textleft                { text-align: left; }

.wp-caption { border: 1px solid #fff000; text-align: center; background: #404040; padding-top: 4px; margin: 10px }
.wp-caption img { margin: 0; padding: 0; border: none }
.wp-caption .wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0 }

Much appreciation to anyone who can help!

here's a start:

CSS is actually is pretty easy once you get to know it.

some basics:
- A website is usually divided into classes (.) and ID's (#)
- a class is meant for bigger spaces, so the variables in it count for everything inside that DIV (.header, for example)
- an ID is usually unique (just like your personal identity) and is meant for things that occur only once (#header-logo, for example)
- CSS code always starts with identifying the class or ID, followed by an opening bracket "{"
- every variable inside the single CSS bit ends with a ";"
- CSS code always ends with a closing bracket "}"

to make CSS easy to read, I like to write it like this:

.header {
    font-size: 2px;
    color: #000;
    etc;
}

I'll continue writing later on, gotta eat dinner first

I've just got my website up just a few days ago and only had a rough understanding of how CSS worked. Thanks to this thread I started tackling applying it to my site.

First off though, the -moz prefix is a mozilla implementation since they're not fully WE3 standardized. So you need to duplicate the code for chrome/safari as well, and another for the W3C standard with opera will see (and newer versions of chrome/safari too I think). I believe the newer IE will also see the W3C standard one too.

Once you know that the code has to be replcated for compatibility, the code should make a bit more sense. Instead of adding this code to every feature of the site, I just listed the features separated with commas and posted my radius settings as few times as possible. Here's a copy/paste directly from my style.css file on my child theme.

www.thesaltpress.com

#header    {
    background: none repeat scroll 0 0 #00093b;
    border-bottom: 5px solid #1b2973;    }
.blog-description    {
    color: #899bfd;
    font-size: 11px;    }
#nav {
    background: url(../../images/topnav.jpg) repeat-x bottom #000f60;
    border-bottom: 4px solid #000d54;    }
.searchform    {
    border: 5px solid #000d54;    }
#nav .sf-menu a:hover,
#nav .sf-menu li:hover,
#nav .sf-menu li.sfHover,
#nav .sf-menu ul li    {
    background: none repeat scroll 0 0 #001584;
    color: #FFFFFF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius 6px;
    -moz-box-shadow: 2px 2px 2px #000d53;
    -webkit-box-shadow: 2px 2px 2px #000d53;    }
/* Full Corners Rounded Bellow*/
.widgettitle,
.widgetcontainer,
#featured-slideshow,
.posts-default,
.entry-thumbnails-link,
#main,
#main .module,
#main .single-post,
.about-author,
.module-title,
.feed-title,
#reply-title,
#footer    {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius 6px;
    -moz-box-shadow: 2px 2px 2px #dddddd;
    -webkit-box-shadow: 2px 2px 2px #dddddd;    }
/*Bottom Rounded Only*/
.nocomments,
#commentform    {
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-right-radius 6px;
    border-bottom-left-radius 6px;
    -moz-box-shadow: 2px 2px 2px #dddddd;
    -webkit-box-shadow: 2px 2px 2px #dddddd;    }

Hi all I am really new to this and would like to have the rounded effect, Im trying to teach myself this going by trial and error. Can someone please talk me through step by step on how to get this on my page?

I would really appreciate any help..

Thanks in advance

I try all guys and i have to say is really great but dont work for internet explorer and opera, both last version on 24/04/2011.
So guys thanks for tutorial and try it is really good but for the moment just work with firefox, google chrome and safari.
For do it is very simple, go to the foder of themes and look for style.css edit and put inside only this:

/*
Theme Name: Your Name
Theme URI: http://www.yourwebsite.com/
Description: My changes for my site
Author: Creature
Author URI: http://www.yourwebsite.com/
Template: arras
Version: 1.5.0.1
.
For more information on how to create and use child themes:
http://codex.wordpress.org/Child_Themes

Any CSS code written below will override any existing
declarations from the theme itself.
*/


/* Full Corners Rounded Bellow*/
.widgettitle,
.widgetcontainer,
#featured-slideshow, 
/*.posts-default,<--Changes Lines Between Thumbnail Sections*/
.entry-thumbnails-link,
#main,
#main .module,
#main .single-post,
.about-author,
.module-title,
.feed-title,
#reply-title,
#footer    {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius 6px;
    -moz-box-shadow: 2px 2px 2px #dddddd; 
    -webkit-box-shadow: 2px 2px 2px #dddddd;
    -box-shadow: 2px 2px 2px #dddddd;    }
/*Bottom Rounded Only*/
.nocomments,
#commentform    {
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-right-radius 6px;
    border-bottom-left-radius 6px;
    -moz-box-shadow: 2px 2px 2px #dddddd; 
    -webkit-box-shadow: 2px 2px 2px #dddddd;
    -box-shadow: 2px 2px 2px #dddddd;    }

Thanks to campinitos for the tutorial, the codec is from him. Something more, take care if you dont know what you do the style.css dont have nothing default of intallation, but if you modify something you need combine the two codes correctly. Always do backup before testing.

I upload the style.css id you like use it. Something more, please if someone know how fix the problem please help here.

Last edited by ddlg2007 (2011-04-24 18:00:06)

Hello, I am new in the forum. I have a same question as tamir. that how could I make this on explorer its work only on firefox?

ignition lock

Last edited by Rafael Ascanio (2011-10-02 04:00:22)