Group's posts with tag: tips&tricks
 This is a lil trick of lil importance. Wanted to share it though. lol Sometimes we wanna direct someone to a comment (reply) rather than the post itself. Well, hope this trick helps. It's simple. Just add this line to after the URL of the item replacing the red value with the comment's ordinal number. ?&view:replies=&goto=28#reply28 For example, I want to direct someone to one of my replies on http://multiplydesign.multiply.com/journal/item/268 Then I'd go to (or tell someone to go to).. http://multiplydesign.multiply.com/journal/item/268?&view:replies=&goto=28#reply28 But how am I supposed to know what's the number of the reply (in my example 28)? That's easy, too. Just pay attention to the status bar of your browser (Lower left corner) when you hover on the 'reply' link of that particular comment. (screenshot provided, click to enlarge)  Note: This will only work on chronlogical view.UPDATE:
Will now work on reverse or threaded view because this line: &view:replies= will automatically set the view to chronological..
 The first thing one have to do in order to customize the navigation menu and/or Page Title is to understand its structure:
div.owner_nav h1#page_owner_title div#subnavc div#subnav
Inside div#subnav, the links are configured by a.toptsel (active or selected page) and a.topt (other pages).
So both page_onwer_title and subnavc are contained inside owner_nav. You must have this on your mind because if you set their height/width outside the values used for owner_nav you may break your layout, or it may look OK on Firefox but awfully bad on IE, for instance.
The page title is just a text header (h1) so you can use any CSS attributes for text, color, etc, and may move it around changing its values for padding and margin.
Tip: you can make the text transparent with the code below, but you will still see the Page Title in your browser:
h1#page_owner_title { color: transparent; }
If you want to move the nav menu, start moving subnavc ("c" is for container) the same way: change its values for magin/padding. Then you can adjust where the text begins (Home, Blog, etc) doing the same thing once again: change value/margin but now for subnav.
 Again, make sure don't use non-sense values, like a padding for subnavc of 250px while the owner_nav height is just 200px. Last but not least remember that it's also a good practice (and it avoids problems with the page in different browsers) if you set the correct height and width for each container ( div). So if you have used a huge image for your header, probably you will want to set the correct height for owner_nav first, and then move the nav menu.
If you want to create your own menu, check this other tutorial:
and if you don't know what container, margin and padding are, read this first:
Have fun. 
Did you ever think what else you can do with your main page in Multiply? Lots of thing! You can rearrange boxes there, you can hide some of them, you can adjust some of them so only available for contacts or network. What else? This is the same question run through my mind lately.
Then I came up with a crazy idea to play with it. Say, I want to have more columns there. Is it possible? Yes, it is! How come? Before I show you how to do it, make sure you know the structure of it so you can imagine how this can be fun. Let's start!
The main page (some people call it "Home") is consists of several parts, mainly header, banner, body (plus rail) and footer. The body itself is consists of several nested tables and divisions. But here we just interested with main page where it has two columns of some part of it. Some base themes (like Blue Slate, Blocks, and Red Frog) don't have this feature, naturally. Another case is when you set the main page in linear mode, instead of boxed mode.
Do you know that when you use two-column base theme, there is a separator cell between those columns? This separator with id "#seperator" (I guess it's a typo) just sit there and do nothing. If you want to see it, just add this code to your CSS:
td#seperator {
background: red;
}
 There it is! You can easily spot it now. Since it doesn't do anything good (except becoming a separator) we can get rid of it easily with this code: td#seperator {
