stylesheet - FORUM - Ning Creators Social Network2024-03-28T17:20:24Zhttps://creators.ning.com/forum/topics/feed/tag/stylesheet"TIP" Creating a CSS stylesheet for your network, CSS cleanup design studio, NC custom code box, ad box,https://creators.ning.com/forum/topics/tip-creating-a-css-stylesheet-for-your-network-css-cleanup2012-10-31T19:30:55.000Z2012-10-31T19:30:55.000ZGeorge H. Compton IVhttps://creators.ning.com/members/GeorgeHComptonIV<div><p>You can take all your CSS codes from your design studio,<br />
NC custom code box and your ad boxes and put them on a<br />
stylesheet. This will speed up your network and make more<br />
room in your code box's.</p>
<p><br />
<span class="font-size-5"><strong><span style="color: #0000ff;">(Creating your stylesheet)</span></strong></span></p>
<p>remember to remove all tags from your CSS codes before adding it to a stylesheet</p>
<p>example remove all tags like this <strong>/*end hide modules*/</strong> also remove any style Tags <strong><style></strong> & <strong></style></strong> from any CSS code you got from your <strong>NC custom code box</strong>, <strong>ad box</strong> or your <strong>design studio advanced CSS</strong>..</p>
<p>Just create a new text document on your desktop<br />
and then copy all your CSS codes to the text document<br />
and save. change the file extension of the text document from<br />
.txt to .css</p>
<p>To change the file extension go to your "<span style="color: #0000ff;"><strong>control panel</strong></span>" double click on the "<span style="color: #0000ff;"><strong>folder options</strong></span>" icon. the folder options box will pop up select the "<span style="color: #0000ff;"><strong>view tab</strong></span>" then look down the list until you find The line that says "<span style="color: #0000ff;"><strong>hide extensions of known file types</strong></span>" uncheck that box press apply then okay. The document that you created now shows the file extension .txt at the end of the name of the document. now you can change the .txt to .css<br />
<br />
then upload the stylesheet to your<br />
network and replace the link (<a rel="nofollow" href="http://your_new_stylesheet.css">http://your_new_stylesheet.css</a>) in this code below with<br />
the new link you just created.<br />
<br />
<strong><span class="font-size-5" style="color: #0000ff;">(Uploading the stylesheet)</span></strong><br />
if you have a file manager just upload it with that.<br />
if not just create a new page without saving<br />
press the attachment button and upload the stylesheet<br />
when the upload completes highlight and copy the link<br />
and paste it over the link (<a rel="nofollow" href="http://your_new_stylesheet.css">http://your_new_stylesheet.css</a>) in the code below then hit<br />
ok then cancel the new page.<br />
<br />
<span class="font-size-5"><strong><span style="color: #0000ff;">(Placing the code on your network)</span></strong></span><br />
place the stylesheet code in<br />
your NC custom code box or in any ad box.</p>
<p><strong><span class="font-size-5" style="color: #888888;">CODE</span></strong><br />
<link rel="stylesheet" type="text/css" href="http://your_new_stylesheet.css" /><br />
<br />
<br />
<span class="font-size-5"><strong><span style="color: #ff0000;">Stylesheet limitations</span></strong></span><br />
a stylesheet can not be larger than 288kb</p>
<p><span style="color: #ff0000;">NO JavaScript</span> and <span style="color: #ff0000;">NO</span> <span style="color: #ff0000;">HTML</span>.<br />
Internet Explorer 6 to 9 can only handle 31 stylesheets</p>
<p>most any other browser can handle 4095 or more.</p>
</div>"TIP" "style_GC_whole_network.css" Update Version 5.4https://creators.ning.com/forum/topics/tip-style-gc-whole-network-version-5-it-adds-styles-and2012-09-09T18:00:42.000Z2012-09-09T18:00:42.000ZGeorge H. Compton IVhttps://creators.ning.com/members/GeorgeHComptonIV<div><p><span class="font-size-3"><strong>This stylesheet will add styles and animation fx throughout your whole network blogs, forums, groups, latest activity, comments and a whole lot more</strong></span>. <span class="font-size-3"><strong>:-)</strong></span></p>
<p>I put it into a stylesheet because of the amount of code it takes to do this. So it's really easy to add and remove from your NC custom code box</p>
<p>If you'd like to view the Codes in The stylesheet just <strong><a href="http://storage.ning.com/topology/rest/1.0/file/get/552832?profile=original" target="_blank">click here</a></strong></p>
<p><strong><a href="http://4himalone.ning.com/" target="_blank">click here to see it live on cross roads Fellowship</a></strong></p>
<p><span class="font-size-3"><strong>just add this code to the top of your NC custom code box.</strong></span></p>
<p><link rel="stylesheet" type="text/css" href="http://storage.ning.com/topology/rest/1.0/file/get/552832?profile=original" /></p>
<p> </p>
<p><span class="font-size-3"><strong>Remember everyone results may vary because of the differences in Ning networks. But I did spend week's working on compatibility for The different ning networks, layouts and themes..</strong></span></p>
<p>This was design on a Ning pro account and tested on many Ning Networks</p>
<p><strong><span style="color: #0000ff;">If you would like me to change anything in this code or remove anything for you just ask I'll be more than happy to help</span></strong></p>
<p> </p>
<p><strong>Editing the colors</strong> in the stylesheet. in these codes just change the word <strong>transparent</strong> to any color you want.</p>
<p>this code will change the <strong>group's</strong> <strong>mouse hover color</strong><br> <br> DIV.xg_module.module_groups LI.xg_lightborder:hover{<br> background-color:transparent!important;}<br> <br> These three codes will change the <strong>activity feed colors</strong><br> <br> .xg_module_activity .feed-story-status .status-update:hover{<br> background-color:Transparent !important; }<br> <br> <br> .xg_module_activity .feed-story-status .status-update{<br> background-color:Transparent !important; }<br> <br> .xg_module_activity SPAN.comments-number {<br> background-color:transparent !important; }<br> <br> This code will change <strong>The forum Mouse hover color</strong><br> <br> .module_forum div.vcard div.topic:hover{<br> background-color: transparent!important;}<br> <br> and this one will change the color of the <strong>blogpost mouse hover Color</strong><br> <br> .module_blog .blogpost:hover{<br> background-color:transparent !important; }<br> <br> And this code will change the <strong>red continue button</strong><br> <br> A.xj_expandable {<br> background:transparent !important;}<br> <br> This code will change the color of the <strong>text</strong> in the <strong>continue button</strong>.<br> <br> A.xj_expandable {<br> color:#15c708;}</p>
<p><br> All <strong>module shadows</strong> in this code you can change the ( <strong>shadow colors</strong> <strong>#ccc</strong> ) for the <span style="color: #ff0000;">shadow colors change all three</span> ( <strong>Border colors</strong> <strong>#aaa</strong> ) and ( <strong>Border</strong> <strong>thickness</strong> <strong>2</strong>px )</p>
<p>.xg_module {<br> border:2px solid #aaa!important; -webkit-box-shadow:6px 6px 10px<br> #ccc!important;-moz-box-shadow:6px 6px 10px<br> #ccc!important;box-shadow:6px 6px 10px<br> #ccc!important;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";<br> filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');}<br> <br> <br> I believe that's all the major colors there are in the stylesheet</p>
<p class="lb-line-item">Here's two pic's of the main page here on creators with this stylesheet virtually added</p>
<p class="lb-line-item"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/552665?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/552665?profile=RESIZE_1024x1024" width="721"></a></p>
<p class="lb-line-item"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/552701?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/552701?profile=RESIZE_1024x1024" width="721"></a></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item">Here's a couple more snapshots of the Main page and groups page.. right click and open them in a new tab to get a better view</p>
<p class="lb-line-item"></p>
<p class="lb-line-item"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/552725?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/552725?profile=original" width="636"></a></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/552799?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/552799?profile=original" width="636"></a></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p class="lb-line-item"></p>
<p></p></div>