Group's posts with tag: spunj
 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..
 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!
 Create dropdown menu thru CSS-HTML combo. Now, this one's actually a bit complicated. There are still a lot of ways to do dropdowns ( cssplay has incredible ones). I just wanna share what I have up and how I did it. The original codes were provided by thecakeisalie.. This would be great for those who are fond of using tags. That means, I can create submenus that will link to the blogs that have the same tag (eg, shoutouts). It's gonna seem like you have more pages than you actually do. The CSS (paste them in your custom CSS) .dd1 {
font-family: tahoma;
width:105px;
height:100px;
position:absolute;
left: 10%;
font-size:11px;
z-index:100;
}
.dd1 ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:104px;
height:20px;
text-align:center;
color:#fff;
background: transparent URL(image.url) scroll center center no-repeat;
line-height: 20px;
font-size:11px;
overflow:hidden;
}
.dd1 ul {
padding:0;
margin:0;
list-style-type: none;
}
.dd1 ul li {
float:left;
position:relative;
}
.dd1 ul li ul {
display: none;
}
.dd1 ul li:hover a {
color:#000;
background: transparent URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.dd1 ul li:hover ul li ul {
display: none;
}
.dd1 ul li:hover ul li a {
display:block;
color: #fff;
background: URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul li a:hover {
background: URL(image.URL) transparent scroll no-repeat center center;
color:#000;
}
.dd1 ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.dd1 ul li:hover ul li:hover ul.left {
left:-105px;
}
The HTML (paste them in your site title) <div class="dd1"><ul><li><a href="/menu link">MENU TITLE</a><ul><li><a href="/submenu link 1/">submenu link 1 title</a></li><li><a href="/submenu link 2/">submenu link 2 title</a></li><li><a href="/submenu link 3/">submenu link 3 title</a></li><li><a href="/submenu link 4/">submenu link 4 title</a></li></ul></li></ul></div>CSS notes:1. Now if you think that was already exhaustively long, well, that would only create ONE menu. You'll have to repeat the whole process changing .dd1 to .dd2, .dd3, and so forth for more menus.. 2. Of course you'll have to change the left position value ( highlighted) for the for the next menus, otherwise they'll assume the same position making the other menus not visible. HTML notes: 1. Change the class (eg, dd1) to dd2, dd3 and so forth for subsequent menus. 2. You can add more submenu items by repeating the whole highlighted portion below each other. 3. Before pasting the codes to your site title, make sure there are no line breaks. That's because the site title has no room for them. (I had put line breaks on this tutorial for better viewing purposes.) More notes:1. You're gonna have to hide the default nav bar. Do that by adding the following string to your custom CSS. div#subnav {display: none;}2. Some vales you can customize include background color, image; font color, size, family, weight, etc; width and height of each menu and submenu. Examples:1. Using one menu. (The actual codes I posted here) 2. More than one menu. (Using the actual codes in my page). Now, it may seem like a lot of work, but remember, patience is a virtue. lol Attachment: drop tut.htmlAttachment: my dropdown.html
 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: 
 Link: http://www.w3schools.com/css/css_colornames.aspWhat's great about this is you can click on the background color and see how different font colors would look like on them. In other words, you can test which color fits with what background..
PS. Please let me know if a link of similar nature has been posted here. Thanks! 
Replace the usual frames for your album thumbnails..
(click image to enlarge) CODES: (add to your custom CSS)div.album img.thumb { padding:20px; border: none; background: transparent url( http://tinyurl.com/5tc2zm) repeat scroll center center; } span.albumtitle { padding-top: -20px; text-align: center; } td div.album { float:center; margin: 20px; } NOTE: Replace the highlighted value with the URL of the image you want to use as the frame..
For the most part of icons in table view here on MP (ie, Blog, Music, Video, Links, Notes [for groups]), we can individually change the icons via HTML (Read this). It's possible cuz it's HTML. Thing is, that's kinda hard to apply with the Photos and Reviews sections. We can however use CSS to replace the icons. But because it's CSS, it'll have to replace all the icons automatically. No way to change them individually. Unless <td>'s have a class or ID.
Codes:
/*photos*/
.albumthumbnails .tablediv1 tr.bg2 img {visibility:hidden;}
.albumthumbnails .tablediv1 tr.bg2 {
background: #eeeeee url(image location) left center scroll no-repeat;}
/*calendar*/
.calendarwrapper .tablediv1 tr.bg2 img {visibility:hidden;}
.calendarwrapper .tablediv1 tr.bg2 {
background: #eeeeee url(image location) left center scroll no-repeat;}
/*reviews*/
.reviewswrapper .tablediv1 tr.bg2 img {display: none;}
.reviewswrapper .tablediv1 tr.bg2{
background: #eeeeee url(image location) left center scroll no-repeat;}
Note: The highlighted part (#eeeeee) is the default background color of tables. You might wanna replace them depending on your customized background color (eg, #fff or transparent, etc..).
Another note: Icons in Reviews usually show how many stars you gave that particular review. By using these codes, you are replacing all those stars. Be it 1, 2, 3, 4, or 5...
Last note: Use an image which dimensions are close to 24 x 24.
Screenshots: (Click for larger view)
 
I'm sure y'all thinking, "Who would wanna do that?"
Well, I just thought I should share this.. lol
I was wonderin how I could make collapsible text on MP and ended up learning Text Pop-up.
CSS (Paste this to your custom CSS)
.thumbnail {position: relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span {position: absolute; background-color: #fff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: #000; text-decoration: none;}
.thumbnail span img {border-width: 0; padding: 2px;}
.thumbnail:hover span {visibility: visible; top: 0; left: 60px;}
a {text-decoration: none;}
HTML (Paste this to wherever you can use HTML)
<a class="thumbnail" href="#thumb">YOUR TEXT HERE<span style="width: 500px;">YOUR TEXT FOR POP-UP HERE</span></a><br>
<a class="thumbnail" href="#thumb">ANOTHER TEXT HERE<span style="width: 500px;">EMBED IMAGE CODES HERE </span></a><br>
<a class="thumbnail" href="#thumb">ANOTHER TEXT HERE<span style="width: 500px;">EMBED FLASH CODES HERE </span></a><br>
Repeat the this step for more text pop-ups.
To view an example, click HERE. (Cuz I have no power to edit this group's CSS.. ) lol
Note: you can customize the highlighted parts.
PS. Since these are texts, you could always add HTML tags to add more effects (eg, <center>, <b>, <i>, etc..)
If you want to use image for your pop-up effect on your site, read this thread.
Attachment: pop-up.html
Click on the different parts of the image and see where it takes you.
Now this isn't a table of 6 images that link to 6 different URLs, rather, it is 1 image that links to 6 different URLS. Go on, check on the properties of the image, if you don't believe me.
This is called an image map. A single image that links to different URLs.
Step 1: Create an image.
The one I made is an image with a width of 150px and a height of 100px.
Step 2: Define the areas of your image. That is, define the coordinates.
<map name="map1">
<area shape="rect" coords="0,0,50,50" href="http://multiplydesign.multiply.com/" alt="Index">
<area shape="rect" coords="50,0,100,50" href="http://multiplydesign.multiply.com/journal" alt="Blog">
<area shape="rect" coords="100,0,150,50" href="http://multiplydesign.multiply.com/photos" alt="Photos">
<area shape="rect" coords="0,50,50,100" href="http://multiplydesign.multiply.com/video" alt="Videos">
<area shape="rect" coords="50,50,100,100" href="http://multiplydesign.multiply.com/reviews" alt="Reviews">
<area shape="rect" coords="100,50,150,100" href="http://multiplydesign.multiply.com/links" alt="Links">
</map>
2.1 How to get those coordinates? (I'll use the 5th area as an example..)
a. Open the image you want to use for image map with MS paint.
b. Grab the set of coordinates. (See images.Click to enlarge.)
 
c. Place those coordinates on the 'coords' value of the map.
<area shape="rect" coords="50,50,100,100" href="http://multiplydesign.multiply.com/reviews" alt="Reviews">
Note: Replace values in BLUE with your desired values
Step 3: Create your image tag
<img src="http://images.spunj.multiply.com/image/2/photos/66/400x400/4/imap.gif?et=B6dUCms5Xq3GHv%2C3hZBwFw&nmid=91344103" usemap="#map1" width="150" height="100" alt="Multiply Design" border="0">
Note: The value in usemap is the the value you used for map name (in step 2) preceded by the pound # sign. Be careful. it IS case sensitive.
Step 4:
Put the 2 set of codes (steps 2 and 3) where you can use HTML.. And there's your image map.
 Link: http://nvu.com/A complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users. Nvu (pronounced N-view, for a "new view") makes managing a web site a snap. Now anyone can create web pages and manage a website with no technical expertise or knowledge of HTML.
 Link: http://motzgraphics.com/animations/ANIMATED ARROWS
ANIMATED BUTTONS
MINI MOVIES
ANIMATED GLITTER TILES
ANIMATED DESIGN TILES
BACKGROUND MASKS
ANIMATED CREATURES
ANIMATED ATTENTION GETTERS
ANIMATED ALPHABETS
Really cool stuff plus you get to choose your color.. Go crazy! lol
 Link: http://activejump.comThey offer VERY SIMPLE HTML tutorial.
Cool thing about this is you can test your code to see whether they're working or not.
I use it all the time.
How to's: Typing either the value under the name code or number code column will produce the character under the glyph column. For example: Typing either < or &60; will produce: < This can be helpful when trying to relay HTML codes. For example:Typing<img src=http:⁄⁄images.multiplydesign.multiply.com⁄logo⁄ 2> Will produce: Wheras typing:<img src=http:⁄⁄images.multiplydesign.multiply.com⁄logo⁄ 2> will produce:<img src=http:⁄⁄images.multiplydesign.multiply.com⁄logo⁄2 > ISO Entities | Name Code | Number Code | Glyph | Description | | | | ‘ |
| ‘ | left single quote | | ’ |
| ’ | right single quote | | ‚ |
| ‚ | single low-9 quote | | “ |
| “ | left double quote | | ” |
| ” | right double quote | | „ |
| „ | double low-9 quote | | † |
| † | dagger | | ‡ |
| ‡ | double dagger | | ‰ |
| ‰ | per mill sign | | ‹ |
| ‹ | single left-pointing angle quote | | › |
| › | single right-pointing angle quote | | ♠ |
| ♠ | black spade suit | | ♣ |
| ♣ | black club suit | | ♥ |
| ♥ | black heart suit | | ♦ |
| ♦ | black diamond suit | | ‾ |
| ‾ | overline, = spacing overscore | | ← |
| ← | leftward arrow | | ↑ |
| ↑ | upward arrow | | → |
| → | rightward arrow | | ↓ |
| ↓ | downward arrow | | ™ |
| ™ | trademark sign | | | | Name Code | Number Code | Glyph | Description | | |
| �-
 |
| unused |
| 	 |
| horizontal tab |
| |
| line feed |
|  |
| unused |
|   |
| space |
| ! | ! | exclamation mark | | " | " | " | double quotation mark |
| # | # | number sign |
| $ | $ | dollar sign |
| % | % | percent sign | | & | & | & | ampersand |
| ' | ' | apostrophe |
| ( | ( | left parenthesis |
| ) | ) | right parenthesis |
| * | * | asterisk |
| + | + | plus sign |
| , | , | comma |
| - | - | hyphen |
| . | . | period | | | | Name Code | Number Code | Glyph | Description | | | | ⁄ | / | / | slash |
| 0-
9 |
| digits 0-9 |
| : | : | colon |
| ; | ; | semicolon | | < | < | < | less-than sign |
| = | = | equals sign | | > | > | > | greater-than sign |
| ? | ? | question mark |
| @ | @ | at sign |
| A-
Z |
| uppercase letters A-Z |
| [ | [ | left square bracket |
| \ | \ | backslash |
| ] | ] | right square bracket |
| ^ | ^ | caret |
| _ | _ | horizontal bar (underscore) |
| ` | ` | grave accent |
| a-
z |
| lowercase letters a-z |
| { | { | left curly brace |
| | | | | vertical bar | | | | Name Code | Number Code | Glyph | Description |
| } | } | right curly brace |
| ~ | ~ | tilde |
| -
• |
| unused | | – | – | – | en dash | | — | — | — | em dash |
| ˜-
Ÿ |
| unused | | |   | | nonbreaking space | | ¡ | ¡ | ¡ | inverted exclamation | | ¢ | ¢ | ¢ | cent sign | | £ | £ | £ | pound sterling | | ¤ | ¤ | ¤ | general currency sign | | ¥ | ¥ | ¥ | yen sign | | ¦ or &brkbar; | ¦ | ¦ | broken vertical bar | | § | § | § | section sign | | ¨ or ¨ | ¨ | ¨ | umlaut | | © | © | © | copyright | | ª | ª | ª | feminine ordinal | | « | « | « | left angle quote | | ¬ | ¬ | ¬ | not sign | | ­ | ­ | | soft hyphen | | ® | ® | ® | registered trademark | | ¯ or &hibar; | ¯ | ¯ | macron accent | | | | Name Code | Number Code | Glyph | Description | | ° | ° | ° | degree sign | | ± | ± | ± | plus or minus | | ² | ² | ² | superscript two | | ³ | ³ | ³ | superscript three | | ´ | ´ | ´ | acute accent | | µ | µ | µ | micro sign | | ¶ | ¶ | ¶ | paragraph sign | | · | · | · | middle dot | | ¸ | ¸ | ¸ | cedilla | | ¹ | ¹ | ¹ | superscript one | | º | º | º | masculine ordinal | | » | » | » | right angle quote | | ¼ | ¼ | ¼ | one-fourth | | ½ | ½ | ½ | one-half | | ¾ | ¾ | ¾ | three-fourths | | ¿ | ¿ | ¿ | inverted question mark | | À | À | À | uppercase A, grave accent | | Á | Á | Á | uppercase A, acute accent | | Â | Â | Â | uppercase A, circumflex accent | | | | Name Code | Number Code | Glyph | Description | | Ã | Ã | Ã | uppercase A, tilde | | Ä | Ä | Ä | uppercase A, umlaut | | Å | Å | Å | uppercase A, ring | | Æ | Æ | Æ | uppercase AE | | Ç | Ç | Ç | uppercase C, cedilla | | È | È | È | uppercase E, grave accent | | É | É | É | uppercase E, acute accent | | Ê | Ê | Ê | uppercase E, circumflex accent | | Ë | Ë | Ë | uppercase E, umlaut | | Ì | Ì | Ì | uppercase I, grave accent | | Í | Í | Í | uppercase I, acute accent | | Î | Î | Î | uppercase I, circumflex accent | | Ï | Ï | Ï | uppercase I, umlaut | | Ð | Ð | Ð | uppercase Eth, Icelandic | | Ñ | Ñ | Ñ | uppercase N, tilde | | Ò | Ò | Ò | uppercase O, grave accent | | Ó | Ó | Ó | uppercase O, acute accent | | Ô | Ô | Ô | uppercase O, circumflex accent | | Õ | Õ | Õ | uppercase O, tilde | | | | Name Code | Number Code | Glyph | Description | | Ö | Ö | Ö | uppercase O, umlaut | | × | × | × | multiplication sign | | Ø | Ø | Ø | uppercase O, slash | | Ù | Ù | Ù | uppercase U, grave accent | | Ú | Ú | Ú | uppercase U, acute accent | | Û | Û | Û | uppercase U, circumflex accent | | Ü | Ü | Ü | uppercase U, umlaut | | Ý | Ý | Ý | uppercase Y, acute accent | | Þ | Þ | Þ | uppercase THORN, Icelandic | | ß | ß | ß | lowercase sharps, German | | à | à | à | lowercase a, grave accent | | á | á | á | lowercase a, acute accent | | â | â | â | lowercase a, circumflex accent | | ã | ã | ã | lowercase a, tilde | | ä | ä | ä | lowercase a, umlaut | | å | å | å | lowercase a, ring | | æ | æ | æ | lowercase ae | | ç | ç | ç | lowercase c, cedilla | | è | è | è | lowercase e, grave accent | | | | Name Code | Number Code | Glyph | Description | | é | é | é | lowercase e, acute accent | | ê | ê | ê | lowercase e, circumflex accent | | ë | ë | ë | lowercase e, umlaut | | ì | ì | ì | lowercase i, grave accent | | í | í | í | lowercase i, acute accent | | î | î | î | lowercase i, circumflex accent | | ï | ï | ï | lowercase i, umlaut | | ð | ð | ð | lowercase eth, Icelandic | | ñ | ñ | ñ | lowercase n, tilde | | ò | ò | ò | lowercase o, grave accent | | ó | ó | ó | lowercase o, acute accent | | ô | ô | ô | lowercase o, circumflex accent | | õ | õ | õ | lowercase o, tilde | | ö | ö | ö | lowercase o, umlaut | | ÷ | ÷ | ÷ | division sign | | ø | ø | ø | lowercase o, slash | | ù | ù | ù | lowercase u, grave accent | | ú | ú | ú | lowercase u, acute accent | | û | û | û | lowercase u, circumflex accent | | | | Name Code | Number Code | Glyph | Description | | ü | ü | ü | lowercase u, umlaut | | ý | ý | ý | lowercase y, acute accent | | þ | þ | þ | lowercase thorn, Icelandic | | ÿ | ÿ | ÿ | lowercase y, umlaut |
|
|
or 
or 
or 
or
icon in your Blog | Music | Video | Calendar | Notes page (table view) with any image you like. 
Note: Use an image that has proportional width and height, preferrably a small one (
Link: