Did you know you can add a small image to the left of your Page Header Titles, across your entire Ning Network?

Below is a partial screen shot, showing you an example. See the JenSocial Logo image to the left of "Featured Groups (44)"? With the CSS offered in this Tutorial, you can add an image to the left of all page titles. Keep in mind, this can be too much. It adds the same image to left of all page header titles. Be sure to choose a small and subtle image. Typically the best sizes are 26 by 26 pixels, and not larger than 32 by 32 pixels. You can upload your image via a Blog on your Ning Network. Use that image path for the CSS code below.

EXAMPLE OF SMALL IMAGE TO LEFT OF PAGE HEADER TITLES:

INSTRUCTIONS: ADD IMAGE TO LEFT OF PAGE HEADER TITLES:

1. Upload your selected image via a blog, or know the path where your image is hosted.
2. For best results, make sure your image is no larger than 32 pixels by 32 pixels.
   
3. Copy/paste the image URL/path to the CSS line below. Replace "yourfull_image_path_goes_here", with your image path.
4. Adjust the line-height code to suit your image size.
5. Adjust your padding on the left to suit your image size.
6. Copy/paste the CSS to Advanced CSS via Manage/Appearance/Advanced CSS.
7. Save.
8. Be sure to check pages with long titles, whether a Group name, Discussion Title, etc...
   

CSS CODE YOU WILL NEED:

/* Add small image to left of your xg_headline Page Header */
.xg_headline .tb h1 {line-height:38px !important; padding-left:45px!important;}
.xg_headline .tb h1 {background:url(yourfull_image_path_goes_here);
background-repeat: no-repeat;
background-position:left center;}
/* End Add small image to left of xg_headline Page Header */

---

EXACT CSS CODE FOR SCREEN SHOT EXAMPLE DISPLAYED, ABOVE:

Notice: I use the parameters for width, height and crop at end of image path, to resize my image to 32 pixels by 32 pixels. If you go much larger, you will experience issues when Discussions are created that have long titles.

Tip: For the example, I used my profile page photo (also serves as my Network Logo). I went to my profile page and captured the image link for my profile photo path. Then, I added the width, height, and crop parameters. This way, I didn't have to upload another image.


PLEASE DO NOT USE THE IMAGE PATH IN CSS BELOW. THIS IS AN EXAMPLE, SO YOU CAN SEE THE ACTUAL CODE THAT PRODUCED THE SCREEN SHOT AT TOP OF THIS TUTORIAL.

.xg_headline .tb h1 {line-height:38px !important; padding-left:45px!important;}
.xg_headline .tb h1 {background:url(http://api.ning.com/files/rcNr312rU3mdZYTz3BVd5YySndiyqfsiHKob5GI4J*meRLBtd5TBowBQdH5FVD6WDpKXPaBBEnMcgF*YdkHQAGfqbZXHch-P/jen_cartoon_badge200b.png?width=32&height=32&crop=1:1);
background-repeat: no-repeat;
background-position:left center;}

---

Enjoy!
Jen