position: absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
background: none;
}Now we can back to the fun part for the two columns. Instead of two, we can have four or six columns there. How? The secret is with this code: /* div#mainbox_1,
div#mainbox_2,
div#mainbox_3, */
div#mainbox_4,
div#mainbox_5,
div#mainbox_6,
div#mainbox_7,
div#mainbox_8,
div#mainbox_9,
div#mainbox_10,
div#mainbox_11,
div#mainbox_12 {
float: left;
max-width: 48%;
margin: 2px;
}  See how easy this? In the code above I disable the first, second and third box, since they don't belong to the two-column part. Your own main page might be different with mine, so adjust as necessary. Or, you can also leave all box being adjusted automatically. Try to experiment with your own setting. The number "48%" also resulted from my own theme width (840px). You should play with this number to find one suitable for your theme. And if I want to have six columns instead, I change that number into "32%". By using percentage, the code also suitable for wide theme base (but I haven't test this).  Please experiment with your own theme, as the division number and the boxes arrangement can be different for each user (and theme). Some boxes also not very "nicely" fit into this multicolumn (like Welcome box and Guestbook). Another trick to make it fit is by set those boxes into "Summary Only", if possible. I hope this tutorial can give your main page a new look. It might not be desireable by every user, but at least you can try to have some fun. Always keep your page interesting for everybody. Enjoy! Have a nice weekend! 
 Link: http://tinyurl.com/#toolbarThere currently is no working FF3 Add On for Tiny URL, and the one for FF2 does not work. Here, however you can add Tiny Url directly into your toolbar!
See simple instructions here! 
 So you've learned the basics of HTML and CSS from this group. Wouldn't it be great to combine the two without uploading anything to your custom CSS? That can be done with INLINE STYLES. Simply put, it is adding CSS statements in your HTML tags. Many of you probably already know this, but for those who don't, I hope you find this tutorial helpful. We know very well that CSS makes global changes (ie, change the properties of ALL links, text, images, etc unless otherwise specified). But sometimes we just want to change a specific part on our page that just can't be done by HTML. This is where inline style comes in. (Oh would you just tell us how it's done!) Ok. Ok. lol It's really simple. Just add the style attribute to your HTML tags. For example: <span style=""></ span> <a style=""></a><img style=""></img>Etc.. You can do that to all HTML tags (correct me if I'm wrong). Now, defining the style is almost like doing CSS (without the selectors and the curly brackets ' { and } '). For example this code (I'm gonna use the <a> tag) <a style="border: 5px outset #000; margin: 2px; padding: 2px; overflow: auto; display: block; position: relative; color: #000; background: transparent URL('http://images.multiply.com/multiply/sos/bg.png') repeat center center scroll; font-family: tahoma; font-weight: bold; font-size: 40px; text-align: center; text-transform: uppercase; width: 550px; height: 50px; text-decoration:none;" href="http://multiplydesign.multiply.com">Multiply Design</a>will render this:Multiply DesignThe disadvantage of inline styles is it's inability to apply pseudo-elements (eg, hover, etc). There you go. Enjoy styling!
 If you want to post a CSS code online (or anything but HTML codes), you can use a div container with fixed width and/or height and add scroll-bars to it. Example:
<div style="width:500px; height:100px; overflow:scroll; padding:2px; border:2px dashed black">Sample Text ... Sample Text</div>
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Set width and height values to suit your needs and remove/change the border if you want. Of course, you can add anything in the style part, like a background image or color, change the text, etc (same syntax as CSS).
It works very well anywhere you can add HTML. When composing a blog entry however, you must first click on 'Edit HTML' and then add the code manually. Make sure you add the closing </div> at the end when you do this or it may break your post.
When you want to post HTML code, you can use textarea:
<textarea rows=10 cols=60>... your code here ...</textarea>
As you can see above, HTML code inside textarea isn't parsed, so you can put anything inside and it won't be processed. Be aware that break-lines (<br>) may appear if you use it. Adjust cols (columns) and rows to what you want.
Have fun.
Following another thread here, Changing the table view, I finally came up with a solution to get rid of that white border in Table View mode, which is hardcoded in HTML. This method can also be applied for similar case, once you get the idea of how it works.
The solution is quite simple. Instead of changing that particular DIV container, which unfortunately doesn't have a class or id, I simply make it has the same dimension with its own content. Luckily, the immediate content is ".tablediv1" which easily modified by CSS. So, all I need is just a single line of code,
.tablediv1 { margin: -1px; }
Now you can sleep easily, and forget about that white border nightmare on your Multiply page.UPDATE:
*) Andros base theme doesn't have this "white border" problem, because the structure is a bit different
*) This method only cover outside border, but not inside border. Sorry, nobody's perfect...
As requested by a few people I have put together a tutorial on how to create "Flyout" or "Drop Down" menus. This is when you hover your mouse over a button and the contents appear either below or to the side of the button. If your not sure what I mean by this please go to my multiply site here >>> http://g00gs.multiply.comThe detail is quite involved and in explaining how to do this, so I have included quite a few screen shots to clearly explain how its done. Because of this the file has been placed on a Free website, unfortunately there are pop ups when the visitor arrives at the page. Please just click them off at the X and they will turn off. NOTE: When you go there, hover your mouse over the thumbnails to view full size pictures Tutorial located here>>>> http://g00gs.0catch.com/tut.htmOnce you have made up one button copy the code, paste it then change the "#mainbox" number I hope you all can work it out, I am happy to answer any question within this post, however as its bed time replies will be in about 12 hours from posting. good luck, g00gs.
 The summary view shows the first 160 characters (in our inbox) or the the first 230 characters (in our homepage) of our post. But sometimes it can be a pain when it's not those first 160 or 230 characters we want to show up as summary. I found a workaround (which I originally shared here as a reply), but this time I've used CSS for a much convenient approach. First step:Go to your custom CSS and add the following string at the END. .bodytext p.summary {display:none;}Second step:Whenever you want to use a different "starter" for a specific post, add the following at the BEGINNING of that post. <p class="summary">Your custom summary</p>Notes: Only the first 160 characters will show up in the inbox (summary view). Or the first 230 characters will show up in your homepage (summary view). And remember, your custom summary will NOT show up in the actual post. Only in the summary (and full view) in the inbox, and on the homepage when you chose summary view for your mainboxes. Some screenshots: How it looks like on the inbox:  How it looks like on your homepage:  How it looks like on the actual post: 
