Creating Themes for design studio as well as reg Ning

[GrayWitch]

I have a blog so you can see what I have done

Hekate's Creative Cauldron

Dedicated to the Pagan, and Wiccan Community ,Themes for Ning,Graphics-Tags,My writings.

http://hecatescauldronofcreations.blogspot.com/

Also  for those who wish to create your very own

For design studio ning themes and regular Ning

There is free blanck css at two by two   ning themes

I also then take the blanck save a copy on my desktop

 Also when ready to work  copy the blank css

http://blog.skemaholicsanonymous.com/NingGen/ningPrev.php

Rainbows  on Ning also has some could  and eay tweaks, as I belive in easy

I hope this helps also  doing  them yourselves makes your site more personally yours, and you do not have to depend so much on others :)

Blessings Gray Witch aka Lady Hekate)0(

For my Witchy and Pagan friends   this is my own  Ning site

http://thegraywitch.ning.com/

I also love the group styling tips in Creators, This is best resource for Creators

This is one  design code I use  and it is from Two by Two

Follow instructions above

/*NING PROFILE CSS THEME CODE FOR USE ON CLASSIC AND DESIGN STUDIO EDITORS*/

/***START CODE****(TITLE OF YOUR THEME) by (YOUR NAME GOES HERE)*****/

/*HIDE NETWORK NAME AND TAGLINE*/
#xg_sitedesc { display: none;} #xg_sitename {display: none;}

/**HIDE TOP NING BAR**/
#xn_bar {display: none !important;}

/*HIDE FOOTER BAR*/
#xg_foot, #xg_foot a {display:none!important; }
.xg_theme #xg_footcontent, #xg_foot {display:none!important; }

/*****MAIN*****/
.xg_theme #xg {background-color: transparent !important; background-position: center 0px; padding: 0px 0px 0px 0px !important; }

/***** THEME BACKGROUND*****/
body {
background: #ffffff url(URL IMAGE GOES HERE) center fixed !important;
}

/*****HEADER IMAGE*****/
.xg_theme #xg_masthead {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
display: block;
width: auto !important;
height: 500px;
background: transparent url(URL IMAGE GOES HERE) center scroll no-repeat;
border: 4px solid #000000 !important;
}

/*****NAVIGATION DIMENSIONS*****/
.xg_theme #xg_navigation {width: auto !important;
background-position: center 0px !important;margin: 0px !important;
padding-top: 0px !important;padding-bottom: 0px !important;}

/*****NAVIGATION BACKGROUND & BORDER*****/
.xg_theme #xg_navigation {
margin-left: 0em;
height: auto !important;
background: transparent url(URL IMAGE HERE) center 0px scroll !important;
background-repeat: repeat !important;
border: 3px solid #000000 !important;
}

/*****NAVIGATION TEXT*****/
.xg_theme #xg_navigation ul li a {
padding-left: 7px !important; padding-right: 7px !important;
text-decoration: none !important;
font-family: Georgia, Avant Garde;
font-style: italic;
font-weight: bold;
font-size: 16px !important;
color: #000000 !important;
border: 4px solid transparent !important;
}

/*****NAVIGATION HOVER*****/
.xg_theme #xg_navigation ul li.this a,
.xg_theme #xg_navigation ul li a:hover{
text-decoration: none !important;
font-weight: bold;
background: transparent url(URL IMAGE GOES HERE) no-repeat 0 !important;
background-position: center !important;
color: #951008 !important;
border: 2px solid transparent !important;
}

/*****SUB TABS BACKGROUNDS*****/
.xg_theme #xg_navigation ul div.xg_subtab ul li a{
margin-left: 0em;
background: #ffffff url(URL IMAGE GOES HERE) repeat !important;
}

/*****SUB TAB TEXT*****/
.xg_theme #xg_navigation ul div.xg_subtab ul li a {
padding-left: 7px !important; padding-right: 7px !important;
text-align: center;
font-weight: bold;
font-style: italic;
text-decoration: none !important;
font-family: Georgia, Avant Garde;
font-size: 14px !important;
color: #951008 !important;
}

/*****SUB TAB HOVER*****/
.xg_theme #xg_navigation ul div.xg_subtab ul li a:hover {
text-decoration: none !important;
font-weight: bold;
background: #ffffff url(URL IMAGE GOES HERE) repeat !important;
color: #000000 !important;
}

/******SUB TABS BORDERS******/
.xg_theme #xg_navigation ul div.xg_subtab ul li a, .xg_theme #xg_navigation ul div.xg_subtab ul li a, .xg_theme #xg_navigation ul div.xg_subtab ul li a:hover {
border: 2px solid #951008 !important;
}

/*****BODY SECTION*****/
.xg_theme .xg_module {margin-top: 2em;}

