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

Forum

These small bit sof code will give you a few little changes to your like icon and comments icon plus a small separator for when someone replies to a comment etc this is explained better in the images below.

Here is the after view from adding the code, the code reveals the word Like and Comment next to the icons. Also in the images which shows the items liked a small s has been added so it's says Likes instead of like. That last part could be done in the language editor if you wanted.

Here is the small portion of css for you to add to your custom css section. You can of course alter the colours as needed in the css.

/**** ACTIVITY FEED CODE ***/

/* This adds a little  > after the person name */
.activityFeed-comment .media-body a:first-of-type:after{ content:">"; display:inline-block; margin-left:3px;margin-right:4px }
.activityFeed-comment {font-size:0.85em }

/* Reveal The Word Comment before the count number */
.activityFeed .icon-comment{display:inline;vertical-align:bottom}
a.activityFeed-commentCount, a.activityFeed-commentFormDisplay {font-size: 0.9em; line-height: 1em; float:right; }
.icon-comment.icon:before{ float:right!important;margin-left:5px;margin-top:-5px }

/*Reveal The Like Word */
.activityFeed-counts .icon{ display:inline;vertical-align:0 }
.button-tiny.likeButton a{ padding:3px 6px;font-size:0.75em }
.button-tiny.likeButton a:hover, .button-tiny.likeButton a.is-selected {background-color:#00a6eb;border: 1px solid #a2bf1f;text-decoration: none;}
a.is-selected .icon-love:after{content:"s";display:inline;}

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

  • Grrrr the like button not working for me.  I'd fiddling in firebug.  Is that exactly how you have it installed on your site?

    • Yes it's exactly what I have as I took it straight out of my css to post here. What bit of the like button is not working for you Kos ? Have you used the Like, Favorite or Promote on your site as if you chose one of the others bar like it would need to change for those.

      • I was looking at a blog post and didn't see the change.  Took me a bit to realize it was Activity Feed only.  We're all good.

  • Ahhh ok.  You have to have your button set to "like"; otherwise "favorite" or whatever you've chosen appears.  And this is only applicable in the Activity Feed itself.  Not on the article.  Okay got it

    Thanks!

    • I will post the code for the Like button to change for the whole site not just for the activity. Will also add some more for those other 'like' options.

      Kos if you add this as well it will then make the word like show on all pages, use it with the other code as that will work for the colours etc as in the original code only the first line restricts the like to the activity feed.

      .button-tiny.likeButton a .icon {
          display: inline;
          width: auto;
          overflow: hidden;
          vertical-align: middle;}
      .likeButton-count{ vertical-align:middle;}

      John :-)

  • I am having one problem...in the code it specified-  text-decoration: none;}

    I have tried to remove the word none and put in the color code but nothing is changing. I have tried doing several things. Can you tell me what code I need to change the text to what I need? I have my color code ed7868. Thank you!

    • Hi Jennifer

      I have provided the code you need to add to be able to change the text colour below and you just need to change the colours for what you need.

      The Like and Comments colours all come from your design studio links colours so whatever you have set your links to is what reflects in the colours for these. Ning did not seperate them when 3.0 was first built so hopefully this might be something they might change so we can style these in the design studio rather than having to code it.

      With regards to the text-decoration that is not a colour setting for text. Text decoration is that little underline you get when you hover over a link so this just makes sure it does not show up when you hover over the like button.

      When looking at CSS for colour of text it normally looks something like this

      something { color: blue }    They key here is the word ' color ' . When writing it be sure to spell it as American as code is written this way. I am from the UK and am always making the mistake of writing in English and we spell it this way, Colour,  which will not work.

      Just thought that may help you when looking at CSS code posted on here on Creators.

      /** TEXT COLOR CHANGE FOR LIKE BUTTON **/

      .button-tiny.likeButton a{ color: blue }
      .button-tiny.likeButton a:hover, .button-tiny.likeButton a.is-selected { color: purple}

      /** END LIKE BUTTON TEXT CODE **/

      Just change the color blue and purple for what colour you want, you can write the colour as I have done or add your hex colour code.

      The first line is for the like button text colour ( the heart is included in this )

      The second line is for when you hover over a link and also when it has been liked.

      Hope that helps

      Let me know if you have any problems, as mentioned in my post I am from the UK so depending where you are there may be a little time delay in my repsonse.

      John :-)

      • Thank you John! It worked. So appreciated!

  • And thank you for the tip!

This reply was deleted.

Search the Creators Network

Latest Activity

Thisisbully replied to Thisisbully's discussion I'm losing members because of 1 silly feature
"Anything on this still have members that have no clue on how to post photos"
5 hours ago
Steve C replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"Is there advanced search in 2.0 besides member search? I've never seen it and could really use it."
12 hours ago
Manuel Adame Jimenez replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi, Kyryl, light works the way of your day, thank you, light.
☆♡☆"
14 hours ago
Kos replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Kyryl I have to say how wonderful it is to have liaison who understands CSS/HTML.  Just love it!"
15 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi there,
Just put this into your custom CSS code field to center the video.
.videoDetailPage-video…"
16 hours ago
Alex replied to Fabricio Giugni's discussion Powered by Ning How to get it out?
"Yes, Glam Media forced it upon us against Ning's original policy. Originally Ning communities had t…"
17 hours ago
Kos replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"They told me there's nothing wrong. *lol* Wrong!"
17 hours ago
doone replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"Thanks, it works great for me."
18 hours ago
Fabricio Giugni replied to Fabricio Giugni's discussion Powered by Ning How to get it out?
"    Be a White label is the best for creators. Force us to have they ads on our website is like ter…"
18 hours ago
Manuel Adame Jimenez replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hello Kyryl, I put a screen shot, to ask you to leave the video to the center or that is option to…"
19 hours ago
Alex replied to Kyryl_Ning_Support's discussion Paid Access demo version
"I find it completely astonishing that any other type of paid access could even be contemplated, whe…"
19 hours ago
Mike Collins replied to Fabricio Giugni's discussion Powered by Ning How to get it out?
"Hi Kyryl,
This was something that Glam Media brought in and it was a real sticking point for many c…"
20 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"Hi there!
Thanks to both of you for your suggestions to add the advanced search option.
As I see su…"
21 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"Hi Kos,
We are really sorry that it was necessary to wait for such a long time to see this feature…"
21 hours ago
Mike Collins replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"Search is bringing up items from blogs/ discussions in private groups - please can this be changed…"
21 hours ago
Giovanni Cappai replied to Giovanni Cappai's discussion HTML under header not working :/
"Hi Kyryl, thanks for your reply. On firefox it works, on chrome still doesn't."
22 hours ago
Philip Voice replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"I opened a private chat with one of my members yesterday. Nothing was typed in the chat by either o…"
23 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi there!
Thanks for your feedback it is highly appreciated.
I have updated already existing sugges…"
23 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"Hi there!
Thanks for useful suggestions! Some of them were completely new and some I have already p…"
23 hours ago
Philip Voice replied to Kyryl_Ning_Support's discussion The long-awaited Search Option is now at your fingertips!
"If anyone is interested if you want to do an off-grid search of your network (or any site) it's eas…"
23 hours ago
More…