The first thing one have to do in order to customize the navigation menu and/or Page Title is to understand its structure:

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.com

The 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.htm

Once 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.

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.

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:

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...

This post is about how to modify the photo albums on our pages. First of all I need to point out 2 important facts:

• The codes have been tested several times on Skyline Base Theme and they work. It may or may not work on other base themes.
  

• It is working well on Firefox, (I was informed that it is also working well) on Safari and on Internet Explorer 7. It is not working well on IE6 though. With these codes, on IE6, these are how the photo albums look like on the Home page (LEFT) and on the Photos page (RIGHT):

         

[Note 1: Having said point 1; all screen shots on this post will be the ones from Skyline Base theme]




Previous Discussions

There have been several discussions on this topic and from all the threads in the past, these 2 are the ones that inspired me:

1. a discussion on how to add borders on the photo albums ---> HERE
   
2. a discussion on how to align the albums & their thumbnail views ---> HERE

As you can see there, different codes were passed and I'm grateful for that. Thank you to them who were involved in those discussions.

[Note 2: Some of the CSS codes used here are based on the ones from those previous threads. I only added the position]




The Purpose

The purpose of this post is to talk about how to have all the photo albums on our pages aligned well - in rows and columns. As we all know, there are 2 parts of the page where we can find them:

1. Albums on the Home page
2. Albums on the Photos page - Thumbnail View
   

The Modification

I will do a direct approach: screen shots + the CSS codes + notes.

Here we go...




         






         


The blocks of CSS codes used to do this 1st modification are:
.album {
background-color: #000000;
background-image: none;
border: 5px groove #000000;
color: #ECE5B6;
font-size:12px;
text-align: center;
}
.album img {
border:none;
}

[Note 3: There are 2 selectors on the blocks of CSS codes; ".album" and ".album img" - the 1st one is for the entire album and the 2nd one is for the image we chose as its cover]

[Note 4: The properties are the ones typed in black and there are other properties to be added on the code - it all depends on what we want to modify on the album]

[Note 5: The values are the ones typed in blue - they can be changed as we want as long as we still use the valid codes]





         

The blocks of CSS codes used to do this 2nd modification are:
.album {
position: relative;          
left: 20px;
top: 20px;
width: 150px;
height: 170px;
margin:10px 10px 10px 10px;
}
.album img {
max-width: 135px;
max-height: 100px;
padding: 5px 0 5px 0;
}

[Note 6: As you can see, they are still using the same selectors. The differences are, on the 2nd modification - I emphasized on changing the size and position of both the albums and the image used as their covers. By controlling the size and position of them, I was able to put them on the right spot - aligned with one another. Try playing with the values (the ones in blue) to get the look you want to have for the photo albums on your page]

Again, left links will give you codes and tutorials, so just scroll down !

If you have used one of my themes you may have noticed that when you click on Customise My Site and then on the Edit links (on the yellow strips) the box that pops up is not white.
It matches the theme in most cases
looks similar to this (some of mine are completly dark no white at all)
click to view larger


Now there is a trick to that one, the image I used on that particular one is this


image is full size

See how it repeats on either side, its actually a repeating tile but don't worry too much about that as you can put almost any small seamless tiled image in the code and it will work .
Try it yourself, an image that is opposite to theme background color will look nicer eg: gold and black background, or light pink on purple even stripes or something as you want it to show, no good placing an image in there if it doesn't show up

All it is , is top, bottom, left and right images and / or color fairly easy when you have the code

