Skemaholics Anonymous

Layouts 4 Ning and more!

I just wanted to let everyone know that these codes i got mostly from here
http://developer.ning.com/forum
and
http://theningdirectory.ning.com
I DO NOT take credit for these codes

do you have any codes you would like to share?
here are the ones i have
#xg_masthead { height: 282px; }
#xg_sitedesc { visibility: hidden; }
...........................................................
this will make the first column disappear:
from there you can change the width of the second column to fill up the empty space.

.xg_1col.first-child{
display:none;
}
.............................................................

Place this code in your advanced section to get rid of the search box and sign out on the Ning bar.
#xn_bar_menu_search { visibility: hidden; }
#xn_bar_menu_tabs { visibility: hidden; }

This gets rid of the entire Ning bar along with the Ning link.
(You must have a premium account with Ning to remove the Ning links)
#xn_bar{visibility:hidden;}
...................................................
Frame your friends;
Change the border style,color and size to match your page or network and paste this code in your advanced section.

/* Friends Module */ .xg_module_friend_list,#xg_module_body iframe{ width :auto;
height:auto;
overflow:auto;
padding-left:3px;

}
.module_members .xg_module_body li {
display:block;
float:center;
display:inline;
height:48px;
width :48px;
border-top:5px double #BA23EB;
border-bottom:5px double #BA23EB;
border-right: 5px double #BA23EB;
border-left: 5px double #BA23EB;
position:relative;
padding: 3px 3px 1px 3px;
margin: 4px;
overflow: center;
}

..............................................
Scroll through your comments;
Just paste this code in your advanced section.


/* Comment Wall */ #xg_module_body, #xg_module_head h2, .xg_module_comment_wall{
width : 540px;
height : 650px;
overflow : auto;
margin : 3px;
text-align : center;
font-size : 12px;
font-family : arial;
border:3px ridge #FF0000;
}
..............................................................
Change the look of your small columns;
Just put in your URL, border style, size, color and paste the codes into the proper areas of your advanced CSS code.

CSS Tweaks Place in the module body
section of the Css code
----------------------*/

.xg_1col .xg_module_body {
background-color: transparent;
background-image:url(URL);
background-repeat:repeat;
margin-bottom:0em;
border:3px outset #FF0000;
}


/*---------------------
CSS Tweaks
Place in the module Head
section of the Css code
----------------------*/
.xg_1col .xg_module_head {
background-color: transparent;
background-image:url(URL);
background-repeat:repeat;
margin-bottom:0em;
border:3px dashed #EFF552;
}
.........................................................

Scroll through your Blog posts: This code is for network creators; If you have ever scrolled a mile to the bottom of the page to check out Blog posts and had to scroll all the way back up to the navigation bar, this is the code you need. just change the border and font color to match your networks and paste the code in your advanced box above the other code.

/* Blog Posts Code can be placed above your network code*/
#xg_module_body,This code
#xg_module, .xg_blog, .xg_blog_list{
width : 540px;
height : 650px;
overflow : auto;
margin : 3px;
text-align : center;
font-size : 12px;
font-family : arial;
border:3px solid #000000;
}

Making your nav menu look unique
http://developer.ning.com/forum/topics/1185512:Topic:47947
................................................
to add background to your link buttons

#xg_navigation ul li a:link {margin-top:0px;margin-bottom:5px;background-color:#C5257C;background-image:url(http://i62.photobucket.com/albums/h94/jackiesc/skemaholicslyts/pink...);text-align:center;font-size:8pt;color:#C5257C;font-family:centuary gothic;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #C5257C;}

#xg_navigation ul li a:visited {margin-top:0px;margin-bottom:5px;background-color:#C5257C;background-image:url(http://i62.photobucket.com/albums/h94/jackiesc/skemaholicslyts/pink...);text-align:center;font-size:8pt;color:#C5257C;font-family:centuary gothic;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #C5257C;}

#xg_navigation ul li a:hover {margin-top:0px;margin-bottom:5px;background-color:#C5257C;background-image:url(http://i62.photobucket.com/albums/h94/jackiesc/skemaholicslyts/pink...);text-align:center;font-size:8pt;color:#C5257C;font-family:centuary gothic;font-weight:bold;text-decoration:none;padding: 0px 7px 0px 9px;border:inset 2px #C5257C;}

#xg_navigation ul li a:action {margin-top:0px;margin-bottom:5px;background-color:#ffffff;background-image:url(http://i62.photobucket.com/albums/h94/jackiesc/skemaholicslyts/pink...);text-align:center;font-size:8pt;color:#C5257C;font-family:centuary gothic;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #C5257C;}

Views: 425

Reply to This

Replies to This Discussion

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;
Thanks so much guys!! very cool info!!
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;
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
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
the lyt i have on my profile now,has the rounded corners
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;
}
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;
}
wow thanks

BABYDIABOLICAL said:
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;
}
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 to Discussion

RSS

Search


Translate!


Forum

Shiny Happy Random Thread 1595 Replies

Started by AnGella in Meeting Place. Last reply by James McDonald Jan 28.

RIP Skemanon 2009 - 2021 27 Replies

Started by AnGella in Announcements!. Last reply by AnGella Jun 3, 2023.

Apologies for Delayed Moderation 9 Replies

Started by AnGella in Announcements!. Last reply by ღCustom Creationsღ Test Page Apr 21, 2021.

Skemanon 2020? 36 Replies

Started by AnGella in Announcements!. Last reply by AnGella Aug 10, 2020.

How to make puffy stickers in PSP 16 Replies

Started by QueenJackie in Tutorials ~ In General. Last reply by Connie (。♥‿♥。) Mar 14, 2020.


Generators!

Click the buttons below to make your own layouts!

SiteModel


Ning Generator


Skinny Ning


Biker Or Not


Test Your Ning Code Here!


Create!



Contribute to SA


Find this site helpful? Please consider a donation!



Random Ning Networks

Birthdays

© 2024   Created by AnGella.   Powered by

Badges  |  Report an Issue  |  Terms of Service