Ning Codes

Replies to This Discussion

Permalink Reply by QueenJackie on June 22, 2009 at 4:47pm

create rounded corners this works on your profile on here

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

• ▶ Reply

Permalink Reply by Bubblebutt's Playground!! on June 22, 2009 at 7:46pm

Thanks so much guys!! very cool info!!

• ▶ Reply

Permalink Reply by AnGella on June 22, 2009 at 10:25pm

Thanks! I like rounded corners!

QueenJackie said:

create rounded corners this works on your profile on here

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

• ▶ Reply

Permalink Reply by AnGella on June 22, 2009 at 10:26pm

Sorry, I have been slacking. lol, I'm on it now...

Jackie said:

oh that would be so cool if you could try,i have tried but no luck,i think your better at coding that i am lol

AnGella said:

Actually I tried to make the whole body smaller. I could try to isolate the center column.

Jackie said:

http://www.free-css.com/free-css-tutorials/basic-css-tutorials/styl...
this site seems to have alot of codes

only thing i would love to do is make the middle section smaller in width,but you already tired that i think

• ▶ Reply

Permalink Reply by QueenJackie on June 22, 2009 at 11:45pm

oh its okay,don't worry about it :)

AnGella said:

Sorry, I have been slacking. lol, I'm on it now...

Jackie said:

oh that would be so cool if you could try,i have tried but no luck,i think your better at coding that i am lol

AnGella said:

Actually I tried to make the whole body smaller. I could try to isolate the center column.

Jackie said:

http://www.free-css.com/free-css-tutorials/basic-css-tutorials/styl...
this site seems to have alot of codes

only thing i would love to do is make the middle section smaller in width,but you already tired that i think

• ▶ Reply

Permalink Reply by QueenJackie on June 22, 2009 at 11:45pm

the lyt i have on my profile now,has the rounded corners

• ▶ Reply

Permalink Reply by Jackie on July 9, 2009 at 9:13am

How to change the width of the first 2 colums on your page

#xg_layout_column_1{
background-color: transparent;
background-image:url(URL);
background-repeat:repeat;
margin-bottom:0em;
border:0px outset #000000;
width:170px;
}
.xg_1col .xg_module_head {
background-color:transparent;
background-image:url();
background-repeat:repeat;
margin-bottom:0em;
border:0px dashed #000000;
height: 50px;
}
#xg_layout_column_2{
width:540px;
margin-left:1.5em;
}

• ▶ Reply

Permalink Reply by QueenJackie on July 14, 2009 at 2:03pm

more codes

color in an area in the comment boxes
#comments dl.comment dd, #xg_profiles_chatterwall_list dl.comment dd {
background-color:#ffffff !important;
background image: url(none) repeat scroll center bottom;
margin-left:0;
margin-right:35%;
padding-bottom:40px;!important;
}
..........................................................
CSS Guide
http://storage.ning.com/topology/rest/1.0/file/get/2957835587?profi...
......................................................
Replace the home text (link) with a pic

Here's how to replace the home text with a home pic. on your network.

Start with the image you want to use, and find out it's dimensions, the width and height. Ideally

the height needs to be less than the navbar so in my case I increased the height of

#xg_navigation to 40px and the icon is 26x26px.

Here is the CSS to remove the text, and replace it with the icon;

#xg_tab_main a {
background-image: url(url-to-image)!important;
background-repeat: no-repeat;
background-position: top center;
background-color: transparent;
width: 30px;
text-indent: -999px; }
#xg_navigation ul li#xg_tab_main {
padding: 0 10px 0 0; }
#xg_tab_main a:hover {
background-image: url(url-to-image)!important; }

The padding in the second class is what makes the icon sit down from the top of the navbar so it

looks like it's centred against the text. In my case I decided I wanted the icon to look the same

when a user hovers their mouse cursor over it, so the third class has the same image, but you

can change this to another image if you'd like to.

Credit goes to:Carl Galloway
Found here: http://skins4.ning.com/forum/topic/show?id=1707358%3ATopic%3A3224
.......................................................
Animated Background
Add this to your Advanced box after other codes. Be sure to host your background and add the

URL in the right spot

}
#xg_body {
background-color:transparent; border:none; border-width:0;}
#xg_body {
background-image:url('URL TO YOUR BACKGROUND');
{ background-attachment:fixed;
background-repeat:repeat;
}
}



