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)
.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
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!
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.
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
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........