Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Ning 3.0 Tip: Download Button

Hi all,

I've worked on several client projects recently where there was a need for members to easily access downloadable items (PDFS, Spreadsheets etc) in forum discussions.

This simple tip looks for the word 'download' in links within forum discussions and then styles the link accordingly - it simply makes the download option more obvious.

How it works:

When you add an attachment to a forum discussion (1 below) in Ning 3.0 you get this box:


Upload your file and then ensure that the Title contains the word 'Download', in the instance above it's 'Download the PDF' (2).

Press OK and save the forum discussion.

Now for the script:

Open Social Site Manager, then Custom Code, and place this in the End of Page Code section:

<script>
x$('.discussionDetailPage .card .content a:contains("Download"), .discussionDetailPage .entry-content.cf a:contains("Download")').addClass('SP_Download');
</script>

Press save.

Now for the CSS:

Open the Design Studio and Custom CSS, then add this:

/*Download Button*/
.SP_Download{
color:#1d1d1d;
font-size:16px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
padding:10px 15px 10px 40px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F8F7F7), color-stop(1, #ECEBEB));
background:-moz-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
background:-webkit-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
background:-o-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
background:-ms-linear-gradient(top, #F8F7F7 5%, #ECEBEB 100%);
background:linear-gradient(to bottom, #F8F7F7 5%, #ECEBEB 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F7F7', endColorstr='#ECEBEB',GradientType=0);
background-color:#F8F7F7;
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/11391124?profile=original");
background-repeat:no-repeat;
background-position:7px 5px;
border:solid 1px #c9c9c9;
}

This styling can of course be simplified and amended to taste.

Here is the result:

This tip has been tested using a Design Studio V1 theme and a Design Studio V2 theme.

It won't be for everyone but is a good option for people with a forum where only admins add content and can control the links in the discussions.

Enjoy

SP

I have more tips on my profile page or my site

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Cool tip, SP! Thanks for sharing it.

    Just wondering, what happens if you have 2 separate files to be downloaded with "download" in their title?

    • NC for Hire

      Hi Aaron

      This:

      3229993?profile=originalI should point out that the tip is case sensitive so Download with a 'D'.

      SP

  • Excellent!

  • Very nice. Have to play with this one. Thanks for sharing brother.

  • Thanks for sharing!! I'm sure this is an ignorant question, but how would you adjust this to apply to blogs instead?

    • NC for Hire
      Hey Cassie, I'm away at present but remind me in a week or so and I'll post.
      Sp
      • Thanks! Really appreciate it!!

  • Super, thank you

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"It has to do with using a URL for your social network that is not the same as the URL of your netwo…"
10 hours ago
Anam replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"I honestly do not know what this post means."
11 hours ago
Rosas † Negras updated their profile
20 hours ago
⚡JFarrow⌁ replied to Jan Homan's discussion
Creating videoheader?
"I have a few things i can do or you can do... here are a couple of examples
Example 1
Example 2
Exa…"
yesterday
Jan Homan replied to Jan Homan's discussion
Creating videoheader?
"Yes, I want to use a youtube video!"
Friday
Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"thank you very much you have been very kind"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"it goes in your Custom Code section of the backend in the bottom box... hope this helps"
Friday
⚡JFarrow⌁ replied to Jan Homan's discussion
Creating videoheader?
"Welcome... yes!   Are you going to be using your own mp4 or a youtube video?"
Friday
Jan Homan posted a discussion
Hello everybody, One question. Can I create a videoheader within Ning 3.0?Can someone help me with…
Friday
Jan Homan updated their profile
Friday
⚡JFarrow⌁ commented on ⚡JFarrow⌁'s blog post 110+ Useful Ning Tips and Tricks for 2.0 and 3.0
"Agreed Jamie... did you set your 3.0 up yet?"
Friday
Paul B Thomas commented on Paul B Thomas's blog post Creativity is Our responsibility
"Thank You J Farrow"
Friday
More…

Meanwhile, you can check our social media channels