Customizing Nanacast Membership Content Pages
Customizing actual episodes with CSS is quite easy! First Login to Nanacast. Click Manage > Memberships, then click "Edit" on an Episode you've already created.
Next, jump down and expand the content settings tab; this will reveal the Episode Content box.
To get rid of the default Nanacast style and elements, simply add this code into the box:
<div id="container">
<!--You can delete these comments. This is where your "container" div starts, every other additional element should be added within this div-->
<div id="main_content">
<!-- Add your amazing content within your "main_content" element, you can also add additional "child" elements -->
<div id="test_element">
<!-- This "text_element" is here as an example to show you how you can add additional elements inside you "main_content" element. Make sure when you create an element to give it a unique "id" so you can target it in the CSS like these elements are targeted -->
Welcome {firstname}! This is the best method of totally customizing your Nanacast membership! <p> The world is your oyster! <br> </p>(whatever that means)
</div> <!-- "test_element" ends here -->
</div> <!-- "main_content" ends here -->
</div> <!-- "container" ends here -->
Next, go to Edit listing from within your membership control area; jump down and expand the Membership Header & Background Settings tab.
This will reveal the Customized HTML to appear at the top of each content page within membership area box.
All CSS added within this box will apply on any future episode within the membership; this is especially useful when creating a website-like Nanacast membership, since changing the CSS in each membership will not be required.
Paste the below CSS into the “Customized HTML to appear at the top of each content page within membership area” box:
<style><!-- make sure all of your css is between these tags -->
//-----------------------------------------------------
#container{width:auto !important;} //this selects the outer container and centers it
#td1{width:auto !important; padding:0px !important; background:transparent !important;} //this selects and hides a default Nanacast table
#contentWrapper{background-image:none !important; width:auto !important; height:0px; margin-top:0px; } //this selects and hides a default Nanacast table and removes the default image
#top{height:0px; width:0px; visibility:collapse;} //this selects and hides a default Nanacast table
#header{height:0px; width:0px; visibility:collapse;}//this selects and hides a default Nanacast table
#footer{height:0px; width:0px; visibility:collapse;}//this selects and hides a default Nanacast table
#pageBottom{height:0px; width:0px; visibility:collapse;}//this selects and hides a default Nanacast table
#navBar{height:0px; width:0px; visibility:collapse;}//this selects and hides a default Nanacast table
body{background:none #b68b3d !important;}//this selects and hides a default Nanacast table
#linkBackTable{height:0px; width:0px; visibility:collapse}//this selects and hides the 'Back to Membership Page list' link in Nanacast Membership pages.
/* DO NOT EDIT ABOVE CSS (unless you really know what you're doing) */
/*-----------------------------------------------------*/
/* OK, YOU CAN START EDITING NOW */
/*"#container" is your "wrapper" element, it holds all of your other "child" elements. You don't really need to alter it, however, go ahead and change its background color or padding if you want a nice border around your site*/
#container{margin:auto; padding:0px; margin-top:-17px; background:#d4d4d4; height:auto; text-align:center; z-index:999; width:auto;}
/*------------------------------------------------------*/
/*"#main_content" is your.. well, its where your main content would go. Alter the width parameter as well as the background, padding, text-size, colors, and text-align properties to get the desired effect.*/
#main_content{width:1200px; height:auto; position:relative;
background:#7ea2af; margin:auto; padding:7px;}
/*------------------------------------------------------*/
/*"#test_element" and "#test_element p" are just examples of how you can add additional div, span, li, or ul elements to your page and customize them accordingly. From here you can do whatever you want, use any CSS you desire. Just make sure all of your css is either inline or between the "style" tags like these ones are. Have fun :) */
#test_element{font-size: 1.4em; font-family:sans-serif; }
#test_element p{font-size:3em; font-family:Tahoma, sans-serif; }
//------------------------------------------------------*/
</style> <!-- make sure all of your css is between these tags -->
|