Need to compare two (or more) windows side by side but hate resizing each and just can't get them quite right? Some of those windows have several tabs too? MANY USES FOR THIS! CSS comparison, drag and dropping images, copying photos to another album, copy from one site to a blog and much more. Easy window/tab hopping too! EASY TRICK.
Hold down the control key, and left (single click) on each browser window listed in your computer's taskbar that you want side by side. Two, three, or even four. While holding down the control key, just right click on any of them, and choose :
1. For XP - Tile Vertically
2. For VISTA - Side by side
There you go! You can close or minimize any one of the windows. Move from tab to tab in each, drag and drop them around - Try it out! (SEE SLIDESHOW)IMAGES HERE TO ENLARGE (Click on each and zoom)
If you have edited and saved your Custom CSS while the Multiply CSS parser was broken (or ever make a mistake and save the wrong code), then probably your code is missing height and width tags. It seems that the CSS parser is fixed now, but it won't bring back the tags to your code, so you have to fix it yourself.
Here's a tip that will help a lot: how to recover a previous version of your Custom CSS.
If you look at your page source code, you will see one link at the header like this:
http://UserID.multiply.com/style-custom/UserID/NNN/custom.css
where UserID is your Multiply username and NNN is a number. If you put this URL in your browser you will see your latest CSS, but if you change the number with a lower one you will get past versions! So you can copy the whole page content and paste it again in your Custom CSS.
For example, for user wlopes his latest CSS would be:
http://wlopes.multiply.com/style-custom/wlopes/17/custom.css
And he could get the previous versions using this URL in his browser: http://wlopes.multiply.com/style-custom/wlopes/16/custom.css
It's very useful when you make a mistake and destroy your theme! Hope it's clear to everyone how to use it. Enjoy!
 Click on image to enlarge and read instructions.
