Aces

<div id="blogpost" style="text-align:left;"> <h1>Tweak Your Yuwie Layout</h1> <h3>by Fran Corpier</h3> <h4>Add a link to this post to your page. <div class="bloglinkbackcode"><a href="http://yuwie-on.blogspot.com/2007/10/tweak-your-yuwie-layout.html">Tweak Your Yuwie Layout, <span style="font-size:88%;">by Fran Corpier</span></a></div>Copyright 2007, Fran Corpier.</h4><p><span class="drkemph">Summary:</span> In the last post, we explored in detail <a href="http://yuwie-on.blogspot.com/2007/10/editing-yuwie-layout.html">how to clone a layout</a> that you chose from the public list, in order to have the option to customize it. Now that you have the clone set up in your layouts control panel, you can make some of the following minor changes for potentially major impact.</p><hr noshade="noshade" /><p>This article is organized as three main sections, plus 2 Notes sections: <ul> <li><a href="#sectionclasses">Page Sections and Classes That Control Them</a></li> <li><a href="#fontedits">Font, Background, and Display Changes</a></li><li><a href="#exampleedits">All Together: Putting Changes Into the Section Classes</a></li> <ul> <li><a href="#cssreferences">Additional References</a></li> <li><a href="#lookingforward">Looking forward, next topic</a></li> </ul> </ul> </p><div id="sectionclasses"> <h2>Page Sections and Classes That Control Them</h2><p><span style="font-weight:bold;font-size:105%;">Yuwie personal pages are divided into several sections.</span> Here is a list of style sections, and the respective style definitions that control them.</p><h3>Bio, Likes, and Option Sections</h3> <ul> <li>entire bio section: <br /><code>.biotable</code></li> <li>bio header: <br /><code>.biohead td</code></li> <li>entire options section: <br /><code>.optionstable</code></li> <li>options header: <br /><code>.optionshead td</code></li> <li>entire "likes" section: <br /><code>.likestable</code></li> <li>"likes" header: <br /><code>.likeshead td</code></li> </ul><h3>Friends Section</h3> <ul> <li>entire friends section: <br /><code>.friendstable</code></li> <li>friends header: <br /><code>.friendshead td</code></li> </ul><h3>Shoutbox Section</h3> <ul> <li>entire shoutbox section: <br /><code>.shouttable</code></li> <li>shoutbox header: <br /><code>.shouthead td</code></li> </ul><h3>Comments Section</h3> <ul> <li>entire comments section: <br /><code>.commentstable</code></li> <li>comments header: <br /><code>.commentshead td</code></li> <li>profile image column: <br /><code>td.comments1</code></li> <li>comment images column <br /><code>td.comments2</code></li> <li>editing links + time, date column <br /><code>td.comments3</code></li> </ul><h3>Blog Section</h3> <ul> <li>blog entry section: <br /><code>.blogtable</code></li> <li>blog headers: <br /><code>.bloghead td</code></li> <li>blog list on profile page: <br /><code>.blogoutline</code></li> <li>blog list base: <br /><code>.blogbottom td</code></li> </ul> </div> <div id="fontedits"> <h2>Font, Background, and Display Changes... <small>[<a href="top" onclick="window.scroll(0,0);return false">top</a>]</small></h2><p>The Yuwie page is neatly organized, as you can see.</p><p>While you can add sub-sections within sections, that's a topic that I will cover in a later post in this series.</p><p>For basic editing, you need just a few lines of code to change various style attributes. When you place these lines of code into the appropriate definition, outlined above, then you have customized your layout!</p><p>Please take note that each attribute must be followed by a semi-colon. If you miss just one semi-colon, all attributes following it will be messed up. Your page will look like crud. <strong>Semi-colon (;)</strong>.</p><p>Here are some edits you might like:</p><h3>Font Size and Color</h3> <ul> <li>Change font size: <br /><code>font-size:11pt;</code> <br /><br /> Note there can be NO SPACE between the font size and measurement. (e.g., 12pt, <em>not</em> 12 pt.) <br /><br />While the measurement can be ems, percentage, pixels, or points, I've found it useful to stick with percentages or points. <br /><br /> <ul> <li>Very small <br /><span style="font-size:8pt;">8 point</span>: <br /><code>font-size:8pt;</code> <br /> <br /><span style="font-size:9pt;">9 point</span>: <br /><code>font-size:9pt;</code><br /><br /></li> <li>Smallish <br /><span style="font-size:10pt;">10 point</span>: <br /><code>font-size:10pt;</code> <br /> <br /><span style="font-size:11pt;">11 point</span>: <br /><code>font-size:11pt;</code><br /><br /></li> <li>Medium <br /><span style="font-size:12pt;">12 point</span>: <br /><code>font-size:12pt;</code> <br /> <br /><span style="font-size:14pt;">14 point</span>: <br /><code>font-size:14pt;</code><br /><br /></li> <li>Large <br /><span style="font-size:16pt;">16 point</span>: <br /><code>font-size:16pt;</code> <br /> <br /><span style="font-size:18pt;">18 point</span>: <br /><code>font-size:18pt;</code><br /><br /></li> <li>Very Large <br /><span style="font-size:32pt;">32 point</span>: <br /><code>font-size:32pt;</code> <br /> <br /><span style="font-size:48pt;">48 point</span>: <br /><code>font-size:48pt;</code> <br /> <br /><span style="font-size:72pt;">72 point</span>: <br /><code>font-size:72pt;</code><br /><br /></li> </ul> </li> <li style="background-color:#333;color:#fff;padding:.5em;width:20em;">Change font color: <br /><span style="color:#f00;">red</span>: <br /> <code>color:#f00;</code> <br /> <br /><span style="color:#ccc;">light gray</span>: <br /> <code>color:#ccc;</code> <br /> <br /><span style="color:#wheat;">wheat</span>: <br /> <code>color:wheat;</code> <br /> <br /><span style="color:#E9B5CF;">light pink</span>: <br /> <code>color:#E9B5CF;</code> <br /> <br /><span style="color:#ECA13C;">gold</span>: <br /><code>color:#ECA13C;</code><br /> <br /></li> <li>Change font boldness: <br /><span style="font-weight:bold;">bold</span>: <br /> <code>font-weight:bold;</code> <br /> <br /><span style="font-weight:700;">heavier bold</span>: <br /> <code>font-weight:700;</code> <br /> <br /><span style="font-weight:900;">heaviest bold</span>: <br /> <code>font-weight:900;</code><br /> <br /></li> <li>Change font style: <br /><span style="font-style:oblique;">italic</span>: <br /> <code>font-style:oblique;</code> <br /><span style="font-style:oblique;">oblique defaults to italic font, or slants right</span> <br /> <br /><span style="font-style:normal;">normal</span>: <br /><code>font-style:normal;</code><br /> <br /></li> <li>Change font family <br /><span style="font-family:'Times New Roman',Times,Georgia,Serif;">Serif</span> <br /> <code>font-family:'Times New Roman',Times,Georgia,Serif;</code> <br /> <br /><span style="font-family:Verdana,Arial,Helvetica,Sans-serif;">Sans-serif</span> <br /><code>font-family:Verdana,Arial,Helvetica,Sans-serif;</code> <br /> <br /><span style="font-family:'Courier New',Monoco,Courier,Monospace;">Monospace</span> <br /><code>font-family:'Courier New',Monoco,Courier,Monospace;</code> <br /> <br /><span style="font-family:'Lucida Handwriting','Rose Round','Brush Script MT','Comic Sans MS',Cursive;">Cursive</span> <br /> <code>font-family:'Lucida Handwriting','Rose Round','Brush Script MT','Comic Sans MS',Cursive;</code> <br /> <br /><span style="font-family:'Bank Gothic',Braggadocio,'Chalkboard Bold','Engravers MT','Jazz LET',Fantasy;">Fantasy</span> <br /> <code>font-family:'Bank Gothic',Braggadocio,'Chalkboard Bold','Engravers MT','Jazz LET',Fantasy;</code><br /> <br /> </li> <li>Notice that: <ul> <li>Multi-word names are quoted.</li> <li>Order fonts by 1st, 2nd, 3rd, etc. choice</li> <li>Separate each font name with a comma.</li> <li>Always put the generic font suggestion at the end (Serif, Sans-serif, Monospace, Cursive, or Fantasy)</li> <li>Such definitions should have NO line breaks. The HTML seems to wrap the lines, here, but the source code has no breaks.</li> </ul> </li> </ul><h3>Background Color and Image</h3> <ul> <li>change background color: <ul> <li style="padding:1em;"><span style="background-color:#333;color:wheat;padding:1em;">dark gray</span> <br /><br /><code>background-color:#333;</code></li> <li style="padding:1em;"><span style="background-color:#912270;color:wheat;padding:1em;">purple</span> <br /><br /><code>background-color:#912270;</code></li> </ul> </li> <li>change background image: <br /><code>background-image:url(unquoted_web_url_goes_here);</code></li> <li>or, consolidate the background color, image, direction of image repeat, and position of the image: <br /><code>background:#333333 url(...) repeat-x center top;</code></li></ul><h3>Borders</h3> <ul> <li>all 4 borders: <ul> <li style="padding:1em;"> <span style="border:1px solid #000;padding:.5em;">solid black border, 1 pixel wide</span> <br /><br /><code>border:1px solid #000;</code></li> <li style="padding:1em;"> <span style="border:2px dashed #999;padding:.5em;">dashed, gray, medium border</span> <br /><br /><code>border:2px dashed #999;</code></li> </ul> </li> <li>top border <ul> <li style="padding:1em;"><span style="border-top:thin dotted #f00;padding:.5em;">thinnest, dotted, red</span> <br /><br /><code>border-top:thin dotted #f00;</code></li> </ul> </li> <li>bottom border <ul> <li style="padding:1em;"><span style="border-bottom:4px dotted #FF00FF;padding:.5em;">wide, dotted, hotpink</span> <br /><br /><code>border-bottom:4px dotted #FF00FF;</code></li> </ul> </li> <li>outset borders <ul> <li style="padding:1em;"><span style="border:4px outset #FF00FF;padding:.5em;background-color:#FF80FF;color:#FFBFFF;">wide, outset, hotpink</span> <br /><br /><code>border:4px outset #FF00FF;</code></li> <ul> <li>total code for above outset button (remove line break): <br /><code><span style="border:4px outset #FF00FF;padding:.5em;background-color:#FF80FF;color:#FFBFFF;">button label</span></code></li> </ul> </ul> </li> <li>inset borders <ul> <li style="padding:1em;"><span style="border:4px inset #FF00FF;padding:.5em;background-color:#800080;color:#400040;">wide, inset, hotpink</span> <br /><br /><code>border:4px inset #FF00FF;</code></li> <ul> <li>total code for above inset button (remove line break): <br /><code><span style="border:4px inset #FF00FF;padding:.5em;background-color:#800080;color:#400040;">button label</span></code></li> </ul> </ul> </li> </ul><h3>No Display</h3> <ul> <li><a href="#" onclick="document.getElementById?(document.getElementById('exampledisplay').style.display=='none'?document.getElementById('exampledisplay').style.display='block':document.getElementById('exampledisplay').style.display='none'):(document.all?(document.all['exampledisplay'].style.display=='none'?document.all['exampledisplay'].style.display='block':document.all['exampledisplay'].style.display='none'):'');return false">no display</a>: <br /><code>display:none;</code></li> <li id="exampledisplay" style="display:inline;">Link, above, tests Javascript toggle control over display of this line. <br />The test illustrates how display:none collapses the space normally taken up by the item.</li> </ul> </div><div id="exampleedits"> <h2>All Together: Putting Changes Into the Section Classes... <small>[<a href="top" onclick="window.scroll(0,0);return false">top</a>]</small></h2><p>To affect a section, you simply add one of these changes into the class definition for that section.</p><p>This is best illustrated with examples.</p><p>To use these examples, just substitute <em>your</em> font size, color, and/or family, or <em>your</em> border style, or <em>your</em> background, etc. You learned how to define attributes of any element in section 2, above. You're now ready to put them to work!<p><h3>Example 1: <br />Change the background color of the profile picture column in the Comments section</h3><p><code>td.comments1 {background-color:#DD6D2E;}</code></p><h3>Example 2: <br />Don't display images in the Comments section.</h3><p>You can alternatively choose a "No HTML" setting in your Yuwie settings.</p><p><code>td.comments2 img {display:none;}</code></p><h3>Example 3: <br />Resize images in Comments section to 42% of the width of that section.</h3><p>This makes all images the same width. Height scales proportionately. This is the only method that scales the image proportionately in all major browsers, all platforms.</p><p><code>td.comments2 img {width:42%;}</code></p><p>Note: This will make even small images xx% of the width of the section. Even though small images are a tiny minority, this method works best overall, when width is set at 50% or less.</p><h3>Example 4: <br />Do not display the Shoutbox or Shoutbox header.</h3><p><pre> .shouttable {display:none;} .shouthead td {display:none;} </pre></p><p>Or, if you want to just temporarily disable your shoutbox, simply add the display:none definitions at the end, so you can easily delete it later and everything will just go back to normal.</p><p>key: "..." = leave other definitions in, except border</p><p><pre> .shouttable { ... display:none; } .shouthead td { ... display:none; } </pre></p><h3>Example 5: <br />Change the font size, color, and family for your Shoutbox, Friends, Comments, and Blog headers. </h3><p>key: "..." = leave other definitions in, except the ones you're replacing.</p><p>You may list all styles that get identical treatment as follows:</p><p><pre> .friendshead td, .shouthead td, .friendshead td, .commentshead td, .bloghead td { font-size:18pt; font-family:'Lucida Handwriting', Cursive; font-weight:700; color:#D8474F; background-color:transparent; } </pre></p><p>If you just want the Shoutbox to get these changes, then do this:</p><p><pre> .shouthead td { font-size:18pt; font-family:'Lucida Handwriting', Cursive; font-weight:700; color:#D8474F; background-color:transparent; } </pre></p><h3>Example 6: <br />Change the border for your Friends section.</h3><p>key: "..." = leave other definitions in, except border</p><p><pre> .friendstable { ... border:4px dotted #FF00FF; } </pre></p><p>That line defines a 4-sided border that is wide, dotted, and hotpink!</p></div><div id="cssreferences"> <h2>Additional References... <small>[<a href="top" onclick="window.scroll(0,0);return false">top</a>]</small></h2><h3>1. Free Background images for download, here:</h3> <p><a href="http://www.inzones.com/picturezone/free-backgrounds.htm">http://www.inzones.com/picturezone/free-backgrounds.htm</a></p><p>You must save images to your own computer, even "free" ones. Then upload them to Yuwie, or an image service, or your domain.</p> <p>To save an image to your computer: <br />Mac: Control-click image and hold, select:"save image to desktop" <br />Windows: Right-click image and hold, select: "save picture as" </p><h3>2. Stylesheet Help</h3> <p>The best way to change the style of any web page is to use stylesheets. Yuwie uses CSS: Cascading Style Sheets. Stylesheets are editable. Simple customizations, like those illustrated in this article, will get your feet wet in the art of CSS. </p><p>To learn more about CSS and how to create your own stylesheets from scratch, I highly recommend Jason Cranford Teague's <a href="http://www.amazon.com/gp/offer-listing/0201730847/ref=dp_olp_2/102-8033554-3124119" target="_blank">DHTML and CSS for the World Wide Web</a>. It's an older book, but solid and extremely well organized. You can find a used copy at Amazon for as low as 1 cent + shipping, or check it out at your local library.</p><p>The W3C organization reviews and sets standards for the web. Although some of their documents seem cryptic, you will find the most complete information on every style rule. Here's a linked index to all style rules: <a href="http://www.w3.org/TR/CSS21/indexlist.html">http://www.w3.org/TR/CSS21/indexlist.html</a></p><p>As you advance your CSS skills, you will want to frequent these two sites: <ul><li><a href="http://www.csszengarden.com">www.csszengarden.com</a></li> <li><a href="http://meyerweb.com">meyerweb.com</a></li> </ul> </p><p>Finally, seasoned webmasters and developers test their web pages¹ for standards compliance. Here's the official W3C CSS test site: <a href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a> .</p> <p>¹<span style="font-size:95%;">Yuwie pages don't validate at this time.</span></p> </div><div id="lookingforward"> <h2>COMING UP... <small>[<a href="top" onclick="window.scroll(0,0);return false">top</a>]</small></h2> <p>An upcoming post will be all about Color Themes. I'll cover things like: <ul> <li>How to match a color you saw on another site.</li> <li>How to easily find slight variations on any color.</li> <li>Test a font color against its background.</li> <li>Great color tools you can use for free.</li> </ul> Watch for it! </p><h2>MORE TO COME IN THIS SERIES...</h2> <ul> <li>Create Your Own Scrollable Text Widgets</li> <li>Side by Side Placement of Widgets, Images, and Text</li> <li>No More ActiveX Warnings - For Internet Explorer Users</li> </ul><p>Tell me what else you want to see, along these lines, or feel free to ask questions, here.</p> <p>If you're not a member of Yuwie, join me. <a href="http://www.yuwie.com/yuwie.asp?r=15854">Yuwie is free and fun</a>.</p></div><h5>Ed. This post, originally published Sept 23, 2007, was edited to include author byline and links Sept 28, 2007.</h5><hr style="margin-left:0;width:96%;text-align:left;" /> <p><span style="font-weight:bold;text-decoration:underline;">About the author:</span> Fran Corpier has owned and operated service companies servicing the network marketing and more recently internet affiliated industries, since 1998. Her database-driven applications have been used for the administration of products, services, and data for members of popular organizations. She has had the unique perspective of studying thousands of promotions and management styles by different companies, and their effects on their agents; as well application adoption by users.</p> <p>Fran: <em>"Even I make time for Yuwie. If you're not a member of Yuwie, please join me."</em> <a href="http://www.yuwie.com/yuwie.asp?r=15854">See the video. Yuwie is free and fun</a>.</p> <p>You: <em>"Okay."</em> <h4>Add a link to this post to your page. <div class="bloglinkbackcode"><a href="http://yuwie-on.blogspot.com/2007/10/tweak-your-yuwie-layout.html">Tweak Your Yuwie Layout, <span style="font-size:88%;">by Fran Corpier</span></a></div>Copyright 2007, Fran Corpier.</h4> <hr style="margin-left:0;width:96%;text-align:left;" /> <p><br /><br /></p> </div>

