Notes Module & Better Organized List of Notes

For Ning Network Creators Using the "Notes" Module:

I just had a Client and friend of mine, ask about the Notes Module, and how to make the list look better organized? I've never really looked at this closely. We're referring to the page that contains all the headers and links, to your Notes. Wow, is it hard to read!

Here's the link to all notes:
http://yourning.ning.com/notes/index/allNotes


Below, you will see 3 lines of code (in red) that will make your "Notes List" look much more organized.

The next line of code makes the Notes Title (header) larger. The catch is: it will make all headers that are set to the HTML Large Header (H3) larger - - but only within notes.
.xg_widget_notes .notes_list h3 {font-size:2em;}

* Change the 2em (which means twice as large as your H3 default), to suit your needs. You can use the pixel size format, too: 16px.


The next line of code adds a line below each Note. If anyone notices any different, please let me know.
.xg_widget_notes p.small {border-bottom:1px dashed #333333!important; padding-bottom:15px;}

* Change the border color: #333333, to suit your needs. You can also change "dashed" to "solid", "dotted", or "double". The padding parameter sets the spacing, before the divider line.


The next line of code sets the Title Header background style.
.xg_widget_notes .notes_list h3 {background-color:threedface;}
* You could add this style to your first line of code (same class). I have separated it, to make this easier to understand.

After you edit the lines of code, add to your Advanced CSS code:
Manage/Appearance/Advanced CSS
Click Save.



Tags: make notes look better, notes, notes easier to read, notes layout, organize notes

Views: 43

Replies to This Discussion

Permalink Reply by Administrator JenSocial on February 22, 2010 at 7:22pm
Here's the link to all notes:
http://yourning.ning.com/notes/index/allNotes

NewNetwork is still being set up!

Under ConstructionSorry! However, it's easy to start your own Ning Network.
Create a Ning Network!

I'll check back later Thanks Jen
Permalink Reply by JenSocial on February 22, 2010 at 7:43pm
Hi Deborah,
That's just the example link for the notes on your site, if you're wanting to use this tweak. I wanted to show where these changes would happen - - if that makes sense. You would replace the word "yourning" with the name of your Network.
Best to you,
Jen
Permalink Reply by Administrator JenSocial on February 22, 2010 at 9:16pm
Thanks Jen

I'll note it for later
Permalink Reply by Temple of Our Lady of the Moon on February 23, 2010 at 7:32am
Yea I definitly like this! I also installed the ND tool bar to my puter....hehee I like that...its a nifty little tool bar!
Permalink Reply by JenSocial on February 23, 2010 at 12:22pm
Hi Our Lady of the Moon,
Cool! Happy to hear that.
:-)
Permalink Reply by Lex Smith on March 10, 2010 at 7:11pm
How can I make a subtab for adding notes?

I did make a subtab using a category for my notes ie Archives. Worked very nicely.
Permalink Reply by JenSocial on March 10, 2010 at 7:30pm
I couldn't get a link to work for adding notes. It appears to be in an odd link, and possibly an array.

Let me know if you find out differently.

Wish I could have helped,
Jen
Permalink Reply by Lex Smith on March 12, 2010 at 3:38am
I figured it out,

its http://www.yoursite.com /notes/add

http://www.yoursite.ning.com/notes/add

I titled the tab "Add note" and made the tab visible to administrators. It works for now.

Then I also searched through notes to do a short category list. I did a search in my notes. For example searched for "archives. and added a subtab.

notes/index/search?q=archives
Permalink Reply by JenSocial on March 12, 2010 at 8:39am
DOH on my part, LOL. Good for you, and great job!

Thanks for sharing.

;-)
Permalink Reply by Fantagiro43 on September 8, 2010 at 11:07am
Jen this is great and very helpfull ;)
My notes: here.

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips