Currently we are thoroughly watching over the situation in Ukraine and trying to support the brave and unstoppable spirit of Ukrainian nation in fight against Russian invasion by donating to the official resources provided by the Government. NING is standing with Ukraine in this fight for freedom and independence and if you want to show your support you can donate here.
Слава Україні! Героям Слава!

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

  • 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

Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Sunday
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
Jun 20
⚡JFarrow⌁ updated their profile photo
Jun 16
Kenny Craig updated their profile
Jun 8
Isabella Wilson updated their profile
Jun 5
Eva liked ⚡JFarrow⌁'s discussion What is going on with Ning? What Do We have to Look Forward To?
Jun 2
More…