Before we start I will assume that you have read the SocialEngine Documentation on Creating Your Own Theme.
Now, SocialEngine has a constant.css file, which basically stores constant variables for the current theme you have cloned, when i say clone, it is easy to create theme by just modifying key variables and css from that theme.
Making it Rounded
In constant.css you will find a "csscaffold method" named =rounded. of course you can do this directly using CSS.
To utilize this method/mixins:
+rounded; /*or*/
+rounded(5px, true, true, true, true);
@constants {
theme_rounded_px: 5px;
}
+rounded($theme_rounded_px);
The first parameter is the rounded size by pixel, 2nd to 5th parameters defaults to false, such as left-top, right-top, left-bottom & right-bottom, make this true to disable the rounded corner to that side's of the box.
For example:
+rounded(3px, false, false, true, true);
This will make the left-top & right-top corners to become rounded with 3 pixels.
CSS:
#tutorial_module {
border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
}
Adding Shadow
Adding shadow is simple, same way as =rounded, but this time you will use =shadow.
Usage:
+shadow(3px, 3px, 0px, 0px, rgba(229, 229, 229, 0.5));
This will add shadow as shown in Times Template.
Final Output:
#tutorial_module {
+rounded(3px);
+shadow(3px, 3px, 0px, 0px, rgba(229, 229, 229, 0.5));
}
Thats It!