ADDITIONAL NOTE: TRY DRAGGING AN IMAGE INTO A REPLY BOX. IT DRAGS THE IMAGE PROPERTY URL THERE AND ALL YOU HAVE TO DO IS ENCASE IT WITH THE HTML ! NO NEED TO RIGHT CLICK, PROPERTIES, COPY & PASTE TO GET THE IMAGE PROPERTY URL! DRAG IT OVER INSTEAD. :)
SEE THIS LINK FOR EASY SIDE BY SIDE WINDOWS !
SIDE BY SIDE Windows ! All Browsers (Easy Trick)
 Just like opacity isn't a standard command yet in CSS, rounded borders in corners of boxes aren't also. Probably you already know that you can do it for Gecko-based browsers (Firefox, Netscape, Camino, etc), using commands like:
-moz-border-radius: 5px;
This is used in many Multiply base themes, most notably on Clean. The good news is that Webkit browsers (Safari, iPhone, etc) also support a similar command:
-webkit-border-radius: 5px;
It's very easy to remember, isn't it? Only when you specify the different corners is that they are different. They are listed below: - -moz-border-radius-topleft / -webkit-border-top-left-radius
- -moz-border-radius-topright / -webkit-border-top-right-radius
- -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
- -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.
So now you can prettify your borders in both browsers. Before you ask, IE does not support it ( nor major CSS3 features), and hardly will.
 It was asked some time ago and I could not find the answer then. Now, looking for info about how to use a cool SSB (Single Site Browser) for Mac called Fluid I found the info. And it's quite simple after all...
Every replybodytext has an 'author' property, but I didn't know how to use it in CSS until now. So, if you want to make your replies bold and bigger, you could use this code in your Custom CSS:
div.replybodytext[author="UserID"] { font-weight: bold; font-size: 14px; }
Just replace UserID with your actual Multiply username (mine is lfom, for instance).
Of course, you may use it also for your friends, so each of then has a different text color, for example:
div.replybodytext[author="YourFriendID"] { color: red; }
and so on... Hope who asked it in the past find this post now. Enjoy!
Well, the fun hasn't stopped yet: how about a different border around your headshot too? It's also possible:
.userboxlogo img[alt="UserID"] { border: 2px solid gold; }
Nice, isn't it? Request granted, Linda...
 Want a different look for your homepage? Try FRAMING your site with simple CSS. In the body portion of your CSS, add this:
border-color: silver ;
border-width:30px ;
border-style: inset;
OR THIS:
border-color: silver ;
border-width:30px ;
border-style: outset;
Using either inset or outset you can create two totally different "frames" made with borders. Choose the width of your frame just by adjusting the number 30, and choose your own color too.
Here's a list of border styles to play with:
dotted - Defines a dotted border. Renders as solid in most browsersdashed- Defines a dashed border. Renders as solid in most browserssolid - Defines a solid borderdouble - Defines two borders. The width of the two borders are the same as the border-width valuegroove - Defines a 3D grooved border. The effect depends on the border-color valueridge - Defines a 3D ridged border. The effect depends on the border-color valueinset - Defines a 3D inset border. The effect depends on the border-color valueoutset - Defines a 3D outset border. The effect depends on the border-color value NOTE: THIS DOES WORK IN FIREFOX, IE, and probably other browsers as well.
 I used a small animated gif arrow image as my underline for the links when hover,. (size of image depends on you, just make it sure it is small and will look like a line when on repeat-x) this is the image i used  (the size is 10x5).. you can do this on all links on your entire site or just a section of your site links only.. this code is for navbar links only a.topt:hover, a:visited.topt:hover, a:link.topt:hover, a.toptsel:hover, a:visited.toptsel:hover, a:link.toptsel:hover {text-decoration:none;padding-bottom: 2px;background: url(image_url_here) repeat-x bottom ;}this code is for entire links.. a:hover, a:visited:hover, a:link:hover {text-decoration:none;padding-bottom: 2px;background: url(image_url_here) repeat-x bottom;}just choose a proper selector where you want to apply this.. you can adjust the padding to place it at the top(as overline), bottom(underline) or midlle(like strike-through).. value of text-decoration must be none.. NOTE: if you use the second code.. all links will have that underline image ,. including photos in album, thumbnails (if sets in thumbnails) and all headshot links.. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- if you want the usual text decoration, here are some you can use,. Value's of text decoration text-decoration: underline; text-decoration: overline; text-decoration: linethrough; text-decoration: blink; text-decoration: underline overline;
