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.

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.

         

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*

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;
}

With my wanting to open up the space between my page title and the navigation bar, I was running into problems...Then along came Dantcer with a similar situation ("Nav Bar Issue with IE").  Tho her resolve was different than my objective, the process she ended up using satisfied me, giving me the illusion I wanted.  Hadn't really thought about it much except that many questions regarding "How to make a banner?" have been asked recently...soooo, here goes.

Please take into consideration that this theme is Skyline, and it is the only theme I've worked with.  I can only give you legitimate findings in this realm, but it may give you an idea of what you may be able to do with other themes.  This all came about as the result of many "trials & errors"...I shouldn't be the only one...lol  

This is the base CSS pertaining to the positioning of the "owner navigation bar" of the Skyline theme:  

div.owner_nav {   
border: none;   
margin: 0;   
height: 163px;
}
div#subnavc {   
width: auto;
}
div#subnav {   
padding: 1px;   
padding-left: 5px;   
background: none;   
background-color: #000;   
border: none;   
border-top: 1px solid #99f;   
border-bottom: 1px solid #99f;   
height: auto;
}  

To give you an idea of the dimensional difference, this is the top portion of the Skyline theme with that CSS...


UPDATE: As of the "upgrade", mid June 2008, you MUST remove all /* notes */ within the brackets, ie { } , so the height and width don't get "stripped" from the Custom CSS!

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

NOTE: MOVED FROM NOTES

Click image for larger view.

I've always wanted my welcome box separate from my tag cloud, and now I've found a way to do that by using tagged content boxes. 

First I removed the linklist displayed in the itembox. 

Then I made the background and border of the item box transparent so that only the title box would show. 

If anyone wanted to make their own box for html, all they'd have to do is pick a tag for a tagged content box.  It doesn't matter which tag you use, since the list is not visible anyway.  The only thing is that if you wanted everyone to be able to view the title box, you would have to pick a tag that has content viewable for everyone. 

After the tag is selected, choose to display subjects only (I don't know how to remove the itembox if it's in summary view).

I just figured out how to do this on my own and thought I'd share.  If someone else has already done this, I'm sorry for the repeat, but I didn't see this in a search here.  This is the css code I used for the box:

/* WELCOME BOX ON HOME PAGE */
div#mainbox_1 .itembox {
border-color: transparent;
background-color: transparent;
}

div#mainbox_1 .itembox ul.linklist { display: none; }


demitmp pointed out that the "mainbox_1" assumes that the box is on top.

My response: Yes. When I added it to the top, I had to fix a couple of numbers of other customized boxes on my homepage.

Of course this module doesn't have to be a welcome box, and it doesn't have to be at the top of the page. The preview button on the custom css page is wonderful for making sure you've got the right box number.


Oh, and it worked for IE7 too. 

EDIT» Note on how the boxes are numbered on the homepage:

1- If you have a single column, then they are numbered from top to bottom:
div#mainbox_1; div#mainbox_2; etc.

2- If you have two columns, then they are numbered left; right; left; right; etc, until you reach the last box.  Even if they don't line up exactly, they will still be numbered that way.

3- If you have a single column on top and two columns on bottom, then the top left column will be the number following the last single column box, then the top right column box will be the next number, and so on.

Hope that makes sense.

For sure it's the most asked question, besides transparency (well, at least before Custom Color and Whiteout appear), so it's a quick answer:

A short tutorial about the rail, the column that has the headshot on personal pages or the group logo in group pages.

How to get a theme up

Part 3 (Advanced)

There aren't as many screen shots in this one as most of you will have worked your way though doing a little bit of shall we say "improvements" already (colors and using a Customised theme and adjusting it)
You should know a little about CSS ..well ok how to copy paste links and where they go
And have a Photoshopping programme or image editing program that is similar

So you want your own image up on your theme huh but you want it looking a bit different to anyone elses and you want a header and an image on the side and one here and one there you do don't you?
Yes so did I
Well here is what I did ..still do
Start off with the base theme this one is Sandskrit
but you can use Black Lilly or Skyline
Just have a look at each and see which one will suit the theme you have in mind
there is a trick to it see ( giving away trade secrets here)
Each base theme has a different lets say personality, they are made by different people so have different  variations
Skyline is a wide theme and has a skinny tiled header, Black Lilly has rail images and Sandskrit and Dance with Me (based on Sandskrit) have a centered page with their own background image over the top of the main body background

Now I'm going with Sandskrit here (doesn't everyone) so bring it up ( Customize site- Choose theme)
To start off you could do this 

Use the image size to make an image the same size

