buttons - FORUM - Ning Creators Social Network2024-03-29T00:48:43Zhttps://creators.ning.com/forum/topics/feed/tag/buttonsBlogs 3.0 Previous and Next buttonshttps://creators.ning.com/forum/topics/blogs-3-0-previous-and-next-buttons2017-06-09T22:30:04.000Z2017-06-09T22:30:04.000ZAlliancehttps://creators.ning.com/members/Alliance<div><p>It seems one aspect that was in Blogs on 2.0 is not on the 3.0 platform and this is the Previous and Next buttons.</p>
<p>I always thought this was a good feature especially if you wanted to research or follow one specific poster and his content.</p>
<p>For example I have a person who writes a book online one chapter at a time.</p>
<p>Is there any chance on having this return for 3.0 even if it is an option? </p>
<p></p>
<p><img src="http://storage.ning.com/topology/rest/1.0/file/get/558993?profile=original" class="align-full" style="padding: 2px;" width="746"></p></div>Changing Your Feature Button To Reflect The Item Has Already Been Featuredhttps://creators.ning.com/forum/topics/changing-your-feature-button-to-reflect-the-item-has-already-been2017-01-08T15:21:50.000Z2017-01-08T15:21:50.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>This is just a small tip for Admins as they are the only ones who see this but you may find it helpful</p>
<p>Sometimes you may been looking at some posts that are in a featured list or you may have opened a post that has been featured already but when you look at the Feature button it does not reflect it has been Featured already and just still says Feature. So let's say the item has already been featured but when you look at the button it just says Feature so you press it to make the item Featured but in effect you are actually un-featuring the post, I have done this myself many times in the past.</p>
<p><span style="color: #000000;"><strong>So here is a small line of CSS</strong></span> which will just add the letter d to the end of the word Feature so it says Featured on featured posts.</p>
<p>.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected .icon-feature:after{content:"d";display:inline-block }</p>
<p><span style="color: #000000;"><strong>Next we can add some optional custom code</strong></span> to change the little tooltip text which shows up when you hover over the button.</p>
<p>The first line will show the word Featured if the post has been featured</p>
<p>The Second Line is a hover function so when you hover over it it says Click to Un-Feature This</p>
<p>And the Last line is for Un-Featured posts to say Click To Feature This.</p>
<p><script><br />
x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected').attr('title','Featured');<br />
x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected').hover(function() {<br />
x$(this).attr('title','Click To Un-Feature This');<br />
});<br />
x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button:not(.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected)').attr('title','Click to Feature This');<br />
</script></p>
<p>This may seem small but makes a big difference when looking at post as Admins especially if you have some new admins on your site.</p>
<p>By the way if you are interested in giving the Feature Add and Edit buttons a make over here is a post I added to do just that.</p>
<p><a href="http://creators.ning.com/forum/topics/how-to-make-your-feature-add-edit-buttons-at-the-top-of-pages-sta" target="_self">STYLE YOUR FEATURE EDIT ADD BUTTONS</a></p>
<p>Enjoy</p>
<p>John :-)</p>
</div>How To Make Your Feature, Add, Edit Buttons At The Top Of Pages Stand Out Better (Updated 08/01/17)https://creators.ning.com/forum/topics/how-to-make-your-feature-add-edit-buttons-at-the-top-of-pages-sta2017-01-01T14:58:07.000Z2017-01-01T14:58:07.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>In the past when I ran a full member network the most common questions I got asked were how to add a photo or edit a photo, same for forums blogs etc, so here is a litttle tip which helps make those stand out.</p>
<p>In the design studio there is an option to be able to turn of or on the text label for these and this tip will work for both but I do prefer the text label ticked. Below is where you will find this and also two examples of how the code looks. Again you can changes the colours as required by editing the code.</p>
<p>How to find the text label</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558617?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558617?profile=RESIZE_1024x1024" class="align-full" width="750"></a>Examples of after the code has been added.</p>
<p>With Text Label</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558639?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558639?profile=original" class="align-full" width="681"></a>Without Text Label</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558652?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558652?profile=original" class="align-full" width="486"></a>Code used for this, it's all css so just add it to your custom css section.</p>
<p>/* COLOURS FOR THE FEATURE EDIT AND ADD BUTTONS AND MAKE THEM ROUND*/<br> .linkbar.linkbar-iconic .button.button-iconic { border:none;border-color:transparent;border-radius:50px;font-size:1em;color:white }<br> .linkbar.linkbar-iconic .button.button-iconic .icon{ vertical-align:middle;height:auto; }<br> .linkbar.linkbar-iconic .button.button-iconic.feature-button { background-color:royalblue; }<br> .linkbar.linkbar-iconic .button.button-iconic[title="Edit"] { background-color:red; }<br> .linkbar.linkbar-iconic .button.button-iconic[title="Add Discussion"] { background-color:green }<br> .linkbar.linkbar-iconic .button.button-iconic[title="Add Blog Post"] { background-color:green }<br> .linkbar.linkbar-iconic .button.button-iconic[title="Add Article"] { background-color:green }<br> .linkbar.linkbar-iconic #photoupload .button.button-iconic{ background-color:green}<br> /*Hover colour for all of them*/<br> .linkbar.linkbar-iconic .button.button-iconic:hover,.linkbar.linkbar-iconic #photoupload .button.button-iconic:hover{background-color:darkblue;color:white}</p>
<p>Some new code below for the Feature button. The first part is just some additional css so that when you are veiwing something that is featured then it just adds the letter d so the button reads Featured rather than still Feature. It just makes it a little clear that it has already been featured and also changes it colour background to reflect this.</p>
<p>The second part is some custom code to go in the custom code end pf page box. What this does is just change the tool tip text when you hover over the button.</p>
<p>.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected { background-color:sienna; }<br> .linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected:hover { background-color:darkblue; }<br> .linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected .icon-feature:after{content:"d";display:inline-block }</p>
<p>And the custom code to add to your site&pages end of page box, this is optional ( do not copy this line with the code )</p>
<p><script><br> x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected').attr('title','Featured');<br> x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected').hover(function() {<br> x$(this).attr('title','Click To Un-Feature This');<br> });<br> x$('.linkbar.linkbar-iconic .button.button-iconic.feature-button:not(.linkbar.linkbar-iconic .button.button-iconic.feature-button.is-selected)').attr('title','Click to Feature This');<br> </script></p></div>Link Trick: Make Your Links "Feel" Like Buttons on Hoverhttps://creators.ning.com/forum/topics/link-trick-make-your-links-feel-like-buttons-on-hover2014-03-07T20:01:22.000Z2014-03-07T20:01:22.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>What I am going to show you is extremely simple and will create a consistant feel to your site by visitors. What we will achieve is a 1- pixel shift or "bump down" affect on all links. Links are inline elements, margin-top won't work. We don't want to use padding either, because that would change the size of the box itself which might leading to unwanted shifting of other elements around it as well, which is undesirable. The perfect fit is <em>position: relative</em>, which allows us to bump around elements from their original static positioning when visitors hover over a link.</p>
<p>For this example, I will show you how to how to apply this 1-pixel-shift effect to just TAB MENUS, LINKS INSIDE PARAGRAPHS and any <SPAN> Link.</p>
<h3>Here is a Close Up Capture of the 1 Pixel Shift Effect on Links:</h3>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557153?profile=original" width="668"></a></p>
<p> </p>
<h3>Example of Shift Effect on Tab Titles:</h3>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557215?profile=original" width="545"></a></p>
<h3>Example of Effect on Paragraph and Text Box Links:</h3>
<p><a target="_self" href="http://creators.ning.com/profile/ElSurveyor"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/557235?profile=original" width="750"></a></p>
<p> </p>
<p><span class="font-size-5"><strong>Simply add this to your Advanced CSS in Dashboard</strong></span></p>
<pre>
LI.tabContainerSection-tab:hover,p a:hover, span a:hover{<br>position: relative;<br>top: 1px;<br>}
</pre>
<p> </p>
<p>If you would rather make the link bump to left or right (or diagonally) instead of vertically, change the</p>
<pre>
top: 1px; to something like <code>top: 1px; left: 1px;</code><br><br>You may also like the link to change color on hover. In this case also add<br>something like this to the mix:<br><code>color: blue;</code>
</pre>
<p><br> <br> NOTE: And as Chris Coyier points out If you have any links on your site that are absolutely positioned, having the active state change to relative position will (probably) make them go flying away and render them unclickable. You can fix this on a case-by-case basis by making the active state of those links retain absolute positioning, and even make their top value one higher (or bottom value one lower) [<a rel="nofollow" href="http://css-tricks.com/one-pixel-shift-buttons/" target="_blank">reference</a>]</p></div>3.0 Tip: Make your HTML Mode and other buttons stand outhttps://creators.ning.com/forum/topics/3-0-tip-make-your-html-mode-and-other-buttons-stand-out2013-12-29T05:02:29.000Z2013-12-29T05:02:29.000ZFire-Techhttps://creators.ning.com/members/FireTech<div><p>Here's some little snippets to make active buttons and HTML Editor mode stand out more...was bugging me, so figured I'm not the only one. Add to your CSS.</p>
<p>Enjoy,</p>
<p>FT</p>
<p></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556817?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556817?profile=original" width="718" class="align-full"></a></p>
<p></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556836?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556836?profile=original" width="717" class="align-full"></a></p>
<p></p>
<p></p>
<p>/*_________Fire-Tech HTML & Buttons____________*/<br> a.mceButton.mceButtonEnabled.mce_code.mceButtonActive{border: 0px!important; background-image: none!important; margin: 0 0 -.6em -.2em!important;}<br> .mceButton.mceButtonEnabled.mce_code.mceButtonActive:before {content:"HTML Mode"; border: .15em groove #000; border-radius:.4em; padding:.18em; background:#ff0000; font-weight:bold!important; color: #ffff00; text-shadow: -.15em .15em .2em #000; margin-left: -.2em!important; margin-bottom: -.6em!important;}<br> a.mceButtonActive{border: .1em solid #000!important; background: #c0c0c0!important;}</p></div>Remove Social Share & Like Icons from Individual Pageshttps://creators.ning.com/forum/topics/remove-social-share-like-icons-from-individual-pages2012-08-14T00:48:37.000Z2012-08-14T00:48:37.000ZChloe Princehttps://creators.ning.com/members/ChloePrince<div><p>Do you have a Custom Page that you do not need or want the Social Share or LIKE buttons at the bottom?<br />
<br />
I know to most people here on NING Creators, this is an easy task to do.  But after digging, and digging through the NC help/tip archives, I found it difficult to find what I was looking for, so I am creating this page to help clarify it for the rest of us "newbs."</p>
<p> </p>
<p>To remove the Social Share and Like buttons, do the following:</p>
<p>1. From your Custom Page, click the "<span style="color: #808080;">Option</span>" button in the top right corner, and then select "edit"</p>
<p>2. Scroll to the bottom of the page and put a Check Mark in the option that says:<br />
<span style="color: #999999;">Meta:  Manage title and meta tags manually (advanced)</span></p>
<p>3. Insert the following code into the box that says "<span style="color: #999999;">Custom</span>"</p>
<p><span style="color: #3366ff;"><style></span><br />
<span style="color: #3366ff;">.post_to_twitter {display:none;}</span><br />
<span style="color: #3366ff;">.xg_sprite-share {display:none;}</span><br />
<span style="color: #3366ff;">.likebox {display:none;}</span><br />
<span style="color: #3366ff;">.google-plusone {display:none;}</span><br />
<span style="color: #3366ff;"></style></span></p>
<p>4. Click "Update page"</p>
<p><br />
This will remove ALL the current Social Share and LIKE icons from this specific page, but NOT any of your other pages.</p>
<p></p>
<p></p>
<p></p>
</div>How to Add Pinterest Button to Your Ninghttps://creators.ning.com/forum/topics/how-to-add-pinterest-button-to-your-ning2012-03-06T20:41:01.000Z2012-03-06T20:41:01.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><h1>First: What is pinterest?</h1>
<p><a rel="nofollow" href="http://pinterest.com/">Pinterest</a> is described on its website as a “virtual pinboard” – a place for you to “collect the things you love”. Other useful descriptions you’ll hear are “online vision boards” and “image bookmarking website”.</p>
<p><a rel="nofollow" href="http://pinterest.com/"><img class="size-full wp-image-2766" title="Pinterest" src="http://theblogstylist.com/wp-content/uploads/pinterest1.jpg" alt="Pinterest" width="540" height="255"></a></p>
<p></p>
<p></p>
<p><span class="font-size-5">How to Add Pinterest Button to Your Ning</span></p>
<p>Probably best to add it to the right column (which shows up on all pages)</p>
<p>Go to the <a rel="nofollow" href="http://pinterest.com/about/goodies/" target="_blank">Pinterest Goodies Page</a> and look for this:</p>
<p><a target="_blank" href="http://pinterest.com/about/goodies/"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/550566?profile=original" width="750"></a></p>
<p>Fill out the relevant fields as shown above and take the generated code and add it to a text box in your site.</p></div>