/******HEADLINE TEXT BACKGROUND & BORDER******/
#xg #xg_body h1 {
padding: 10px 10px 10px 10px;
text-align: center;
font-family: Georgia, Avant Garde !important;
font-style: italic !important;
font-weight: normal !important;
font-size: 18px !important;
color: #000000 !important;
background-color: transparent;
background-image: url(URL IMAGE GOES HERE);
background-repeat: no-repeat;
background-position: center;
border: 2px solid #000000 !important;
}

/******BODY BACKGROUND*****/
.xg_theme #xg_body {
background-position: center 0px !important;
background-attachment: fixed !important;
background: transparent url(URL IMAGE GOES HERE) !important;
background-repeat: repeat !important;
border: 2px solid #000000 !important;
}

/*****LINKS*****/
.xg_theme a {
text-decoration: none !important;
font-weight: bold !important;
font-style: italic;
font-size: 14px !important;
color: #000000 !important;
}

/*****LINK HOVER*****/
.xg_theme a:hover {
text-decoration: none !important;
font-weight: bold !important;
font-size: 14px !important;
background: transparent url(URL IMAGE GOES HERE) no-repeat center 0px !important;
color: #951008 !important;
}

/*****MODULE BODY BACKGROUND*****/
.xg_module_body, .xg_theme .xg_module_foot {
background: transparent url(URL IMAGE GOES HERE) !important;
background-repeat: repeat !important;
border: 2px solid #000000 !important;
}

/***** MODULE TEXT & TEXT BOX TEXT*****/
.xg_module_body, .xg_module_body legend,
.xg_module_body legend.toggle a,
.xg_module_foot, .module_text,
ul.page_tabs li.this {
padding: 7px 7px 7px 7px;
font-weight: bold !important;
font-style: italic !important;
font-size: 14px !important;
font-family: Georgia, Avant Garde !important;
color: #000000 !important;
}

/**** MODULE HEADERS *****/
.xg_module_head {
background: transparent url(URL IMAGE GOES HERE) center repeat !important;
border: 2px solid #000000 !important;
}

/*****MODULE HEADER TEXT*****/
.xg_module_head h2 {
background: transparent !important;
text-transform: none !important;
font-size: 16px !important;
font-weight: bold !important;
font-style: italic;
font-family: Georgia, Avant Garde !important;
color: #000000 !important;
}

/*ROUNDED NAVIGATION BAR (DO NOT REMOVE OR ALTER THIS CODE. IT IS A FUNCTIONAL CODE NEEDED FOR BOTH CLASSIC AND DESIGN STUDIO THEMES)*/
#xg_navigation {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
}

/*CENTER NAVIGATION TEXT (Remove this code if you do not want to center navigation text)*/
.xg_theme #xg_navigation ul {
text-align: center;
margin: 0 auto;
}
.xg_theme #xg_navigation ul li {
display: -moz-inline-box; /* inline-block for earlier versions of FF */
-moz-box-orient: vertical; /* inline-block for earlier versions of FF */
display: inline-block;
vertical-align: middle;
*display: inline; /* ie7+ hack */
*vertical-align: auto; /* ie7+ hack */
text-align: left;
float: none;
}
.xg_theme #xg_navigation ul li a {
display: inline;
}

/*CENTER MODULE HEADER TEXT (Remove this code if you do not want to center module header text)*/
.xg_module_head {text-align: center;margin: 0 auto;}
.xg_module_head h2 {display: -moz-inline-box;-moz-box-orient: vertical;
display: inline-block; *vertical-align: middle;*display: inline; text-align: center;float: none;
}

/* Hello Box */
.xg_theme #xg_module_account, .account-links, .xg_theme #xg_module_body .narrow .viewer { margin-bottom:0px;
background-color: transparent !important;
background-image: url(URL IMAGE GOES HERE) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}

/*COMMENT BOX*/
#xg_profiles_chatterwall_post_comment{
color: #000000;
font-weight: bold;
font-style: italic;
font-family: Georgia, Avant Garde;
background-color: transparent !important;
background-image: url(URL IMAGE GOES HERE) !important;
background-repeat: no-repeat;
background-position: center;
background-attachment: relative;
height: 200px !important;
}

/*Buttons*/
a.button, button, input.button {
color: #831518 !important;
background: transparent !important;
border: 1px solid #000000 !important;
}
a.button:hover, button:hover, input.button:hover {
color: #000000 !important;
border: 1px solid #831518 !important;
}

/*****FLOATING CONTAINER*****/
/*****DO NOT REMOVE***IT'S A FUNCTIONAL CODE****/
.xg_theme .xg_floating_container {margin-top: -15em !important; width: 600px !important;}

/**END CODE: Basic CSS code developed for use on Classic and Design Studio editors.**/
/**CREDITS: DO NOT REMOVE****Debbie & Crickettt>Two By Two Design Studio creators at twobytwodesignstudio.ning.com**/

[GrayWitch]

HTML color codes 

http://www.w3schools.com/html/html_colornames.asp 

[Debbie]

I am the creator of twobytwodesignstudio.ning.com.  The code mentioned here on this discussion has a few glitches.  The code is no longer being offered free for use.