| | OK...Linda made a comment about all the Custom CSS for the Skyline theme being able to interchange with the Black Lily. It does, to a point. The first option I tried, after placing my kinda sorta basic customised Skyline CSS into the Black Lily, was the "wide open illusion" horizontal and vertical navigation bars. They didn't fair so well!
Sooo...off I went to the drawing board! Here's the Black Lily base code for the Owner Nav bar, along with the area for the page "title"...both of which are involved to work this out...
/*Black Lily owner nav bar - base code*/
div.owner_nav {
padding: 0;
height: 210px;
background: url(http://images.multiply.com/multiply/style/blacklily/ownernav_bg.jpg) no-repeat top left;
}
div#subnavc {
margin-left: 120px;
background-color: #454;
background: none;
width: auto;
border: none;
}
div#subnav {
width: auto;
padding: 0;
margin: 0;
height: auto;
background: none;
}
a.topt, a:visited.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-size: 11px;
color: #fa0;
width: 68px;
height: 19px;
font-weight: bold;
padding: 0;
padding-top: 10px;
background: url(http://images.multiply.com/multiply/style/blacklily/lvl2nav_tab.jpg);
}
a.toptsel, a:visited.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-size: 11px;
color: #fff;
padding: 0;
padding-top: 10px;
width: 68px;
height: 19px;
font-weight: bold;
background: url(http://images.multiply.com/multiply/style/blacklily/lvl2nav_tab.jpg);
}
/*Black Lily "page title" - base code*/
h1#page_owner_title {
padding: 90px 0 0 130px;
background-color: #ddd;
background-color: #ecf2f9;
background-color: #456;
background-color: none;
background-color: transparent;
color: #c00;
background-color: #456;
border: none;
background: none;
font-size: 40px;
font-weight: normal;
font-family: serif;
height: 57px;
}
...which, with the rest of the base code, gives you a page as shown by "Image 1" below...
First order of business was to implant an image as the background which involved these two areas in order to have a "transparent" effect for the area above the main body of the theme...
body {
background: url(IMAGE URL);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
/*b/g for MP logo and gnav (Inbox - Groups)*/
table.globalnav {
background: none;
background-color: transparent;
}
With the following modified "nav bar" and "title" CSS...
/*Owner Nav Bar (HORIZONTAL)*/
div.owner_nav {
padding: 0;
/*moves title AND nav bar relative to gnav*/
padding-top: 40px;
/*moves nav bar down relative to title*/
padding-bottom: 250px;
height: 210px;
background: none;
background-color: transparent;
}
div#subnavc {
/*chg (-) to move nav bar left*/
margin-left: 30px;
background: none;
background-color: transparent;
width: auto;
border: none;
}
div#subnav {
width: auto;
padding: 0;
margin: 0;
height: auto;
background: none;
background-color: transparent;
}
/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: left;
background: none;
font-size: 18px;
color: #ECE5B6;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
width: 90px;
height: 19px;
padding: 0;
padding-top: 10px;
background: none;
background-color: transparent;
}
/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
color: #fff;
}
/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: left;
background: none;
font-size: 18px;
color: #fff;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
/*"blink" works in FF only*/
text-decoration: blink;
padding: 0;
padding-top: 10px;
width: 90px;
height: 19px;
background: none;
background-color: transparent;
}
/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
color: #fff;
}
/*End of HORIZONTAL owner nav bar CSS*/
/*TITLE area adjustments for Horizontal nav bar*/
h1#page_owner_title {
padding: 0;
/*moves nav down - must establish div.owner_nav { padding-bottom } FIRST!*/
padding-bottom: 350px;
/*pushes (+) title to right - to line up with body&navbar*/
padding-left: 20px;
background: none;
background-color: transparent;
border: none;
color: #ECE5B6;
font-size: 22px;
font-weight: bold;
font-style: oblique;
font-family: Trebuchet MS, Helvetica, sans-serif;
height: 57px;
}
...you get the effect, as displayed in "Image 2" (IE7) and "Image 3" (FF).
With the following modified "nav bar" and "title" CSS...
/*Owner Nav Bar (VERTICAL)*/
div.owner_nav {
width: auto;
padding: 0px;
/*moves (+) title AND nav bar relative to gnav*/
padding-top: 25px;
/*moves (+) nav bar down relative to title*/
padding-bottom: 285px;
background: none;
}
div#subnavc {
/*adj (-) to bring nav bar left*/
margin-left: 35px;
background: none;
width: 110px;
border: none;
/*chg (+) nav bar relative to title*/
padding-top: 20px;
position: absolute;
}
div#subnav {
padding-left: 8px;
background: none;
border: none;
height: 20px;
}
/*nav buttons - not "In Use" or hover*/
a.topt, a:visited.topt {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*spacing between tabs*/
height: 40px;
text-align: left;
font-size: 18px;
color: #ECE5B6;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background: none;
background: url();
background-repeat: no-repeat;
background-position: center;
border: none;
}
/*hover on all - not "In Use"*/
a.topt:hover, a:visited.topt:hover {
color: #fff;
}
/*"In Use" tab - not hover*/
a.toptsel, a:visited.toptsel {
line-height: 2.4em;
display: block;
float: left;
width: 110px;
/*space below "In Use" tab*/
height: 40px;
text-align: left;
font-size: 18px;
color: #fff;
font-style: oblique;
font-weight: bold;
font-family: Trebuchet MS, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background: none;
background: url();
background-repeat: no-repeat;
background-position: center;
border: none;
/*to add blinking (FF) "In Use" tab on nav bar*/
text-decoration: blink;
}
/*"In Use" tab - hover*/
a.toptsel:hover, a:visited.toptsel:hover {
color: #fff;
}
/*End of VERTICAL owner nav bar CSS*/
/*TITLE area adjustments for Vertical nav bar*/
h1#page_owner_title {
background-color: transparent;
/*pushes (+) "title" to rt - to line up with body&navbar*/
padding-left: 40px;
/*will push title & nav bar down - more space between gnav, less space between Welcome box*/
padding-top: 20px;
color: #ECE5B6;
font-size: 22px;
font-weight: bold;
font-style: oblique;
font-family: Trebuchet MS, Helvetica, sans-serif;
height: 57px;
}
...you get the effect, as displayed in "Image 4" (IE7) and "Image 5" (FF).
I inserted /* notes */ in appropriate areas of the codes with an explanation regarding the relevancy of changes in each area to give you latitude for personal tweaking...Hopefully, they are understandable by all!
A final note regarding these codes and the CSS Validator:
Tho the /* notes */ within the brackets (ie; { } ) are strategically placed for your reference and guidance in the event you want/need to tweak them for your personal preference, I do not advise pasting any /* notes */ contained by the brackets (ie; { } ) in with your Custom CSS as they may cause problems for you when you validate your CSS such as coming up with a misplaced semi-colon. Save yourself the frustration...lol
I want to take this opportunity to thank Linda (Dantcer), for the image that seemed so fitting as it went with the original colors of the Black Lily theme...Thank You, Linda!
Happy trails....
UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the validator doesn't strip the height and width from the Custom CSS!
|
| | Multiply's Dimples for the Textareahandle can be customized to match any theme. All that's needed is the desired hex color code or rgb code.
These are best viewed by clicking on each individual color.
To learn more about customizing the textareahandle, check out the comments in this thread.
A special thanks goes to Missy (whose red I swiped for this gallery). Here is the code she posted on the thread linked above:
.textarea-handle {
position: relative;
right: 1px;
height: HEIGHT-OF-GRAPHICpx; width: 100%;
cursor: n-resize;
margin-top: 2px;
display: block;
background: url(YOUR-GRAPHIC-URL-HERE) no-repeat top right;
}
PS Linda, I figured with 12, I had enough at this point to go ahead and start that gallery you requested. |
Some people have discovered a way to move the tag cloud out of the welcome box and move it to wherever they want on their homepage. Since I've always wanted my tag cloud separate from my welcome message, I was highly inspired by this. But I noticed that it was when I was looking for something on my blog page that the desire for access to the tag cloud would be the greatest. No matter how hard I tried, I could not figure out how to get the tag cloud on every page using the relatedlinks class. With help from Luiz's tutorial on adding a widget anywhere, I made up my own tagcloud class to place information in the css code, then made up an html code to enter into the site title area.
It meant pasting my tags into the code manually, but for me, the end result was worth it. The great thing is that you can put the tags in any order you want - alphabetically, by order of importance, by topic, etc. You can put in as few or as many as you want, even adding or removing tags at a later time. And you can have them all one font size - a major bonus for me.
Through trial and error, I discovered that placing the tag cloud below the ads would mean that it would fall below the footer on shorter pages, like the calendar and the public view of my profile. I ended up placing it above the rail, but it really can go anywhere based on personal preference. It can even stay in the site title area if someone wanted it that way. To make room so it would work where I wanted it, I added a little padding to h1#page_owner_title in my css to push the rail down a bit. Since the footer lines up with the bottom of the ads on shorter pages, the padding in my site title area does not affect the way the footer looks. And it renders very similar in both FireFox and IE7. Guess which is which! LOL.  
Click on the pictures if you wish to see a larger view.
So if you're still with me, this is how I got it to work.
Step 1 - Click Customize My Site and select Show All for the tags in the welcome module so that you can copy and paste them into a text editor of your choice. You can then put the welcome module back to the way you had it before. This is just a suggestion, but it is highly recommended so that you know what you're working with. You may only want to use a few tags at first to test this out and, if you like it, add more as you have the time and/or patience. Step 2 - Paste your tags into the following code. Be sure to use font sizes of your choosing where the question marks are for both the title and the tags. I have 16px for my title and 11px for my tags. IMPORTANT! In order for this to work in the site title area, there must be no spaces between closing and opening brackets ><. To get the comma and space between the tags, add them where I did in the hyperlink text. <div class="tagcloud"><span style="font-size: ??px;"><TITLE FOR TAG CLOUD GOES HERE></span><span style="font-size: ??px;"><a href=/tag/TAG NAME 1>TAG NAME 1 REPEATED, </a><a href=/tag/TAG NAME 2>TAG NAME 2 REPEATED, </a><a href=/tag/TAG NAME 3>TAG NAME 3 REPEATED, </a><a href=/tag/TAG NAME 4>TAG NAME 4 REPEATED, </a></span></div> My whole code just for the tag cloud alone ended up looking like this:
 Click if you wish to enlarge the picture.