Or try this one:

}
#xg_body {
background-color:transparent; border:none; border-width:0;}
#xg_body {

background-color:transparent; border:none; border-width:0;}

#xg_body { background-image:url('URL TO YOUR BACKGROUND');
background-attachment:fixed;
background-repeat:repeat;
}
}

...................................................................
Transparent and fixed background
.xg_module_body {
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;
}
#xg_body {background-position: 5px 5px;
}
#xg_body {
background-attachment: fixed !important;
}

/* Feature Box: Titlebars */
.xg_module_head {
background:transparent

url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_module_head.gif);
}
/* Footer */
#xg_foot {
padding-top:12px;
background:transparent url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_foot.gif)

no-repeat!important;
}
......................................................
HERE IS THE CODE TO ADD A BACK GROUND TO MODULES:

/* Module Body: Background & Text */
.xg_module_body,
.xg_module_body legend,
.xg_module_body legend.toggle a,
.xg_module_foot,
ul.page_tabs li.this {
background-color:/* %moduleBodyBgColor% */ #FFFFFF;
background-image:/* %moduleBgImage% */ url(BACKGROUND URL HERE);
background-repeat:/* %moduleBgImage_repeat% */ repeat;
}
..................................................
Make your page transparent
Go to appearance/ add to advanced page at the bottom of other coding.

.xg_module_body {
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;
}
#xg_body {background-position: 5px 5px;
}
#xg_body {
background-attachment: fixed !important;
}
#xg {
font-size: 130%;
}

...............................................
Dashed Borders
What can be changed in this code?

The color numbers

The width of the border

You can change the dashed to dotted ( I think) LOL

Also with this code you can make a pretty at teh top of each box.
Just go to the last box in your appearance options that says back ground,
add a pretty there. BUT the pretty must be a small image or a small divider.

PUT THIS CODE IN YOUR ADVANCED BOX AND HIT SAVE

#xg_body {
background-color:transparent;
}
/* Dashed Boxes for Navigation */
#xg_navigation {
height:1%;
margin-top:0em; margin-bottom:0.5em;
}
#xg_navigation ul li a,
#xg_navigation ul li.this a,
#xg_navigation ul li a:hover {
background:url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_navigation_ul_li_a.gif)

repeat-x;
border:2px dashed #528097;
color:#528097;
}
#xg_navigation ul li.this a,
#xg_navigation ul li a:hover {
background:url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_navigation_ul_li_ahove

r.gif) repeat-x;
color:#528097;
}
/* Move Masthead & Navigation down */
#xg_masthead {
min-height:87px;
padding-top:10px;
}
* html #xg_masthead {
height:87px;
}
#xg_masthead p,
#xg_sitename {
margin:0;
padding:0.2em 0 0 15px;
font-size:4em;
}
/* Feature Boxes */
.xg_module_body,
.xg_module_body legend,
.xg_module_body legend.toggle a,
.xg_module_foot,
ul.page_tabs li.this {
background-repeat:repeat-x;
border-top:1px dashed #528097;
border-bottom:2px dashed #528097;
}
#xg_module_account .manage {
border-style:solid;
}
.xg_module_foot {
border-top:0 none;
margin-top:-2px;
}
/* Feature Box: Titlebars */
.xg_module_head {
background:transparent

url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_module_head.gif);
}
/* Footer */
#xg_foot {
padding-top:12px;
background:transparent url(/xn_resources/widgets/index/gfx/themes/Baby%20Girl/xg_foot.gif)

no-repeat!important;
}
............................................................................
removing boarder around the welcome box

.xg_signup {
border-width:0px !important;
}

.account-links {
border: 0px !important;
}


the welcome box is the box at the top right, that says welcome when not logged in.

and says Hello /my friends/inbox/my settings
when logged in
................................................
CSS for traditional gray buttons.

/* gray buttons */
a.button, p.edit a.button,
button, .swatch_group button,
input.button {
border:1px solid #aaa;
background:#e3e3e3 url(/xn_resources/widgets/index/gfx/
button.gif) repeat-x left top;
color:#333;
}
p.edit a.button:hover {
color:#333;
}
a.button.disabled:hover,
button.disabled:hover {
background:#e3e3e3 url(/xn_resources/widgets/index/gfx/
button.gif) repeat-x left top;
}
button:hover,
.swatch_group button:hover,
a.button:hover, p.edit a.button:hover,
input.button:hover {
background:#fff url(/xn_resources/widgets/index/gfx/button-
hover.gif) repeat-x left top;
}
.................................................................
(Creators) remove the time stamp on "Latest Activity"