Now you  want the code don't you ...
Pop up edit box from "Musicale Theme"
/*Pop up box upon edit*/
td.popup_top {
height: 43px;
background-image:url(http://tinyurl.com/2oeapk);
}
td.popup_bottom {
height: 15px;
background-image:url(http://tinyurl.com/2oeapk);
}
td.popup_left {
width: 14px;
background-image:url(http://tinyurl.com/2oeapk);
}
td.popup_right {
width: 15px;
background-image:url(http://tinyurl.com/2oeapk);
}
td.popup_body { /*<--- this can be an image as well*/
background-color: #000;
color: #eae0ca;
}
b.popup_top_left {
position: absolute;
line-height: 1px;
font-size: 1px;
top: -1px;
left: -1px;
background-position: top left;
display: inline;
background-position: top left;
background-image:url(http://tinyurl.com/2oeapk);
}
b.popup_top_right {
display: inline;
background-position: top right;
background-image:url(http://tinyurl.com/2oeapk);
height: 43px;
width: 15px;
}
b.popup_bottom_right {
position: absolute;
line-height: 1px;
font-size: 1px;
bottom: -1px;
right: -1px;
background-position: bottom right;
display: inline;
background-image:url(http://tinyurl.com/2oeapk);
height: 15px;
width: 15px;
}
b.popup_bottom_left {
position: absolute;
line-height: 1px;
font-size: 1px;
bottom: -1px;
left: -1px;
background-position: bottom left;
display: inline;
background-image:url(http://tinyurl.com/2oeapk);
height: 15px;
width: 14px;
}

Hints::
Remember allways validate your code and place any code you do add as an "extra" onto the bottom of your CSS or replace, you don't need to double up your codes.
Font colors, make sure your font colors are readable, links and text on this will flow over from rest of theme, so use the same or similar images and color to rest of theme
Oh and you have to save too see it, you can't see it on "preview" mode

Thought I might share this, it is something that most can't see but does look nicer when it matches the theme from your side

This post is about how to replace these quote images of our replies:

              &           
quote-start                 quote-end
[Note 1: Both images have the same size 24x13 px]



Credits:

• First of all, thanks to them who talked about this on the replies HERE. The conclusion over there was: It is possible to change the quote images.
• After somebody asked it on a note HERE, a fun quest was started and ended with a happy discovery of the code. Many thanks to Bobby who got it right.

[Note 2: This is a result of a team work - I'm merely sharing it]



Examples:



A quote box with Multiply quote images.



A quote box with 1 single heart image replacing them both.



A quote box with 2 different images replacing the Multiply quote images
A diamond to replace the quote-start and a heart to replace the quote-end

[Note 3: Yes, it is possible to use different images. The size of the heart image used is 15X15 px and the diamond is 16X16 px]



The Steps

Step by step on how to apply the CSS code:

1. Pick the image you want to replace the quote images from Multiply. Use a small one.
2. Upload your new image(s) into one of your Multiply albums and get the URL.
3. Insert the URL of the image on this code (different URLs for different images):

.quotet img {
display: none;
}
.quotet {
background: transparent url(URL 1) no-repeat left 27px scroll;
}
.quotet i {
padding-top: -5px;
padding-right: 20px;
padding-left: 15px;
background: transparent url(URL 2) no-repeat right bottom scroll;
}

4. Copy the code.
5. Go to your Custom CSS page and paste the code at the bottom of all your CSS codes.
6. You can click 'Preview' to see the result if you have a quote on your homepage guest book - otherwise click 'Save'.
7. Go back to the code for some necessary adjustments.

[Note 4: In the block of CSS Code - URL 1 is the URL of the quote-start image and URL 2 is  the URL of the quote-end image]

[Note 5: In the last step; by adjustment I mean, change the padding values if your image is not positioned corrrectly. They depend on the size of your image and may also depend on the size of the fonts on your quote]



References:

• How to get the URL of an image saved on Multiply album ---> HERE
• About padding and all its glory ---> HERE
• Another way to replace the Quote Images with HTML code ---> HERE

Good luck! :-)

Between Hiding footer credits, How do I add a footer to my page?, and another that I can't put my finger on for the life of me (been cleaning house...lol), I came up with this CSS for adding a personal "Created by - Owned by - Designed by - Whatever" logo to the footer.  

Be advised that this has been resolved utilizing the Skyline theme (Wide).  Some adjustments may be needed for others...I don't know for sure as I've not dealt with any ot them...Sorry!   

Pertinent commands are bolded:  

/*FOOTER - with logo below footer*/
div#ownedfooter {
margin: 0px;
padding: 5px 0px 5px 0px;
/*I set the width to be able to center logo & footer to body of theme, not page*/
/*If you want logo & footer to be centered on page, change to " width: auto; "*/
width: 790px;
border: none;
/*Only changes MP logo*/
font-size: 12px;
color: #C8DDEE;
/*Height must be adjusted to allow for your image/logo (I used a 153x51px image/logo)*/
height: 60px;
background-color: transparent;
background: url(Your image/logo URL) no-repeat bottom center;
background-repeat: no-repeat;
text-align: center;
}

This is a very simple short starter CSS code, this code will change your
 main background, site title (your name),main boxes on page, links, reply boxes, headshot backgrounds and quoted replies.
It will not change your entire page as its not a full base code but most of it will change using this code only
I've made this up as a starter pack for those of you learning CSS
for those who don't know the colors...  #fff is white #000 is black all you need to do is change colors and put in your own image links

This is a generic code once images are placed in it will work for most base themes,some elements will show but this is a starter ...its basically what I started with and yes this is all there was
Just follow the /*notations*/ they show which "bit" does what

/*Starter CSS for Multiply*/
/*change transparent to a color value for color*/

/*Entire Page Background, font style and text*/
body{
background: #fff;/*page background color at start load*/
background: url(place image link here);/*image link can be placed here*/
background-attachment: fixed;/*background stays when page moves*/
color: #fff;/*main text color over entire page*/
font-weight:bold;/*style of text over entire page*/
font-family: verdana, ariel,times;/*font over entire page*/
font-size:14px;/*size of text over entire page*/
}
/*All links on page*/
a, a:visited, a:link { color: #F9CE0D; } /*main link color*/
a, a:link, a:visited, a:active { color: #5E5D5B; } /*visited link color*/
a:hover { color: #ea6618; /*hover or mouseover link color*/
}

/*page title == YOUR name*/
h1#page_owner_title {
font-size: 35px;/*Xtra lge text*/
background-color: transparent;/*no color*/
background-image:none;/*no image*/
color: #000; /*black color*/
font-weight: bold;
font-family: verdana, ariel,times;/*font*/
text-align: left ;/*can be right,left or center*/
border: 0px solid #fff;/*no border-- change number to show border*/
}

/*ALL boxes on page*/
.itembox {
border: 0px solid #fff;/*no border-- change number to show border*/
overflow: visible;
background-image: none;
background-color: transparent;/*no color*/
color: #C19953;
background: url(place image link here);/*image link can be placed here*/
}

/*The REply BoX*/
.replybox {
color: #fff;/*white text color*/
background-image:none;/*no background image*/
background-color:#000; /*black background color*/
border:0px solid #000;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}
.replybodytext {
color: #fff;/*white text color*/
font-size:13px;/*font size is medium*/
}
/*quoted replies*/
.quotet {
color: #000;/*black text color*/
background-image:none;/*no background image*/
background-color:#fff; /*white background color*/
border: 0px solid #fff;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}

/* Background for Contacts and groups logos+ headshots*/
.contactbox {
color: #fff;/*white text color*/
background-image:none; /*no background image*/
background-color: transparent;/*transparent background*/
border:0px solid #000;/*no border-- change number to show border*/
background: url(place image link here);/*image link can be placed here*/
}

Of course if you need or want more everything you need is here on the main page of this group, don't ask us to make your CSS code up for you or make you a theme because well I've just given you a start on making it yourself.
Want a longer CSS code to work from go grab a base code from here

Just as the title says. Very in - depth but easy to understand tutorial about "float".

A quick tip: this code will avoid page distortion due to wide images, long URLs, text, etc. It will add a horizontal scroll-bar if the post/reply is wider than the normal width for your page. Simply add it to the end of your Custom CSS:

/* Add horizontal scrollbars to replies/posts too wide */
.replybodytext, .itembox .dummy, .itembox .bodytext {
overflow-x: auto;
}

The first selector is for replies, the second one for generic posts (blogs, etc) and the last one for photo album descriptions.

Enjoy!

It seems that the Guestbook is an important part of the page for many people, and they want to customize it differently from the rest of the page. Actually, it's very easy to do this, and that's what I will explain in this post.

The Guestbook can be displayed in two ways:
- the one on your main page is placed inside a div with id home_guestbook;
- the Guestbook page (Your_UserID.multiply.com/guestbook), where the replies are inside a div with a class guestbook.


In order to change the properties in both places, you need to use both selectors. So, if you want to change the font size in both places, you can use this code in your Custom CSS:

#home_guestbook, .guestbook {
font-size: 16px;
}


But if you want to change the textarea only in the Guestbook on your main page, simply add #home_guestbook before the textarea selector, like this:

color: white;
}


If you want ro remove the message "NNN comments were deleted from this guestbook" you can add this code to the end of your Custom CSS (it won't affect other posts):

.guestbook .replydeleted { display: none; }


If you need more info about the reply boxes, see this post:
http://multiplydesign.multiply.com/journal/item/64/Changing_CommentsReplies_Boxes

For a crash course about CSS:
http://multiplydesign.multiply.com/journal/item/87/CSS_Basics_-_Pt._1

And for a general FAQ about how to fix common problems in yur Guestbook and other trics:
http://multiplydesign.multiply.com/journal/item/41/Guestbook_FAQ

Have fun! 

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.

Polls, how many of you post polls like this?
How many of you forget to change the text colour in the poll when you modify the CSS?
Don't answer its possibly a lot

You forgot the poll right
Well to change it
use this 
/*poll -questions and answers together*/
.infobox {background-color: #222222;}
div#poll_answers div.infobox, div#poll_questions div.infobox
{background-color: #ffffff;}

or
/*poll - questions and answers separately*/
.infobox {background-color: #222222;}
div#poll_answers {color: #000000;}
div#poll_questions {color: #000000;}

Click on "View As Another User".  Notice the links at the top.

This will customize those links for your visitors!
Put your own color, font, etc. (I've used white)



/*another user view*/

div.header h3 {
color:#FFFFFF;
font-weight: bold;
}

.header .globalnav ul.gnopt a, .header .globalnav a.select {
color:#FFFFFF;
font-weight: bold;
}

When done, check it by clicking on "Another User". 


EDIT:  Sandskrit Theme appears to need this code in the place of the first one:

div.header table.globalnav h3 {
color:#776655;
}

If more edits are needed I will add them.  So far, this is the only one I'm aware of.