Topic: Handy CSS Tricks For your Arras Site

Here is a quick tip for you to make your site a little more interesting,

If you want round corners on your Arras site, instead of the boring borders, simple CSS can make round corners, even with shadows!

For the simple round corners, add this CSS to the image border rulesets in your default.css folder,

-moz-border-radius: 6px; -webkit-border-radius: 6px; }   (after the last "}" erase, and leave the ending "}" , do not add separate brackets, the rulesets are not being specified to anything.

To add the shadows to the border,

-moz-box-shadow: 2px 2px 2px #dddddd; -webkit-box-shadow: 2px 2px 2px #dddddd; }

To see it in action, visit http://savannahvideocentral.com

Savannah Video Central Official Owner, code expert, site designing, and problem solving. Savannah Cats and Servals are my passion, I have Arras theme implemented with Buddypress.

My Site http://savannahvideocentral.com

Re: Handy CSS Tricks For your Arras Site

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!

Re: Handy CSS Tricks For your Arras Site

gunju221 wrote:

Here is a quick tip for you to make your site a little more interesting,

If you want round corners on your Arras site, instead of the boring borders, simple CSS can make round corners, even with shadows!

For the simple round corners, add this CSS to the image border rulesets in your default.css folder,

-moz-border-radius: 6px; -webkit-border-radius: 6px; }   (after the last "}" erase, and leave the ending "}" , do not add separate brackets, the rulesets are not being specified to anything.

To add the shadows to the border,

-moz-box-shadow: 2px 2px 2px #dddddd; -webkit-box-shadow: 2px 2px 2px #dddddd; }

To see it in action, visit http://savannahvideocentral.com

Thanks for the tip! Just want to know how you were able to separate the footer in your site without causing the alignment of sidebars and footer  getting messed up? Thanks!

Thumbs up

Re: Handy CSS Tricks For your Arras Site

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?

Keep trying to set up Arras theme on http://standup-sreda.ru.

Thumbs up

Re: Handy CSS Tricks For your Arras Site

Hi gunju221,

It looks really nice but like Roy I think I need the babysteps guide to how it works.

Thanks to anyone in advance who can help me get my rounded edges!

-m0r

Thumbs up

Re: Handy CSS Tricks For your Arras Site

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! big_smile

Thumbs up

Re: Handy CSS Tricks For your Arras Site

m0r1arty wrote:

Hi gunju221,

It looks really nice but like Roy I think I need the babysteps guide to how it works.

Thanks to anyone in advance who can help me get my rounded edges!

-m0r

I completely agree.  There should be a guide on here for people that are struggling with the CSS thing.  Or maybe someone can suggest a good external CSS guide?

Thumbs up

Re: Handy CSS Tricks For your Arras Site

bfis108137 wrote:
m0r1arty wrote:

Hi gunju221,

It looks really nice but like Roy I think I need the babysteps guide to how it works.

Thanks to anyone in advance who can help me get my rounded edges!

-m0r

I completely agree.  There should be a guide on here for people that are struggling with the CSS thing.  Or maybe someone can suggest a good external CSS guide?

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 smile

Re: Handy CSS Tricks For your Arras Site

alright, dinner's done  cool yes, I cooked and it was good, thanks for asking.

Now for some more basics:

from here it's actually pretty easy. If you want to add variables to, say, all the text links in the .header class, simple do the following:

.header a {
    color: #fff;
    text-decoration: underline;
}

- the "a" after .header refers to all links in that class
- the spacing before every variable is on purpose, by the way. This makes it easier to read, but make sure you use a TAB instead of SPACES. Each SPACE counts as 1 character: more characters means more server load.

if you want to create a hover effect for all these links, just do this:

.header a:hover {
    color: #ccc;
    text-underline: none;
}

easy, huh?

These are some more examples:
.header img { = every image in that class
.header img:hover { = a hover effect for every image in that class
.header p { = variables for every paragraph in that class (basically all the regular text between the <p></p> tags)

if you want to add variables to ALL images, instead of just images in the .header class (or whatever), simple make it like this:

img { = ALL images
p { = ALL paragraphs
a { = ALL links

So that basically covers to CSS basics. Please le me know if you want to know anything specific.

There are loads of awesome CSS tutorials to be found on the internet by the way. It's how I learned it all.

Good luck!

Last edited by duckbilljones (2011-02-14 14:22:50)

Re: Handy CSS Tricks For your Arras Site

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;    }

Thumbs up

Re: Handy CSS Tricks For your Arras Site

I just realized after posting this that I didn't have the general W3C standard drop shadow code. Just omit the -moz or -webkit on a third line of drop shadow code.

Thumbs up

Re: Handy CSS Tricks For your Arras Site

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

Thumbs up

Re: Handy CSS Tricks For your Arras Site

futureqc wrote:

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

hi mate, welcome to the forums!

The best way to customize the theme is by adding code (such as shown above) to the USER.CSS file. You can find this file in the admin Dashboard > Appearance > Edit (it's somewhere in the lower right corner, in that list of files)

Re: Handy CSS Tricks For your Arras Site

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)

Post's attachments

style.css 1.28 kb, 6 downloads since 2011-04-25 

You don't have the permssions to download the attachments of this post.

Thumbs up

Re: Handy CSS Tricks For your Arras Site

how can i make this work on explorer its work only on firefox :-(

Thumbs up

Re: Handy CSS Tricks For your Arras Site

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)

Thumbs up

Re: Handy CSS Tricks For your Arras Site

I tried this before "-moz-border-radius: 6px; -webkit-border-radius: 6px; }   (after the last "}" erase, and leave the ending "}" , do not add separate brackets, the rulesets are not being specified to anything."  but something went wrong. I hope i'll solve this.

Thumbs up