Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
This is a simple little tip that will make your content stand out - - simple but quite elegant.
Instructions:
#1 - Add CSS to Advanced CSS via My Network/Settings/Appearance/Advanced
.textboxshadow {
box-shadow:
0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
0 10px 0 -5px #eee, /* The second layer */
0 10px 1px -4px rgba(0,0,0,0.15);
border:solid 1px #e6e6e6;
padding:20px;
}
#2- Edit a Text Box, Page, Blog, etc...
#3 - Click on HTML button.
#4 - Wrap your content with the DIV, like HTML below.
Example #1 HTML:
<div class="textboxshadow">Your content goes here. I'll add more content to show the effect.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.</div>
Example #1 Results:
Example #2 HTML:
Make sure you have followed steps #2 and #3. You only add CSS one time.
#4 - Wrap your content with the DIV, like HTML below. You can also add internal paragraph tags. Just make sure all content is wrapped with the DIV.
<div class="textboxshadow"><p>Your content goes here.</p><p>This time I will wrap content within paragraphs tags. Make sure your outer wrapper is a DIV. I'll add more to show the effect.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.</p></div>
Example #2 Results:
Your content goes here.
This time I will wrap content within paragraphs tags. Make sure your outer wrapper is a DIV. I'll add more content to show the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.
Couple of Tips for Novice Users:
Enjoy,
Jen
Tags:
Welcome to
JenSocial: Social Web Directory and Ning Tips
Posted by JenSocial on May 7, 2018 at 8:35pm 9 Comments 1 Favorite
Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments 1 Favorite
Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments 0 Favorites
Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments 1 Favorite
Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments 0 Favorites
Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)
Started by Ning.spruz.com in Ning 3.0 Feb 19. 0 Replies 0 Favorites
Started by Evelina in Ning 3.0 Aug 30, 2023. 0 Replies 0 Favorites
Started by Evelina in Ning 3.0 Aug 27, 2023. 0 Replies 0 Favorites
© 2024 Created by JenSocial. Powered by
© Copyright JenSocial.