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

FORUM

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

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:

      1064547093.pngI 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.

Announcements

 

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

Anna_Ning_Support replied to J.Ayvar's discussion
We need this in Ning 3.
"Hello,
We have the default welcome email that includes the name of the member and the features he o…"
3 hours ago
Naveen Jain updated their profile
yesterday
Linda Hertz liked Anastasia_Ning_Support's discussion Join our new webinar on August 22nd!
yesterday
Stuart Alexander replied to Anastasia_Ning_Support's discussion
Migration FAQ
"Like Adrian, I am not finding the amount of storage I am using. It does not show up as in the examp…"
yesterday
This Is bully replied to Lauren's discussion
Looking to Monetize and Improve Engagement
" LOL It happened to a very active member of mines every post they made sent it to spam so I created…"
yesterday
Lauren posted a discussion
Hello,Please take a look at our page www.booktown.ning.com, we're looking for ways of increasing me…
yesterday
Fred St Laurent replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"I would like to see this list as well please."
yesterday
PAT Diabetes liked marie's discussion Help please with forums and groups
yesterday
PAT Diabetes updated their profile
yesterday
ICM Redactie, COIFFURANCE, Gwendolyn LaFae and 7 more joined Ning Creators Social Network
yesterday
Ambroise liked J.Ayvar's discussion We need this in Ning 3.
yesterday
Ambroise replied to Anastasia_Ning_Support's discussion
Step-by-step migration guide
"Is there somewhere a list of these features that are not supported on 3.0?"
yesterday
More…

Meanwhile, you can check our social media channels