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

so how many have noticed members and mobile visitors get confused and cant figure out how to access the menu the add or edit buttons etc

replace those confusing  + and pencil icons with ones that actualy say what they do

note

you can easily create your own icons  in any shape or size in photoshop upload to file manager

and simply replace the urls

screenshoys

(i didnt bother doing the feature icon since only admins ee it)

and now some simple code

.icon.icon-add {
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/11389127?profile=original");
background-position: center center !important;
background-size: auto auto;
height: 30px;
width: 40px;
}
.icon.icon-edit {
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/11389111?profile=original");
background-size: auto auto;
background-position: center!important;
height: 30px;
width: 40px;
}
.icon.icon-menu {
background-image: url(https://api.ning.com/files/Vej5VoDX8BW56PQ1jIW6zk-vyLrQllsQak4*ezPxgk3eXVsjgpqDQWJxyp6q5MnDvSZUIbNsE8hFkRheuzhKEEPgu85HnyV7/menu.png);
background-size: auto auto;
background-position: center!important;
height: 30px;
width: 40px;}

note :

this is for the icons themselves only not the button styling

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

  • of it was an embarrassingly simple tip

    almost didnt want to post it but figured its soooo useful..nearly essential that i thought most non coders would want it

    • Initially I wanted to use larger icons to such as this.  Think they would encourage much more interaction but couldn't get positioning right either.  Obviously I don't know what I'm doing.  ha!

      3231926?profile=RESIZE_180x1803231946?profile=RESIZE_180x1803231974?profile=RESIZE_180x180

      • use the postioning codes i used but adjust height/width to match the image sizes

        but also..you will have to use the classes from the features to apply dig=ferent ones to diferent pages (forums vs photos)

        if u want the more universal approach use the .icon-edit selectors to style all edit buttons at once

    • Oh, btw you forgot "      "  in your 3rd png example above.  Don't know if it matters but I added it when I saw them missing.

      • doesnt seem to matter

        firebug doesnt add it

        pasting into ning works fine without it

        but it was added on save to 2 of em not the 3rd maybe if i published a seciond time after adding it it would add it there too

        but it works fine with or without it seems

        • They should feature this discussion.  Everyone and their brother will want to re-design those plain grey icons.

          • i agree completely..i think it was essential to the sites usability

            i understand the reasoning behind the simple icons for mobile friendliness but  its just as easy to be just slightly larger  and descriptive so ppl know what the heck they are clicking on

            i had members say they literaly had to try every button to figure out what it did

  • I had made icons 30x30 and used the icon tag but the image came out wonky when I uploaded; I gave up and went to bed.  I'm still learning when it comes to {background} versus {background-image: URL} and all of that code talk.  *sigh*  Well at least I'm trying (and already had my icons ready).  If anyone wants to use them, feel free to click and save their URL.  Your code works like a charm.  Thank you once again.

    3218923?profile=original3218954?profile=original3218987?profile=original

    • yea u had to overide the position and size to get it to work right

      when i 1st tried all i saw was the d..and huge

      cause the old code uses an icon css sprite 1 image for all icons then reposition the image so the proper icons visible  this means fewer http requuests fike downloads etc cause 1 image is used fir all icons..

      technicaly u could create a new css sprite and do the same thing

      heres the images i used

      3229252?profile=original3229266?profile=original3229281?profile=original

      • I'm re-making mine now using http://dabuttonfactory.com/.  Nowhere near as trippy as yours.  The fit right in with your site design. #Cool.  Wish I had a "cool" site to play with.  *lol*  Maybe some day I'll come up with an idea........

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

Rosas † Negras replied to Bizz's discussion
Ning: Why does it not show who added music or a tab for My Music ? Essential For Moderation
"here is the reason I chose to upload only I"
12 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Resize your Social Channels Video
"awesome... thanks Bizz!"
13 hours ago
Bizz posted a discussion
Either I am totaly missing something but l can't seem to see anywhere that says who added a playlis…
13 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Oh not sure if you seen the Game Of Thrones theme but I will be adding a small series of these and…"
16 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Thanks, yes this is the first version of this and will be adding more to it so members can also cha…"
16 hours ago
J.Ayvar replied to Bizz's discussion
Tip: Profile Themes And Code
" Wow, I was pending this update and finally see it. Everything that can be done creatively in Ning…"
18 hours ago
Rosas † Negras replied to Bizz's discussion
Tip: Resize your Social Channels Video
"thank you very much my Master"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"I waited two days ... and today the answer I have to pay ... I told him that I would have a discuss…"
yesterday
Bizz posted a discussion
If you use the css section quite a bit like I do you may find the box a little limited in it's heig…
yesterday
Bizz posted a discussion
Ning have changed the layout for the social channels and so we have a small video in the middle of…
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Charles, no unfortunatly not it just a way to get the music page onto a page
 "
yesterday
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"The agent has got this wrong as that is what you pay for. Have you got it set that the option to re…"
yesterday
More…

Meanwhile, you can check our social media channels