But its easier to borrow the images and use them as templates,  its not stealing I'm just borrowing them not going to be using those images only using them for a template that way my image is the right size and everything else will fit

Make a new folder on your computer name it Sandskrit
Use the Sandskrit base code to get and save the images ( use the links on the base code)
Store the Sandskrit base code in with the images as well
 

Now you have your template images
Bring up the Sandscrit top image on your image editor and make a couple new layers

Here as an example I've put some bugs on the new layer

Make the template layer transparent

It looks like this (I've put a darker background layer on here as well)

Throw the template layer away on your workspace (you saved it before remember)

You end up with something like this ( this was a quickie )

Do the same with the rest of the images, even make one with a slightly reduced fill on the "bugs" so it looks transparent
Make a new folder under the Sandskrit folder you created before, save them on your computer
Upload them to Multiply
Go into the album you created for the new theme images you've just uploaded and click Zoom on the larger ones to grab the url
That url is what you replace on the default Sandskrit theme ( the yellow sand sea shell image for the new one you just made)
Do the same for the rest of the images

Use the other tutorials on Multiply Design to change transparency and adjust things like Guestbooks and replies for Calendar and popups next but start with images and colours get those right and you can do anything

This was part 3 in a series of 3 tutorials on "how to get a theme up"

How to get a theme up- Part 1
How to get a theme up - Part 2

 

It seems that there is a lot of misunderstanding about how CSS works, so I will try to clarify some points.

All CSS code is like this:
selector {
%elements
}

selector is the name of the class or id used in your page, for instance itembox is name of the content boxes on your main page, etc.

The %elements are the properties of the selector, like color, borders, etc.

So, for instance, if I want to make my itembox text white and use a dashed green border, I would add this code to the end of my Custom CSS:
.itembox {
color: #fff;
border: dashed 1px green;
}

Why add the code above to the end of my Custom CSS? Because the last code in your CSS (for the same %element) is the one that will be displayed on your page.

Let's makes things clearer. Suppose that my CSS looks like this:

body {
	background: none;
	background-color: #f4f6f8;
	width: auto;
}
div.bodywrap {
	background-color: #fff;
}
table#content_wrapper {
	width: 840px;
	margin: 0 auto;
}
a, a:visited, a:link { color: #0b5eb4; }
div.owner_nav b.br, div.owner_nav b.bl {
    bottom: -1px;
}
.railstart {
	margin: -105px -1px 0 -1px;
	height: 130px;
	background-color: #558eca;
	border: 1px solid #36a;
	border-bottom: none;
	position: relative;
}

and at some point I decide to use an image as the background for body, what should I do? I have two options:

1) Go back and edit the beginning of the code, like this:

body {
	background: url(http://i18.tinypic.com/1440gar.jpg);
	background-color: #f4f6f8;
	width: auto;
}
div.bodywrap {
	background-color: #fff;
}
table#content_wrapper {
	width: 840px;
	margin: 0 auto;
}
a, a:visited, a:link { color: #0b5eb4; }
div.owner_nav b.br, div.owner_nav b.bl {
    bottom: -1px;
}
.railstart {
	margin: -105px -1px 0 -1px;
	height: 130px;
	background-color: #558eca;
	border: 1px solid #36a;
	border-bottom: none;
	position: relative;
}

2) Simply add this code to the end of my Custom CSS, after all the other code:

body {
background: url(http://i18.tinypic.com/1440gar.jpg);
}

I don't need to repeat all the other stuff, because I am not changing them, I just want to change the background image.

As a last reminder, always double-check your code for errors. The most commons are:

- missing or extra closing "}": they are always in pairs, if you open one you have to close it. Never leave an extra one if you delete something.

- missing ";" for %elements: each %element must end with a semi-colon.

- missing or extra spaces: sometimes you have to use spaces, like this:
background:url(http://i18.tinypic.com/1440gar.jpg) center;
sometimes you can't use spaces, like this:
border: solid 1px green;
sometimes it's optional.


If you cannot find the selector you want to change in the base theme CSS, try ones of these (there are the 'generic' CSS's that are loaded before the theme CSS):

http://multiply.com/style/site/
http://multiply.com/style/local/

Hope this helps. If you have any question, feel free to ask.

NOTE:  RECENT UPGRADE REQUIRES YOU DO THIS FIRST IF YOU HAVE ANY FEATURE OR THEME RELATED PROBLEMS.






Sometimes referred to as "temporary internet files & cookies" in Internet Explorer, or cache files in Firefox...... (and other browsers may have them named something else)

.... They are all temporary files that your computer and/or web browser uses and accumulates over your browsing and computing history. This accumulation can cause a multitude of errors, both on your computer and online.

They serve a purpose to speed up your computer and browsing experience, by making web pages you frequent come up faster (at first).. but as these files fill up, they then will slow you down and can even cause browser crashes.

They can cause a multitude of browsing errors, but I will refer specifically to Multiply. They can cause web pages not to update properly (message board for instance) because your browser grabs an old page instead of bringing up an updated page. They can cause uploading or viewing of images, audio or video files to stall or not show, or just not happen. They can prevent you from downloading. They can even cause the "customize site" button not to show you the yellow drop down customization options. Just about every problem you may have on Multiply can many times be fixed by simply clearing these temporary files out!

Your computer or browser has default settings for the size of these files, that are adjustable upwards. However the larger you adjust these settings, the slower and more bogged down your computer will become before the inevitable much needed clean out.

There are several ways to do this cleaning, depending on your browser. I'll address IE and Firefox (since they are the ones I use)

In IE, while NOT at Multiply, go to Tools, Internet Options, and in the temporary internet section of that window, delete cookies and files. That's it. (If you go into settings in that same window you can adjust your temp files size)

In Firefox, while NOT at Multiply, go to tools, options, advanced tab.. and clear cache. (I raised my default 50 in Firefox to 100 mb and Firefox works better for me using that setting)

Your computer also caches temporary windows files (for pc users) Rebooting clears many of those out so for severe errors I usually suggest rebooting (though I rarely have to do it more than once a day AS LONG as I clean my temp files regularly)

Reboot means to shut down your computer normally, from the start button, using the restart option. When you close your computer down, it dumps windows temporary cache files that it stores and can't be cleaned while your computer is on. This speeds up your computer considerably also, which can also speed up browsing.

One other option that I PREFER, which clears ALL of my IE temporary internet files, cookies, Firefox cache files as well as my computer cache files... and all with one click.. is a temporary file manager.

I personally use ccleaner which is free from ccleaner.com and the only one I recommend to novice computer users because of ease of use. (Uncheck the install toolbar sponsor when installing) I'm sure there are other free temp file cleaners you can google for also, though ccleaner does come with extra tools you can use.

So regardless of the problem you may be having on Multiply, always clear these temp files first by one of the methods listed above. If you find you still have a problem and post about it, let us know that you have already done this. Most Multiply problems are not Multiply problems but are actually computer problems. We have found that for many problems posted here, this is the first thing we have to recommend, and then wait for your to do this, reboot, come back, check your problem, and then come back and tell us if all is well. And most of the time, this works!!

Unfortunately, the old thread about this was deleted. So I decided to create this short tutorial to help users personalize their navigation menu (the one with Home, Blog, Photos, etc...). This can be used to personalize it, translate it and even add more items to the menu.

1) Add this code to the end of your Custom CSS to disable the default menu:

#subnav { display:none; }


2) copy the subnavc and subnav sections in your Custom CSS and paste them in the end, replacing their names with pmenuc and pmenu (if your Custom CSS code does not have these sections, maybe you will have to look at the CSS code for the base theme you chose). For example:

div#pmenuc {
width: auto;
}
div#pmenu {
padding: 1px 0 0 20px;
border: none;
background: none;
height: auto;
}


3) Add this code to Your Page Title (you can go to your main page and click on Customize My Site link and then click on Edit in your Page Title, or use this page) :

<div id='pmenuc'><div id='pmenu'><div class='topt'><a class='topt' href='/'>Home</a><a class='topt' href='/journal'>Blog</a><a class='topt' href='/photos'>Photos</a><a class='topt' href='/video'>Video</a><a class='topt' href='/music'>Music</a><a class='topt' href='/calendar'>Calendar</a><a class='topt' href='/reviews'>Reviews</a><a class='topt' href='/links'>Links</a></div><br clear='left'><div style='height: 0px;'><!-- --></div></div></div>

PS: make sure it all goes in one line, with no line breaks.


If you have other sections than the above, just change to code to reflect your actual site sections. If you want to translate or change the names in the menu, just replace the words in red with the ones you want. You can add other items before </div><br clear='left'>. For example, if you want to add a link to a Tagged box that you've created with the tag 'tutorials', add this:

<a class='topt' href='/tag/tutorials'>Tutorials</a>

or if you want a link to your Notes sections (hint, hint... ):

<a class='topt' href='/notes'>Notes</a>


Easy, isn't it? Of course, you may want to adjust the pmenu and/or pmenu blocks in your CSS to fit your needs. You can even use images to create your own menu. Enjoy!


Acknowledgments: kyllian
A copy of the original thread can be found here