<div id="blogpost" style="text-align:left;"> <h1>Editing a Yuwie Layout</h1> <h3>by Fran Corpier</h3> <h4>Add a link to this post to your page. <div class="bloglinkbackcode"><a href="http://yuwie-on.blogspot.com/2007/10/editing-yuwie-layout.html">Editing a Yuwie Layout, <span style="font-size:88%;">by Fran Corpier</span></a></div>Copyright 2007, Fran Corpier.</h4><p><span style="font-weight:bold;font-size:105%;">Summary:</span> To change a layout that you chose from the public list, you will copy the stylesheet from View Source on your profile page, and paste it into a new layout that you create in your back room. You'll save the template and click the use button to use it. Details follow.</p> <hr noshade="noshade" /> <p><span style="font-weight:bold;font-size:105%;">Problem:</span> You selected a public layout owned by someone else. Therefore, it is <em>not</em> listed as a layout that you own, in your layouts control panel. The result is that you cannot edit it in your layouts control panel, because it doesn't show up there.</p><p><span style="font-weight:bold;font-size:105%;">Solution:</span> The solution is advanced, only in that you must identify what to copy and paste from the source code of your profile page.</p><p>It's not as daunting as it might seem.<p>Here are the steps to creating a cloned layout in your control panel:</p><h2>Copy the Source Code</h2> <ol> <li>While on your own profile page, click your browser's View Menu, and then the submenu: View Source or Page Source. (the term depends on your browser <br /> <br /> This is the HTML code for your page. We don't want all of the HTML, just a little section of it.</li><li>Slowly scroll down, until you see a lot of style definitions, some of which begin with a # (hash symbol) or a period. <br /> <br /> Definitions you should see are .blogtable, .blogoutline, .maintable, .optionstable, .biotable, .likestable, .personalurltable, .friendstable, .commentstable, .shouttable, .blogtable, .schoolstable, and .clubstable, among others.</li><li>Copy the entire list of definitions from the beginning style tag to the end style tag. From <style type="text/css"> to </style> (Some stylesheets incorrectly leave off the type attribute.) Copy the beginning and end style tags and everything in between.</li> </ol> <h2>Creating the Clone</h2> <ol> <li>Go to your layout control panel, and click on "create a new layout". Name it with a short but memorable name. Paste the copied stylesheet into the text box.</li><li>Click the preview button. At this point you have not changed anything, or added any definitions. So the preview page should look exactly the same as your old profile.</li><li>If it looks identical to your current profile page, then click the button in the top frame labeled, "Save This Template". <br /> <br /> This takes you back to the Layouts Control Panel.</li> </ol> <h2>Editing the Clone</h2> <ol> <li>Next to the name of your new layout, notice an edit button. Click the edit button to add any code you want into the template. Change fonts, font sizes, font-color, background color, comment image size, whatever.</li><li>Preview again, and see how you like the changes. Either save it or make more changes, using Yuwie buttons in the top frame.</li> </ol> <h2>Select the Clone for the Layout</h2> <ol> <li>The most important thing is that after the Preview looks just how you want it, then Save and go back and click the "Use" button for that layout. The "use" button and "edit" button are next to each other.</li><li>At this point, the layout is under your control, and you can change it. This does not affect the original (public) layout in any way.</li> </ol><hr noshade="noshade" /> My next post will include minor changes that you can make in your layout to change font size, color, and style, image size in the comments, and background from within the stylesheet.<h5>Ed. This post, originally published Sept 22, 2007, was edited to include author byline and links Sept 28, 2007.</h5><hr style="margin-left:0;width:96%;text-align:left;" /> <p><span style="font-weight:bold;text-decoration:underline;">About the author:</span> Fran Corpier has owned and operated service companies servicing the network marketing and more recently internet affiliated industries, since 1998. Her database-driven applications have been used for the administration of products, services, and data for members of popular organizations. She has had the unique perspective of studying thousands of promotions and management styles by different companies, and their effects on their agents; as well application adoption by users.</p> <p>Fran: <em>"Even I make time for Yuwie. If you're not a member of Yuwie, please join me."</em> <a href="http://www.yuwie.com/yuwie.asp?r=15854">See the video. Yuwie is free and fun</a>.</p> <p>You: <em>"Okay."</em> <h4>Add a link to this post to your page. <div class="bloglinkbackcode"><a href="http://yuwie-on.blogspot.com/2007/10/editing-yuwie-layout.html">Editing a Yuwie Layout, <span style="font-size:88%;">by Fran Corpier</span></a></div>Copyright 2007, Fran Corpier.</h4> <hr style="margin-left:0;width:96%;text-align:left;" /> <p><br /><br /></p></div>