Social Engine Theme Tutorials

Considering many Ning sites may choose to move to Social Engine I'm creating this group to help Members design their profile pages. :)

Basic CSS for Social Engine Member Profiles

Big thanks to PerseH for asking me to tinker on her site with Member profiles. :)

Here is a basic CSS code to use at her site, not sure if it will work on other SE sites or not.

http://www.paganunderworldse.com

body{
background-color: #000;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}

/*links*/
a:link,
a:visited {
color: #999;
}

.layout_core_menu_main > ul > li > a:link,
.layout_core_menu_main > ul > li > a:visited,
form.activity .compose-menu > a,
.layout_core_menu_main ul ul li a,
#global_footer a {
color: #FFCCFF;
}

.layout_core_menu_main > ul > li > a:hover,
form.activity .compose-menu > a:hover,
.layout_core_menu_main ul ul li a:hover,
#global_footer a:hover {
background-color: transparent;
color: #fff;
}

/*text*/
div,
td,
ul.feed .feed_item_bodytext {
color: #555;
}

/*heading text*/
h2,
h3,
h4,
#global_header #global_search_form_container > form input,
#global_header #global_search_form_container > form button#global_search_button,
form.activity .compose-content,
form.activity .compose-container .overTxtLabel {
color: #FFCCFF;
}

/*site header-footer and main navigation*/
.layout_page_header,
#global_footer {
background-color: #000;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}

/*main navigation submenu*/
.layout_core_menu_main ul ul {
background-color: #000;
border: 1px solid #FFCCFF;
}

/*main_tabs - form tabs - buttons*/
.tabs_alt,
form.activity .compose-menu {
background-color: #000;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}

.tabs_alt {
border: 1px solid #fff;
}

.tabs_alt > ul > li > a {
border-right: 1px solid #fff;
}

.tabs_alt > ul > li > a {
color: #eee;
}

.tabs_alt > ul > li.tab_active > a,
.tabs_alt > ul > li.active > a,
.tabs_alt > ul > li.tab_active > a:hover,
.tabs_alt > ul > li.active > a:hover,
.tabs_alt > ul > li > a:hover,
button,
a.button:link,
a.button:visited {
background-color: #FFCCFF;
color: #222;
}

/*buttons on friend list*/
.pulldown {
background-color: #000;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
border: 1px solid #FFCCFF;
border-radius: 3px;
}

.pulldown > a {
background-color: transparent;
color: #FFCCFF;
}

.pulldown > a:hover {
background-color: transparent;
color: #fff;
}

/*name and status message*/
#profile_status {
background-color: transparent;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
padding: 20px;
border: 1px solid #FFCCFF;
border-radius: 3px;
}

/*status container - input containers*/
.wallFeed .wallTextareaContainer,
input[type="text"],
input[type="email"],
input[type="password"],
input.text, textarea,
form.activity .compose-container .overTxtLabel {
background-color: #000;
border-color: #FFCCFF;
border-style: solid;
border-width: 1px;
color: #FFCCFF;
}

/*modules*/
#global_wrapper .layout_left > div,
#global_wrapper .layout_right > div,
#global_wrapper .layout_middle > div {
background-color: transparent;
background-image: url(http://);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
border: 1px solid #fff;
color: #fff;
}

#global_wrapper .layout_left > div,
#global_wrapper .layout_right > div,
#global_wrapper .layout_middle > div,
#global_wrapper .layout_middle > div.layout_core_container_tabs > .generic_layout_container,
.browsemembers_criteria,
.chat_container,
#global_content > .headline,
#global_content > form.global_form,
#global_content > table,
.compose-content,
.notifications_layout,
body .layout_right > .generic_layout_container,
body .tl_left > .generic_layout_container,
body .timeline-profile-tabs .he-tab-pane:not(:last-child),
.like_interests_wrapper,
#global_page_like-interests-index .headline + .description,
.wall-stream {
border: 1px solid #fff;
}

form.activity,
div.feed_viewmore a.icon_viewmore,
div#feed_loading,
ul.feed .feed_item_body,
.browsemembers_results > ul > li,
.paginationControl,
.content_feed_time_line .wall-action-item,
body .pinfeed .wall-action-item,
#global_page_pinfeed-index-index #global_wrapper .layout_left > div {
border: 1px solid #FFCCFF;
}

/*border around profile image*/
#memberphotomenu_photo > div {
background: none repeat scroll 0 0 #000;
border: 1px solid #fff;
}

/*feeds*/
#activity-feed {
padding: 10px;
border: 1px solid #fff;
}

/*list borders*/
ul.profile_friends > li + li,
ul.feed .feed_item_body .comments > ul > li:first-child {
border-color: #fff;
}

/*adjust at your own risk*/

h4 {
border: 0px solid transparent;
}

h4 > span,
.layout_core_menu_main ul ul li a:hover {
background-color: transparent;
}

form.activity,
div.feed_viewmore a.icon_viewmore,
div#feed_loading,
ul.feed .feed_item_body,
.browsemembers_results > ul > li,
.paginationControl,
.content_feed_time_line .wall-action-item,
body .pinfeed .wall-action-item,
#global_page_pinfeed-index-index #global_wrapper .layout_left > div,
.wall-feed .wall-action-item,
#global_wrapper .layout_middle > div.layout_core_container_tabs > .generic_layout_container,
.browsemembers_criteria,
.chat_container,
#global_content > .headline,
#global_content > form.global_form,
#global_content > table,
.compose-content,
.notifications_layout,
body .layout_right >
.generic_layout_container,
body .tl_left >
.generic_layout_container,
body .timeline-profile-tabs .he-tab-pane:not(:last-child),
.like_interests_wrapper,
#global_page_like-interests-index .headline + .description,
.wall-stream,
#memberphotomenu_photo,
ul.feed .feed_item_body .comments > ul > li {
background-color: transparent;
}