Step 3 - Backup a copy of your Site Title code, then add this to it (remember NO SPACES between brackets!) and paste it back in. FYI I had to play with the placement of this code a bit until I found what worked for me. Step 4 - Add the code to the bottom of your CSS, customizing it to fit the way you want it to look. Be sure to use the same class name as you did in the HTML code. .tagcloud {
background-image: url(YOUR URL HERE Note: For purposes of IE, it is best to make the background image -if you use one- the same width and height as the tag cloud you create);
background-repeat: repeat; <-------- This was also added because of how it was viewing in IE
background-position: top center;
filter:alpha(opacity=50); <-----------I wanted the background translucent
-moz-opacity:0.50; "
opacity:0.50; "
-khtml-opacity:0.50; "
border: 1px solid #9ab6cd;
top: -20px; <-------------------------- This was to put it at the top above the site title margin
left: 104%; <--------------------------- This put it over the right rail
position: absolute; <------------------ Needed if you want to move it out of the Site Title area
text-align:center;
font-family: georgia;
color: #5e7b99;
width: 150px;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto; < ------------------- Added an automatic vertical scrollbar
} Good luck. PS If you copy and paste the tagcloud code into your css, please FIRST REMOVE the notes in color. They are for informational purposes only and will break the code if you leave them in. And another FYI, I do run all my code through the css validator, and I haven't had any problems yet. *knocks on wood*
| |
