Simpler Album Description

Simpler Album Description <html> <div id="wholeBox"> <div class="myTitle"> My Info or Guestbook or what-ever </div> <div class="myPhoto"> <img src="/photos/244993362-S.jpg" height="300" width="200"> </div> <div class="myText"> Thanks for stopping by. The code you will find below creates a gallery that can be used for an "about me", "guestbook", "info" or other page with mainly text (also known as "HTML only page"). The code used in this example will make it so that the text flows around the photo. <ul style="text-align:left; color: rgb(41, 68, 123);"> <li>Click on the "add photos" button on any page and select "New gallery" in the dropdown.</li> <li>Fill in the gallery title and select a category then click "Create Gallery".</li> <li>Next page click the "return to your gallery" in upper right corner or upload the photo you'll be using.</li> <li>When the new gallery loads click on the "customize gallery" button or pick "customize gallery" under the "gallery tools" dropdown.</li> <li>On the customize page set the gallery to "unlisted".</li> <li>Also on the customize page in the style dropdown select "journal (old)" to force the gallery to "journal (old)" style to hide the style picker.</li> <li>Hit the save button on the bottom right.</li> <li>You can now copy the html below and paste into the album description.</li> <li>Go to your control panel and select the "customize" tab, click "Customize" in the list.</li> <li>On the "Customization Settings" page, the top box, "css - optional" is where you will paste the CSS. After pasting it in go to the bottom of the page and click "Update".</li> <li>Now when you return to your gallery you should see it formated.</li> <li>The photo shown on the left above can be uploaded to this gallery. It will be hidden by the CSS below, plus you won't forget where you put it and comments will work.</li> </ul> Composition advice. Make sure if you're using a photo that the person is looking into the text and not away. Hate to see anyone talking out of the back of their head. :GRIN See the instructions at the bottom of this page on how to move the photo to the right of this text. </div> <div id="instructions"> <h3> The area above this white box is an example of text and photo in the album description. In this white box is the code to construct it. </h3> Add this to the album/gallery description Replace the XXXXXXXXXX with your photo number and size. You might need to add the photo security key. XXXXXXXXXX_XXXXX-S.jpg <hr width="600" style="margin-left: -30px;"> <pre> <html> <div class="myTitle"> Title </div>  <div class="myPhoto"> <img src="/photos/XXXXXXXXXX-S.jpg" width="200" height="300" /> </div>  <div class="myText"> Thanks for stopping by. This is an example of adding html to the gallery description which can be use for an "about me", "guestbook", "info", "contact" or any other "html" page. Create a new gallery, set it to private and journal style under gallery customization. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text You can contact me by Email <a href="mailto:myname@mydomain.com"> here</a> </div>  <div class="spacer"></div> </html> </pre> <hr width="600" style="margin-left: -30px;"> Add this to your CSS Replace the XXXXXXX's with your gallery number Do not include the gallery security key XXXXXXX_xxxxx <hr width="600" style="margin-left: -30px;"> <pre> /* START gallery XXXXXXX */ .gallery_XXXXXXX #albumDescription { margin-top: 40px; /* gap from navbar at top */ background: #ccc; /* background of description box */ padding: 20px 40px 40px 40px; /* top right bottom left */ } /* spacing inside box from edges */ .gallery_XXXXXXX .myPhoto { float: left; /* allows the text to flow to the right */ padding: 0 30px 10px 0; /* top right bottom left */ } /* spacing of text around photo */ .gallery_XXXXXXX .myPhoto img { border: 4px ridge #444; /* add border around photo */ } .gallery_XXXXXXX .myTitle { font-family: Comic Sans MS, verdana; font-size: 150%; color: #444; font-weight: bold; text-align: center; margin: 0 auto 30px auto; /* top right bottom left */ } .gallery_XXXXXXX .myText { font-family: Comic Sans MS, verdana; font-size: 100%; color: #444; font-weight: normal; text-align: justify; } .gallery_XXXXXXX .myEmail {color: #444;} .gallery_XXXXXXX .myEmail:hover {color: red;} /* things you can hide on page */ .gallery_XXXXXXX .nophotos h3, /* if no photos in gallery */ .gallery_XXXXXXX #albumNav_top, .gallery_XXXXXXX #albumNav_bottom, .notLoggedIn .gallery_XXXXXXX .journal_entry, /* hides photos in gallery */ .notLoggedIn .gallery_XXXXXXX #breadcrumb {display: none;} /* END gallery XXXXXXX */ </pre> <hr width="600" style="margin-left: -30px;"> End of CSS (Don't forget to set the gallery to journal style) <hr width="600" style="margin-left: -30px;"> <pre> To position the photo on the right instead of the left modify the above CSS to what is shown below in blue. You'll also need to swap the right/left padding as shown below. .gallery_XXXXXXX .myPhoto { float: right; /* allows the text to flow to the left */ padding: 0 0 10px 30px; /* top right bottom left */ } <hr width="600" style="margin-left: -30px;"> Note: If you want comments to be available for the gallery, especially the guestbook, there has to be at least one photo in the gallery and it can not be checked "hide". The CSS above will hide the photo. This will also give you a photo to feature for the thumb on category and/or sub-cat page. <hr width="600" style="margin-left: -30px;"> To change the comments at the bottom of the guestbook gallery to "guestbook comments" add this to your javascript. Replace the XXXXXXX with your gallery number. function ModifyText () { if (YD.hasClass(document.body, "gallery_XXXXXXX")) { var objElement = YD.get("comment") if (objElement != null) { var str = new String(objElement.innerHTML); str = str.replace(/Gallery Comments/, 'Guestbook Comments'); objElement.innerHTML = str; } } } YE.onAvailable("comment", ModifyText); </pre> </div> </div> </html> http://www.smugmug.com/img/smuggy64.gif http://allen-steve.smugmug.com/gallery/3819841_ywRwQ/ 2007-11-12T06:49:37Z Copyright 2009, the copyright holder of each photograph. Some portions copyright SmugMug. All rights reserved. SmugMug