images - FORUM - Ning Creators Social Network2024-03-28T21:29:21Zhttps://creators.ning.com/forum/topics/feed/tag/imagesTIP: TURN OFF REQUIRED EVENT IMAGE AND USE THE DEFAULT ONEhttps://creators.ning.com/forum/topics/tip-turn-off-required-event-image-and-use-the-default-one2021-01-10T23:13:43.000Z2021-01-10T23:13:43.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>Been meaning to get around to this as it has been requested. What this does is turn of the required event image when creating one and so leave the default one provided. In part two I will show how to add your own default one in another tip.</p><p>You can see how the default image looks in the images below. or you can visit my site here to see a live preview <a href="https://jr-images.ning.com/events" target="_blank">https://jr-images.ning.com/events</a></p><p>So first off all you will need to edit the code if you have called your events page something else, if you left it as events then you just need to add the code as it is.</p><p>So if you named your events page to something else then you need to add your page name by replacing the part in bold, so if you called it something like our events then you would enter this</p><p>.page-our-events</p><p>Notice the hyphen's to replace the spaces</p><p>So here is the part you need to change in the code block</p><p>x$(' <strong>.page-events</strong> .entryEditPage #entry-form ')</p><p><strong>So here is the code you need to add and you add this to your Social Site Manager > Custom Code > end of page section ( do not include this line with the code )</strong></p><p> </p><p><script><br />// Remove Image require in events, change to default image<br />x$(document).ready(function(){<br />x$('.page-events .entryEditPage #entry-form').attr('data-image-required','false');<br />});<br /></script></p><p> </p><p>And here are some demo images of how it would look with the default image</p><p>ACTIVITY FEED</p><p><a href="{{#staticFileLink}}8409899081,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8409899081,RESIZE_710x{{/staticFileLink}}" width="710" alt="8409899081?profile=RESIZE_710x" /></a>AND THE EVENT ITSELF</p><p><a href="{{#staticFileLink}}8409899653,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8409899653,RESIZE_710x{{/staticFileLink}}" width="710" alt="8409899653?profile=RESIZE_710x" /></a></p></div>Stop Hotlinking Imageshttps://creators.ning.com/forum/topics/stop-hotlinking-images2020-04-19T15:47:38.000Z2020-04-19T15:47:38.000ZDebbiehttps://creators.ning.com/members/debzcorner<div><p><span style="font-size:12pt;">I am not sure if anyone on this network has posted information on how to stop images from hotlinking. If a code is available to use on Ning networks, please let me know. Thanks.</span></p></div>Tip: Remove crop of group cover photo and set a bigger height while making them responsivehttps://creators.ning.com/forum/topics/tip-remove-crop-of-group-cover-photo-and-set-a-bigger-height-whil2020-04-05T20:19:08.000Z2020-04-05T20:19:08.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>As you may or may not be aware the cover photos for the groups headers are cropped to a height of 160px so here is a bit of code to remove the crop so you can have a bigger sized picture, also some css which helps make them responsive.</p><p><strong>First we add some code to our Social Site Builder > Custom Code > End Of Page to remove the crop</strong></p><p><script><br />// Remove group header crop<br />x$(document).ready(function() {<br />x$('.groupHeader.groupHeader-coverPhoto').each(function() {<br /> var removegroupHeaderCrop = x$(this).css('background-image');<br /> x$(this).css('background-image', removegroupHeaderCrop.replace(/\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));<br />});<br />});<br /></script></p><p><strong>Next we add some css to our design studio custom css, the Padding Bottom of 25% is what controls the height so you can adjust that to smaller or bigger depending on how big you want them</strong></p><p>.groupHeader-coverPhoto {<br /> padding-bottom: 25%!important;<br /> height: 0!important;<br />position:relative<br /> }</p><p><strong>Extra tip</strong></p><p>If you only want to change a particular group you can do so just by adding the page name at the start, so for instance my groups are called Groups and the page I want to change is Demo so the could would look like this and the part in bold is the part added</p><p><strong>.page-groups-demo</strong> .groupHeader-coverPhoto {<br /> padding-bottom: 25%!important;<br /> height: 0!important;<br />position:relative<br /> }</p><p> </p><p>Hope you find it useful</p><p>Bizz :-)</p></div>Ning Failures Continue to Mount uphttps://creators.ning.com/forum/topics/ning-failures-continue-to-mount-up2018-12-17T10:28:51.000Z2018-12-17T10:28:51.000ZHughhttps://creators.ning.com/members/Hugh<div><p>I added another item to the top of my stack of issues awaiting a fix this week.</p><p>Worst of all, it's now not possible to upload images to the Photos ara of the website. I get the following message:</p><p><a href="https://storage.ning.com/topology/rest/1.0/file/get/397671853?profile=RESIZE_930x" target="_blank" rel="noopener"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/397671853?profile=RESIZE_710x" width="710"/></a></p><p> </p><p>I double-checked that it wasn't an issue with the particular image by unsuccessfully attempting to upload an image that i'd successfully added as an inline attachment to a forum post just half an hour presviously. I got the same message as above.</p><p>Additionally, I've started noticing images sometimes get rotated when added inline to forum posts. After being fobbed off twice with the excuse that it's just the internet and the issue is wider than just Ning, I worked out that if an image dimension is wider that the width of the text space (in the case th 750px of my forum posts), it may someties rotate. It can be fixedf by reducing the image size.</p><p>This didn't seem to happen prior to Ning changing their storage server tihs year. Personally, I can live with it. But I don't expect my members to have to. It's just another disincentive for members to engage. </p><p>The ingteraction with Support wasn't smooth. After eight mesaages with then on the first issue, the outcome was the now standard, "<em>We have escalated the issue to the tech team for further investigations.</em>". For the secons issue, after also eight messages, I got a variant probably more honestly promised only to <strong>try</strong> and avhieve a fix, "<em>We will try to investigate the case for you and you will be notified as soon as we have an answer</em>."</p><p>At one pont, I'd have felt reassured that the issues would now be fixed. However, as evidenced by the number of issues still waiting for a fix following simillar reassurances,, I now only see these messages as a sign that more dust will be gatherig on yet more problem reports. </p><p>The image below shows on this site if you enter an incorect url. Recent experience leaves me tempted to conclude that this is a picture of the support team sharing the latest crop of problem reports:</p><p> </p><p><a href="https://storage.ning.com/topology/rest/1.0/file/get/397819456?profile=original" target="_blank" rel="noopener"><img class="align-center" src="https://storage.ning.com/topology/rest/1.0/file/get/397819456?profile=RESIZE_710x" width="710"/></a><a href="https://storage.ning.com/topology/rest/1.0/file/get/397814699?profile=RESIZE_180x180" target="_blank" rel="noopener"><br/></a></p></div>User Images Missinghttps://creators.ning.com/forum/topics/user-images-missing2017-10-23T08:16:43.000Z2017-10-23T08:16:43.000ZLuis Fraguadahttps://creators.ning.com/members/LuisFraguada<div><p>Hello. We have an older Ning instance on <a href="http://www.grasshopper3d.com/" target="_blank">grasshopper3d.com</a>. One of our admins banned a user for spam, and after some discussion with the user to correct the behavior, we reinstated the user's status. After this, some of the user's images are missing. For example, here is a link to a missing image: <a href="http://api.ning.com/files/t5Y0oOviE8I3XardZNu5nb6ZyQaFb-7ukZSoT7y3qzRv5fOxHNJ6eQr72jH8DVJFAdmuLDKWfbSm">http://api.ning.com/files/t5Y0oOviE8I3XardZNu5nb6ZyQaFb-7ukZSoT7y3qzRv5fOxHNJ6eQr72jH8DVJFAdmuLDKWfbSm</a>*4BpmmRzewEe6go201CF/IMG_0864.JPG</p>
<p>It gives a 404 error not found:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/559191?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/559191?profile=RESIZE_1024x1024" class="align-full" width="750"></a>The strange thing is that not all of the images have gone, and the ones that do go missing do so gradually. Just last night, more images went missing. On this user's gallery, there are entries for the images, including the title, image description, general metadata, just the actual image file cannot be found.</p>
<p>How can we track down the source of this issue? Are the images gone? Why would they be progressively erased? This has not happened with any other user, and it is very rare that we reinstate a banned user, thus, it is the only time we see such activity.</p></div>Re-size Avatars In Messages Table And Messages Detailhttps://creators.ning.com/forum/topics/re-size-avatars-in-messages-table-and-messages-detail2017-03-18T23:49:26.000Z2017-03-18T23:49:26.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>This was asked by J.Ayvar if it was possible to adjust the sizes of the avatars in the messages as they are quite small so here is how to do that.</p>
<p>This will adjust the avatars in the messages table and also in the message detail page. I have set mine to 80px and have tried bigger but 80px seems to be the max for it to look ok. Of course you can go bigger or smaller which is up to you, you just change the 80px values for what you want.</p>
<p>Also you may notice in the code I have removed and border radius for the message table avatars as the increase of size can make these look a little odd, it's been left for the message detail page as that looks ok. ( By the way the border radius is what makes them round if you set that in the effects section of the design studio )</p>
<p>I have tried it on mobile and looks great on that too.</p>
<p><strong>How to set your own sizes for the avatars:</strong> To set your own sizes look for the parts which state 80px and this is the values you change, so if you want it to be 60px then replace each instance of 80px for 60px, that's all you need to change.</p>
<p><strong>Badge label text:</strong> If you use badges on your avatars and use the text option you can adjust the size of the text by adjusting the font-size in the avatar badge section of the code. Just replace the font size you want to use.</p>
<p>Ok so let's add the code</p>
<p><span style="color: #000000;"><strong>First we need to add some custom code which goes in your Site&Pages Custom Code End Of Page Section</strong></span></p>
<p><script><br> //Remove Crop Of Profile Avatar<br> x$(document).ready(function() {<br> x$('.messages-avatar img, .messageDetailPage img').each(function() {<br> var messagesImageSize = x$(this).attr('src');<br> x$(this).attr('src', messagesImageSize.replace(/\?width=\d+\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));<br> });<br> });<br> </script></p>
<p><span style="color: #000000;"><strong>Next we need to add some CSS and this goes in your Design Studio Custom CSS Code Section</strong></span></p>
<p>/** Increase Messages Avatar Size to 80px in messages table and detail page **/<br> /*Sets the size of the avatars. Would not recommend going over 80px though */<br> .messageTable .messages-avatar, .messageDetailPage .avatar-48 { width:80px; height:100%; max-height:80px }<br> <br> /*Sets the width and also removes any border radius as it can mess up the look of the messages table */<br> .messageTable .avatar-32{ width:100%; border-radius:0px; }<br> <br> /*Avatar badge text font size if you use them, adjust font size to fit your site */<br> .messageTable .avatar-badgeText-32{ font-size:12px }<br> <br> /* This re-adjusts the padding for mobile size */<br> @media only screen and (min-width:771px){<br> .messageTable .messages-item .messages-info { padding-left: 80px; }<br> }</p>
<p></p>
<p>That's it all done, here are two images showing the bigger avatars</p>
<p>Message Table</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558756?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558756?profile=original" class="align-full" width="540"></a>And the Message Detail Page</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558772?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558772?profile=original" class="align-full" width="282"></a></p></div>3.0 Trick: Add Custom Icons Colors and CSS To Change Themhttps://creators.ning.com/forum/topics/3-0-trick-add-custom-icons-colors-and-css-to-change-them2014-01-27T00:49:50.000Z2014-01-27T00:49:50.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>A client asked me recently if the icon colors could be changed. Of course I knew there had to be a way to change or customize the icons that Ning serves us. So, this is the quick and dirty way to change the color of the icons. I added a single pixel stroke and a faint drop shadow to the icons to make them stand out. The original sprite image can be found <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557201?profile=original">sprite.png</a>.</p>
<p><strong><span class="font-size-5"> How to Over-ride the default icons on your Ning 3.0 network</span></strong></p>
<p>First Choose a Premade Sprite Image (right click and copy image URL or download and reupload to your own network through a text box)</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556944?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/556944?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556978?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/556978?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557022?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557022?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557066?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557066?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557118?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557118?profile=RESIZE_180x180" width="140"></a><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557159?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557159?profile=RESIZE_180x180" width="140"></a></p>
<p> </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p> *If you need another color, let me know the HEX# in the comments below and I'll make it and upload it for you.</p>
<hr>
<p>Second, now add the following CSS to your Advanced CSS box in Design studio and replace the red url with the sprite image you chose above. <em>Note:</em> If you'd like to use white icons with a single black 1px stroke, just copy and paste the following into your CSS as is.</p>
<p><span class="font-size-1">.icon {</span><br> <span class="font-size-1">background-image: url('<span style="color: #ff0000;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/557248?profile=original">http://storage.ning.com/topology/rest/1.0/file/get/557248?profile=original</a></span>')!important;</span><br> <span class="font-size-1">}</span></p>
<p> Now you are done! Enjoy your custom icons!</p>
<p>If you are interested in more tricks like this, take a look at the archive <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">on my profile</a>. If you need help with your network, drop me a line! Happy to help..</p></div>Use CSS to Make Sure Images Center Inside a DIVhttps://creators.ning.com/forum/topics/use-css-to-make-sure-images-center-inside-a-div2012-06-02T01:33:27.000Z2012-06-02T01:33:27.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Here is the code I use to keep an image always centered inside its containing div, regardless of browser width or resizing:</p>
<p></p>
<p><img src="yourimage.jpg" style="width:100%;margin:0 auto;"></p>
<p></p>
<p>enjoy!</p>
</div>Changing backgrounds, pictures, css or files on a flyhttps://creators.ning.com/forum/topics/changing-backgrounds-pictures-css-or-files-on-a-fly2012-03-10T01:55:38.000Z2012-03-10T01:55:38.000ZBadboyralphyhttps://creators.ning.com/members/Badboyralphy<div><p>Changing backgrounds, pictures, CSS or files on a fly</p>
<p>A couple of years ago I started  a project on Minds-eye.ning.com  that rotated backgrounds.  At first I thought it was great but then I noticed that the hits from switching created a massive delay actually Jen’s  from Jen Social pointed it out. I was quite puzzled how to overcome this time delay.  From my experience as a programmer (none Internet) I knew I could change the address of something by giving it a common address but I wasn’t sure how to do it.</p>
<p>A few weeks ago I was experimenting using my webhost “fatcow” and found I could use a common address and overwrite a file (using a common file)  Then I took it a step further and created a php file that listed all my backgrounds then used an if than statement to determine which background should be displayed.  Finally, I had to figure out how I was going to execute the php on a fly and then it all came together.</p>
<p>You can see this by on <a href="http://Minds-eye.ning.com" target="_blank">http://Minds-eye.ning.com</a> in the morning and afternoon, which is when I call the php to change the background.</p>
<p>To make the backgrounds or files change you need to do the following steps.</p>
<ul>
<li>Make sure the background or file works to begin with.</li>
<li>Pick a common name for the master file</li>
<li>Go to Jen Social and grab these files <a rel="nofollow" href="http://jensocial.com/group/socialnetworktips/forum/topics/scheduling-background-changes">http://jensocial.com/group/socialnetworktips/forum/topics/scheduling-background-changes</a></li>
<li>Look how it is laid out and edit it to  meet your needs, If you have problems or don’t understand it email me at <a rel="nofollow" href="mailto:Ralph_us@hotmail.com">Ralph_us@hotmail.com</a> I will help you</li>
<li>Have some way of running the php file.  If you webhost doesn’t have an auto execute then the next best thing is using <a rel="nofollow" href="http://www.setcronjob.com/">http://www.setcronjob.com/</a> which is a free service to schedule a job.</li>
<li>Then add the master common to your CSS so it can switch on a fly and Ning would never know the difference.</li>
</ul>
<p>Sometimes when you change the background you need to change the xg_body or Nav bar or sign in image this is all done in the same timed program. You just need to test for what background will be used and use a ref to select it and add it to the program.</p>
<p>I get a lot of my code from Jen Social, and if you haven’t joined, it would benefit you to.  Her code is well tested.  So, I have been working on a new CSS layout and grabbed some of her stuff and realized if I do backgrounds on a fly I can change a lot of stuff at once.  Little more advanced lol.</p>
<p>If you decide to use the code, you might want to donate a few dollars to <a href="http://Minds-eye.ning.com" target="_blank">Minds-eye.ning.com</a> and definitely join our site to see talented artist at work. If not it’s okay, since Jen shares with me I will share with you.</p>
<p> </p>
<p>Ralphy</p>
</div>Styling Groups with New Design Studio with CSS and a Swift Hackhttps://creators.ning.com/forum/topics/styling-groups-with-new-design2011-03-28T19:21:06.000Z2011-03-28T19:21:06.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I really <em>should</em> keep this a secret, but this just may be interesting enough to piledrive me right into the <a href="http://creators.ning.com/forum/topics/introducing-ning-superstars-a?commentId=4244211%3AComment%3A505659&xg_source=msg_com_forum">Superstar</a> category, so I'll share it (<em>hint hint</em>)...I am going to show you <strong>how to add a new background to groups when using the new design studio</strong>. I see a couple of NCs <a href="http://creators.ning.com/forum/topics/adding-backgrounds-to-groups?page=1&commentId=4244211%3AComment%3A182203&x=1#4244211Comment182203">are frustrated</a> trying to find this answer and <a href="http://creators.ning.com/xn/detail/4244211:Comment:182184">even Eric says its not possible</a>, but here is the proof of concept that <strong><span style="text-decoration:underline;">yes you can change the background of a group using CSS</span></strong>. Its a hack, so as with all hacks, use it at your own risk..</p><p>(btw..i know superstars is not a contest, but it inspired me to share nonetheless)</p><p><strong><span class="font-size-5">For Those NCs Who Previously Changed Groups Backgrounds</span></strong></p><p>First, for those of you out there who had successully managed to change backgrounds of groups using the old editor, you remember that by adding a style sheet linked through the Groups description text module, you could change the background. The CSS of that stylesheet looked something like this:</p><p><a href="http://storage.ning.com/topology/rest/1.0/file/get/545922?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/545922?profile=RESIZE_1024x1024" alt="545922?profile=RESIZE_1024x1024" width="750" /></a>and gave you something nifty like this:</p><p><a href="http://storage.ning.com/topology/rest/1.0/file/get/545970?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/545970?profile=RESIZE_480x480" alt="545970?profile=RESIZE_480x480" width="450" /></a></p><p> </p><p><strong>NOTE:</strong> If you previously added backgrounds to groups then thought they were lost when you converted to new Ning Design Studio, <strong><em>you were mistaken</em></strong>. Simply go back to a group that you previously styles and click edit on the text module, look at HTML editor view and you'll see your stylesheet is still there. Open it up in a new tab and simply replace the first "body" selector with the following:</p><blockquote><p>.xg_theme #xg_body</p></blockquote><p>Re-upload that stylesheet to the textbox and replace the exisiting style url with the new one and call it good.</p><p>This will not change the external canvas image as before. The old way just weighed pages down too much, i feel. Instead,What it will do is replace the internal canvas image so that the background images behind the modules changes like <a href="http://landsurveyorsunited.com/group/aerialphotogrammetry" target="_blank">so</a>:</p><p><a href="http://landsurveyorsunited.com/group/aerialphotogrammetry" target="_blank"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/546034?profile=original" alt="546034?profile=original" width="748" /></a></p><p><strong><span class="font-size-5">For Those Who Have Never Changed Backgrounds for Groups</span></strong></p><p>The idea here is to inject a CSS style sheet into the group page which will over-ride all styles declared for that page. How do we do this? Create a style sheet using Notepad similar to the one I have attached below and replace the loooong image file URL with your own image file that you uploaded through any text box, save the file as GROUPNAME.css </p><p><a href="http://storage.ning.com/topology/rest/1.0/file/get/546072?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/546072?profile=RESIZE_1024x1024" alt="546072?profile=RESIZE_1024x1024" width="750" /></a></p><p>Now go to the group which you hope to change the background of and switch to HTML editor view, then using the file upload function (paperclip), upload that css file you just made, copy the looooong URL of the file and [HERE's A TRICK= press CANCEL] NOW...paste that URL into the text box in HTML view. Finally, you add the following code to the front and back (surrounding) that URL.</p><blockquote><p><link rel="stylesheet" type="text/css" href="http://api.ning.com/files/YOURLOOOOOOOOOOOOOONGURL/YOURSTYLESHEET.css" /></p></blockquote><p> </p><p>It will look similar to this when you're done adding the linked stylesheet within the text module of a group:</p><p><a href="http://storage.ning.com/topology/rest/1.0/file/get/546124?profile=original"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/546124?profile=original" alt="546124?profile=original" width="750" /></a>See an example finished group with styled background here on my <a href="http://landsurveyorsunited.com/group/aerialphotogrammetry" target="_blank">land surveyors support network- Aerial Photogrammetry Group</a>.</p><p><a href="http://landsurveyorsunited.com/group/aerialphotogrammetry" target="_blank"><img class="align-center" src="http://storage.ning.com/topology/rest/1.0/file/get/546183?profile=original" alt="546183?profile=original" width="750" /></a></p><p><span style="text-decoration:underline;"><strong>BONUS TIP: </strong></span> If you want to additionally style the title of the group, simply add another CSS selector to the style sheet for the h1 property link so, changing it according to your design, of course:</p><p style="text-align:left;">h1 {text-align: left;<br /> margin-bottom:30px<br /> font-family: Helvetica,arial,serif;<br /> font-size: 35px; text-transform: none;font-weight:bold;<br /> color: #FFFFFF;<br /> }</p><p style="text-align:left;"> </p><p style="text-align:left;"> </p><p style="text-align:left;"> </p></div>