.activityitem .time

{

font-size: 0.95em;

opacity: 0.6;

white-space: nowrap;

display: none;

}
.......................................
gives the clickable links when hover a background image

body a:hover {
color:/* %siteLinkColor% */ #c04b62;
background:transparent url(http://i275.photobucket.com/albums/jj307/mpctruth/Paradise

Creations 2/butterflies-3-1.gif) no-repeat center 0px;
}
...........................................................

How to change the size of Module-header titles
.xg_module_head {
font-size:14px;
}
.....................................
Menu tabs & subtabs issue
subtabs don´t emerge properly
Add the height code to each piece of the navigation bar code, like I did on these below:

#xg_navigation ul div.xg_subtab ul li a {
color:#333333;
background:#FFFFCC;
height:20px;
}
#xg_navigation ul div.xg_subtab ul li a:hover {
color:#000000;
background:#F1D05F;
height:20px;
}
.........................
center my tabs
#xg_navigation { text-align:center !important; }
#xg_navigation li, #xg_navigation li a {
display:inline !important;
float:none !important;
width:auto !important;
}
.........................................

Wider third column
/*----------------------------------------------------------------------
Footer (#xg_foot and descendants)
----------------------------------------------------------------------*/
#xg_foot,
#xg_foot a {
color:#643c3a;
}
#xg_foot {
border-top:3px solid #643C3A;
}
.xg_welcome_box {display:none; }
#xn_bar {display:none;}
.xg_widget_main_index_index .xg_3col .xg_1col {
display:none;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
width:747px;
margin-left:0;
padding:0;
}
.xg_widget_main_index_index .xg_3col .xg_2col img {
max-width:737px;
_width:expression(this.width > 737 ? 737: true);
}
.xg_widget_main_index_index .xg_3col .xg_2col .xg_reset img {
max-width:721px;
_width:expression(this.width > 721 ? 721: true);
}

/* Get rid of the Left Column */
.xg_widget_main_index_index #xg_layout_column_1{
display: none;
}

/* Widen out our center column */
.xg_widget_main_index_index #xg_layout_column_2{
width: 700px;
padding: 0px;
margin: 0px;
}

.xg_widget_main_index_index .xg_3col{
margin-right: 10px;
padding: 0px;
width: 700px;
}

.xg_widget_main_index_index .xg_3col .xg_module_body{
padding: 0px;
margin: 0px;
width: 700px;
}

• ▶ Reply

Permalink Reply by BABYDIABOLICAL on July 22, 2009 at 7:15pm

http://vulgaria.ning.com/group/ninghacks

• ▶ Reply

Permalink Reply by QueenJackie on July 22, 2009 at 9:34pm

wow thanks

BABYDIABOLICAL said:

http://vulgaria.ning.com/group/ninghacks

• ▶ Reply

Permalink Reply by KING KREATIONS on August 10, 2009 at 11:32am

Wanna move the sign in / sign up box on the sign up page around or adjust the size of the box? Well here's the code. It is set to the way I have it on my site so you may wanna play around with it until you feel comfortable. Just place the code in the advanced tab, save, sign out, then sign back in to make sure it works.

#xg.account #xg_body {
width:735px;
height: 488px;
min-height: 488px;
float:left;


}

#xg.account {
width:735px;
height: 488px;
min-height: 488px;
left: 32%;
}

fieldset.account input.textfield,
fieldset.account input.password {
width:200px;
}


xg_widget_main_authorization fieldset.account {
float:left;
margin-top:10px;
}

• ▶ Reply

Permalink Reply by KING KREATIONS on August 10, 2009 at 11:37am

Wanna get rid of the sign in box on the top right corner of ur layout? (I advise Network Creators to replace it with a customized sign in form wherever you want it on ur page) Well here's the code... Just place it in ur advanced section and save.

#xg_module_account {
display:none !important;
}

• ▶ Reply

▶ Reply to Discussion

• ‹ Previous
• 1
• 2
• 3
• Next ›
• Page