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

Ana Massien liked Ana Massien's discussion Other possible future modules?
2 hours ago
Ana Massien posted discussions
2 hours ago
kostasgr replied to kostasgr's discussion
problem SSL .....
"OK !! thank..... Anastasia !!"
9 hours ago
Ana Massien posted a discussion
Any ETA on when ning may get @mentions #hashtags support or embedded emoji at the comment or newsfe…
20 hours ago
Ana Massien replied to Anastasia_Ning_Support's discussion
NING is now available on Zapier
"It's done in the area where you name the "Key". Name the key, and a secret and the network consumer…"
21 hours ago
Anastasia_Ning_Support is now friends with kostasgr and Ana Massien
21 hours ago
Anastasia_Ning_Support replied to Katja Nys's discussion
Paid Access and Paid Memberships - Pricing and VAT
"Hello Katja!
There is a fixed 5% fee for each transaction you process via E-com, and also transacti…"
21 hours ago
Ana Massien updated their profile
21 hours ago
Anastasia_Ning_Support replied to kostasgr's discussion
problem SSL .....
"You are welcome! 
Sorry once again for the temporary issues. "
22 hours ago
Shane Avupre, George Kosch, thomas b and 3 more joined Ning Creators Social Network
22 hours ago
This Is bully replied to Katja Nys's discussion
Paid Access and Paid Memberships - Pricing and VAT
"There is a ning fee plus a stripe fee all together you will be paying 8 to 10% fee on the total amo…"
yesterday
This Is bully and kostasgr are now friends
yesterday
More…

Meanwhile, you can check our social media channels