Ning Profile help!

Go down

Ning Profile help!

Post  Bear on Thu Oct 15, 2009 6:02 pm

To edit your profile layout Goto MY PAGE under your profile photo there is a link that says manage My Profile. There you will find a place to edit the appearance.



Click the Advanced tab to edit your css:

I have had a few people ask how to set their background to a fixed image with usen CSS. So here is the code for your background:

body{
background-color:#XXXXXXX;
background-image:
url(XXXXXXXXXXXXXX);
background-position: top center;
background-repeat:
no-repeat;
background-attachment: fixed
}

Replace XXXXXXXX's with proper information.

***MAKE SURE YOUR OVERLAYS ARE SET TO TRANSPARENT AND YOU DONT HAVE AN IMAGE SET AS YOUR BACKGROUND WITH THE EASY PAGE EDITOR***

You can also adjust the positioning of the background image. If you would like to define where exactly an image appears within an HTML element, you may use CSS's background-position. Please take note that there are three different ways of defining position: length, percentages, and keywords. I recommending using lengths -- specifically, pixels. In the example I have posted I used "top center" as its position but this can be replaced with what ever you feel like using.

This is an example of my CSS layout. Again I have set all the box's to transparent and selected no image. I have posted numbers 1-9 in the middle of the XXXXXXX's and will provide a key to let you know what colors and images they are.

This is an example of my CSS layout. Again I have set all the box's to transparent and selected no image. I have posted numbers 1-9 in the middle of the XXXXXXX's and will provide a key to let you know what colors and images they are.

/* Page Title */
#xg_body h1,
#xg_body ul.navigation a,
#xg_navigation ul li.this a,
#xg_navigation ul li a:hover {
color:/* %pageTitleColor% */ #XXX1XX;
}
/* Tab Color */
#xg_navigation ul li a {
background-color:/* %headTabColor% */ #XXX2XX;
}
/* 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% */ #XXX3XX;
background-image:/* %moduleBgImage% */ url(XXXXXXXXXXXXXXXX4XXXXXXXXXXXXXXXXXXX);
background-repeat:/* %moduleBgImage_repeat% */ repeat;
}
/* Module Body: Headings */
.xg_module_body h3,
.xg_module_body caption {
color:/* %moduleHeadingColor% */ #XXX5XX;
}

body{
background-color:#XXX6XX;
background-image:
url(XXXXXXXXXXX7XXXXXXXX);
background-position: top center;
background-repeat:
no-repeat;
background-attachment: fixed
}
/* Feature Box Body */
.xg_module_body, .pad {
padding-left:0;
background-color:transparent;
}
/* Feature Box Footers */
.xg_module_foot {
padding-left:0;
background-color:transparent;
}
#xg_navigation ul li a {
text-transform: uppercase;
display: block;
text-align: center;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #XXX8XX;
left:0px;
top:0px !important;
top:-12px;
position:relative;
background-color:transparent;
}
#xg_navigation ul li a:hover {
color: #XXX9XX;
background-color:transparent;
}

1: the color of headers (headers are headlineing text that can be set by useing header codes in HTML feilds
Example of h1
example of h2
example of h3
to end header) 2: The color of the text in your TAB bar (this is the nav bar that has the links as follows = Main, Invite, My Page ect ect ect...)
3: this is the color of the overlay box's used on your page. the overlay box's are where all content is placed.
4: This is where you would put a url for an image if you wish to set one as your overlay background (it is not your general profile background image only for the box's)
5: This is the color for your headings of the overlay box's or titles of the box's content.
6: this is the color of your profile background.
7: Url for your background image. (I have set it to top center and for noscroll but that can be changed if needed by altering the code a bit. top center can be changed to left, right, bottom and no scroll can be set for tile, repeat, or just leaveing it blank will allow scroll.)
8: This is the color of the content of your page. all text and what not
9: this is the color of urls/links

***important*** for this to work properly please set the basic layout settings to this:

Header Background: transparent (the little grey and white checker box's) ( I do have a header image on my profile but you dont need one if you dont want one)

Shader Background: transparent

Body Background: transparent

Body Background: none (image)

As for top and footer or side bars you may do as you see fit that works with your layout.

ALSO the image used for the overlay box's on the main page is found here http://api.ning.com/files/QtkY5B8yiYxINlUWj7l8BQvLOH3z7BfV93UaHINu3...
you can copy paste that url into
avatar
Bear

Posts : 4
Join date : 2009-10-13
Age : 38
Location : Ohio

View user profile http://www.7sinsaplenty.ning.com

Back to top Go down

Re: Ning Profile help!

Post  Squeakers on Thu Oct 15, 2009 7:03 pm

Nice info man the link doesn't work though
avatar
Squeakers

Posts : 44
Join date : 2009-09-10
Age : 32
Location : Atlanta, GA

View user profile

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum