Hello All,
I am new to designing using custom codes in NING. I have found some great tutorials that have helped me along though.
I am currently stuck with extra space being inserted after the flash file I've used for the header and after the static png that I'm using under my navigation. I've tried to resize the image and animated banner to fill in the space but it hasn't worked. Not sure if there is a margin or padding around the elements that I am unable to affect.
Hope someone can help. Thanks in advance
NING Site:http://rewardcity.ning.comJavascript from custom code area for both image and swf file:<script type="text/javascript">
/**
* Tracking Code Hack: Replace the Header of the network with a swf
**/
var headerSwfUrl = "http://stimulus.ws/images/bountycardbanner.swf";
var headerSwfWidth = 955;
var headerSwfHeight = 280;
var newHeaderHtml = '<embed src="'+headerSwfUrl+'" width="'+headerSwfWidth+'" height="'+headerSwfHeight+'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer a href="http://www.macromedia.com/go/getflashplayer>">http://www.macromedia.com/go/getflashplayer> "> </embed>';
var headerElement = document.getElementById('xg_masthead');
//replace the old header with the new one
headerElement.innerHTML = newHeaderHtml;
//change the id as a simple way to remove all css attached to it
headerElement.id = 'newheader';
</script>
CSS for entire NING site:#xg {
background-image:();
}
/*----------------------------------------------------------------------
Header & Navigation (#xg_head and descendants)
----------------------------------------------------------------------*/
#xn_bar /*Ning bar at top*/
{margin: auto; display: none;background-color:transparent; background-
image:transparent;width:955px;height:0px;background-position:top center background-repeat: no-repeat; background-attachment: scrolls; color: black;
}
#xg_masthead /*Top Image*/
{margin: auto;
display: block;
height:192px;
width: 955px;
}
#xg_sitename{
display:none;
}
}
#xg_head > #xg_masthead {
background-image: none;
height: auto;
}
#xg_masthead p#xg_sitename {
background-image: none;
margin:.1;
padding:.1px 0 0 955px;
line-height:.1em;
}
#xg_masthead p#xg_sitedesc {
font-size:.1em;
padding:0pt 0pt 0em .1px;
color:#000;
}
#xg_navigation {
background-color:#3B83BD;
padding:1px;
font-size:2px;
*margin-top:0;
}
#xg_navigation ul li {
font-size:9px;
letter-spacing:0.08em;
text-transform:uppercase;
margin: 0 0 0 0px;
}
#xg_navigation ul li a {
background-color:transparent;
color:#FFFFFF;
line-height: 30px;
padding-bottom:5px;
}
#xg_navigation ul li a:hover {
background: transparent none;
color:#000000;
}
#xg_navigation ul li.this a {
color:#ef0303;
}
#xg_masthead p#xg_sitedesc {
font-size:2.2em;
padding:0pt 0pt 0em 18px;
color:#587f94;
}
/*----------------------------------------------------------------------
Body (#xg_body and descendants)
----------------------------------------------------------------------*/
.xg_module {
margin-bottom: 1.5em;
}
.xg_module_head {
border-bottom:2px dotted #CFE9F3;
margin-bottom:0pt;
text-transform:uppercase;
}
.xg_module_body,
.xg_module_foot {
border-top: 2px dotted #14a2ae;
}
.xg_module_body {
background-color: #FFFFFF;
}
#xg #xg_body h1 {
color: #1ea5de;
}
ul.pagination li.this span {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #FFFFFF;
}
.xg_module_body h3,
.xg_module_body caption {
color: #1ea5de;
}
#xg_body ul.navigation {
position: static;
float: left;
clear: both;
border-bottom: 1px dotted #14a2ae;
}
ul.page_tabs {
border-bottom-color: #ccc;
}
ul.page_tabs li a,
ul.page_tabs li.this span {
border-color: #ccc;
}
/*----------------------------------------------------------------------
Footer (#xg_foot and descendants)
----------------------------------------------------------------------*/
#xg_foot,
#xg_foot a {
color:#333;
background-color: #fffff;
}
#xg_foot {
border-top:2px solid #c8e5f0;
}