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

Luca Boscardelli left a comment on Creatori NING Italiani
"Buongiron. Qualcuno tra voi sviluppa app collegate alle API Ning?"
Jul 5
More…

Meanwhile, you can check our social media channels