The table view
Now I've chosen Skyline here to show how tables can be changed which by default is like this
Now of course some other theme bases are white by default so of course if you have white links everything disappears and the table view just looks horrible

Well don't worry the table view like most other things can be changed
"But how? you say , well quite easily actually
lets start with a border the table I'll change that to orange  so you can see it
.tablediv1 {background-color:#FC9A05;}


and then change the main background color , pink as you can see
.tablediv1 tr{background-color:#F305FC;}

then the top part of the table the "header" make that pink as well
.tablediv1 th{background-color:#F305FC;}

That doesn't look very good does it?
needs a font color and a hover color
so make the font color black
.tablediv1 th{
background-color:#F305FC; color:#000;}
and add a hover color
.tablediv1 tr:hover{background-color:#1346A5;}

the hover is blue there it's a bit difficult to show you a hover color on a static image

But wait there's more , you want the text on the table easily read don't you well you need to add this as well
.bodysummary{color:#eee;}
Don't go away yet there is even more available .. no not a set of seak knives but an extra for those of you who have groups try this one on your group
.adminbg{
background-color: #F305FC; color:#F9FC05;}
You might want to change the colors though unless you like pink with yellow text

And even more for those who like more and I know you do, add a background image on hover if you like or background image and plain on hover  or even opaque the table image
What you can't do is make tables transparent using this
.tablediv1 tr{background-color:transparent;
I've crossed it out as it will not work the table will be white (trust me I know it turns white )

Here is the code for the simple table view above , play with this yourself and see what you come up with
/*border*/
.tablediv1 {background-color:#FC9A05;}
/*main*/
.tablediv1 tr{background-color:#F305FC;}
/*top*/
.tablediv1 th{background-color:#F305FC;
color:#000;
}
/*text*/
.bodysummary{
color:#eee;
}
/*hover*/
.tablediv1 th:hover{background-color:#1346A5;
color:#000;
}
.tablediv1 tr:hover{background-color:#1346A5;
}
/*for groups -- admin table view*/
.adminbg{
background-color: #F305FC; color:#F9FC05;
}

This tutorial of course was made up for Skyline, the same code works on almost all the base themes but you may have to add
background-image:none on some bases  as they have a background image on table view

As we have this size restriction for free accounts now I thought I would try a work around.
the latest theme I've made hasn't used any images over the 400x400 pixel size limitation
the largest size image is the footer its 399x 200 pixels in diameter and 11kb in file size
largest file size 62KB (blu-tile 379x382 pixels) a larger file size than the animation!
The only image in the album for the theme that is larger than 400x400 is the screenshot 508x1179 which is only 48KB in file size actually a smaller file size than "blu-tile"

This just proves that it can be done a theme can be made and hosted on Multiply without fear of images being deleted in 30 days as not one of the images are classified as "high resolution"

How I managed this ..
First and hardest part think of images that could be used , didn't want to go large of course they all had to be under the 400x400 so I went for a simple image of a fish a purple cartoon fish just to have a little fun with it as well
I opened up Adobe Photoshop (if you don't have it you can use what you have) and brought up the image cut the background color off and saved it as a gif, this way it had a transparent background
I also used Image Magic as I've got an older Adobe Photoshop to make an animation of the same fish and saved that as a smaller image size
I used the bubbles from the image to make some dots to go on the theme as well and made quote ends and a "dimples" too match the colors on the fish.
Now backgrounds of course they had to be seamlessly tiled so using the seamless tile filter that I have I made a purple background and a blue one
And just to finish off a fish cursor of course a purple one and a yellow one for hover both saved as a gif.

Where do the images go...
The purple background of course went in the CSS under the main body background and in the popups both edit boxes and profile, it also went into the table view so the background on "view groups and contacts" was the same as the main background and table view on "view as table" was the same as well
The blue one that went in as replybox odd, gives a nice border effect that way and on the top header of table view

The main fishy header of course is small so I placed that align right, could go center or left but I like it on the right

The cursors, dimples and quote ends of course they went in as well wont explain how to do that you can find how to do that by searching Multiply Design

The fishy animation went in replybox textarea is a bit big for there actually might need to grab hold of the dimples and move them down so it can be seen but left it that size so it could go on as the header image instead

Oh yes the bubbles I made some bubble dots , those of course go in itemboxsub for the larger one and the smaller on the main link background (View All links) I also used the same larger bubble dot as a spacer between post and comments  used repeat-x there so it went all the way accross same as I did in itemboxsub

Now of course I changed colors on a few things as well but we are talking images here not colors so wont go into that
Hint: I use the color picker on Adobe to pick colors off the images

So there you go you not only now know how to make a theme within the size limit if you don't go premium but now know how I go about making a theme as well
This theme hasn't even had the links made into tiny urls all links are same as they are on Multiply

Here is the link to the actual theme code the small images are in that album

This particular site W3 Schools  is a mine of information about CSS, its got everything you need, all the different options are on the left hand side so just choose the one you want (or use the search function)
Same site has other things as well like learn HTML and XHTML

Try one of these for CSS
Introduction
What is CSS
How to change text
Text
How to set Opacity/Transparency
Opacity
Changing colors
Color Values

Now each one of those links (except colors) has a "Try it editor"
So say you wanted to try out setting different borders on each side, click the link on the Borders page and a new page will open looks like this
The CSS is at the top on the left , just change some values and click the button [Edit the text and click me]
The Try it editor has HTML try out as well, so you can play with that too if you want

An interesting one to try is Outline have a play with that one and save the code you make so you can use it when things works again

W3Schools is a learning tool it wont give you codes straight out you have to learn them so you can do it

New group for the frustrated theme designers, no need to stop designing or put away your image editing prog.
ANY image editor can be used any skill level is welcome, don't need to be good just need too have a go!

sorry about the theme being default as you know can't do anything about it at the moment

Group may be set on members only viewing but you can still see the theme and yes it IS a Skyline theme
basically its been done like this
instead of using the default Skyline code of this
div#page_start {
padding:10px 10px 0;
}

this
div#page_start {
padding: 10px 60px 0 60px;
}
is used instead
and yes that works on any base theme just adjust the padding to suit, you could make a wide Avlack if you wanted too

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 has possibly been posted here already ..should have been anyway
I know of a few versions of this post (one is mine)
The links on it are very handy indeed

Apart from other strange things today (don't ask it was weird) I've been doing this
Its a CSS code that will work on 13 base themes possibly more I didn't try all of them
Did try it out on Dance With Me - Sandskrit - Japanese Minimalist - Skyline - Black Lilly - Outburst- Avlack - Retro - Melon -Myknos - Newspaper - Blue Slate - Classic
Same code different base its basically a base default CSS code no padding, no margins, the code looks strange but it does work at least I hope so anyway
I know you will tell me if it doesn't
Tell me what you think about it and I don't mean the color either I mean the coding

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

I was wondering why a lot of theme designers don't make themes on Black Lilly, Outburst and Petals and you know I came to the conculusion its the footer credits
Well they can disapear easy enough

The footer credit on Outburst says
"Template design - Copyright © 2005 Chris Vincent All rights reserved."
Now I checked the link it doesn't work any more and really you've designed the theme you've made so why have it there right
It looks like this on default


There is a way of getting rid of it like this


Can you see what I've done?
I made the Multiply links a grey color and made my footer the same grey color , made the line height a bit more so they were further apart and **pooof** gone , the line of text is still there but it just can't be seen
my footer is 100px by 760px the grey part #ACACAC
Links and font color on footer #ACACAC

Here is the adjusted code ..change too same colors as your footer

div#ownedfooter {
margin: 0 auto;
line-height: 2em;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
width: 756px;
border: 5px solid #E4E3E3;
border-top: none;
font-size: 10px;
color: #ACACAC;
background-color: #eeeeee;
height:110px;
text-align: bottom center;
background:url(image link goes here)no-repeat center;
}
div#ownedfooter a{color: #ACACAC;font-size: 10px;text-align: bottom center;}
div#ownedfooter a, div#ownedfooter a:visited, div#ownedfooter a:link{ color:#ACACAC;}

So there you go now you have no reason not to design a theme on Black Lilly, Petals, Outburst or any other theme base with that line of text on the footer

Note: this obviously does not work if your footer has transparency and no you can't put your own name there either that "template design by" is hard coded into the HTML..hiding it is the easiest way.

The top header icons the letter,house and people icons


are hard coded in HTML even though I can make them disapear
by using this code
li.gnopt a img, li.gnoptsel a img { display: none; }
looks like this


I wanted differnt ones because I didn't want them plain, thing is its a bit tricky to replace them
I did it though

See I replaced them with donuts ..clever huh

A very small image can be placed there but and here is the trick part I didn't actually replace the images at all, the image is a background on the link its self so to get them in the right places I just adjusted the width a little and aligned the image left
li.gnopt, li.gnoptsel {
background: url(http://tinyurl.com/6x9ktg)no-repeat top left;width:75px;}
That is why one or two of them are a little "off" ..should have used a smaller image I think
worked though and a hover image can be used as well
Of course the entire link background could be  an image  but I liked this effect
a small image aligned left with the width adjusted will replace the top header icons

Fonts

Here are a few different fonts I use in my themes I've made them into images so you can see them (font text test is in that font)
 

Mosh pitfont text test

francinemk font text test

bell bottom laser font text test

times new roman font text test

Now I've put the font name underneath the image, but unless you have the font installed you will possibly see them all as times new roman
the bottom one is times new roman
To change font face in CSS its fairly easy if you want it all over
body {font-family: times new roman;} that will change font everywhere
In certain parts say page title h1#page_owner_title {font-family: francinemk;} that will make your page title the one font and everywhere else a different one

Remember only you will see the font if its different to the "standard" windows fonts (could you see the fonts above? )
So and here's a tip as there are a few windows fonts get one close to what you have already  say I used bell bottom lazer as my main all over font
body {font-family: bellbottomlazer;} you can't see it, the one closest to it is comic sans so if I do this
body {font-family: bellbottomlazer, Comic Sans MS} then you will see comic sans
It works this way your computer sees the first one on the list it recognizes ,it knows comic sans so it goes "Yay I know that one I'll show the font as that one"

Oh and don't forget some fonts come up bigger than others I've made those all the same size so you  can see them but both francinemk and Mosh Pit are small sized fonts
the times new roman is font-size:30px those are something like 40px.
Others are BIG I used one once called brandegoris even on size 12 it came out huge had to stop using it the font size of the actual font was messing my page alignment up

Just thought I'd throw this in seeing as folks were asking :-D

 

I'll use Skyline here as an example all base themes are the same of course they all have the white replies and most have an image in there.

That looks all white and bland so change it up
Give the replybox a background and color
.replybox
{
color: #DCE2EC;
background-image:none:
background-color:black;}


There that's better but what about the quoted reply?
I'll change it to green

whoops what happened there?
Default Skyline quoted reply has a white background image so I could put background-image:none;


but that's boring how about an image



needs a bit more I think how about a dotted border



Right that's the quoted reply done now how about something really fun
every second reply a different color with a green border



and of course the part where you type how about hot pink ...well why not.



Can't forget replybx read either so when I'd finished I ended up with a CSS code that looked like this
/*RePLy BoX*/
.replybox
{
color: #DCE2EC;
background-image:none:
background-color:black;}

/*quoted reply*/
.quotet
{
background-color: green;
background:url(http://tinyurl.com/47ubxc);
color: #fff;
border:5px dotted red;}

/*every second reply*/
.replyboxodd {
border: 2px solid green;
background-color: #0B3683;
padding: 10px;
color: #99f;
background-image:none;}
/*typing box*/
.replybox textarea
{
background-color: #D10AC5;}
/*replybox read*/
.replyboxread
{
color: #DCE2EC;
background-image:none:
background-color:black;
}

So there you go, don't forget though if you change backgrounds on anything make sure you change the font color too.
Also if you don't specify a border or color the box (or whatever part of the code you change) will be "default"  so its background-image:none; background-color:transparent; or border:solid 0px #000;
(borders I should write another tutorial on those too)

I was going to post them all up here but when I tried all I got was "disc" but they do work here on Multiply in CSS I know I've put them on my themes ...they just don't want to in HTML so I can't show you , you will have to go look instead
and yes you can use an image like this
.railbody ul li {list-style-image: url(http://tinyurl.com/6l9bop);}
.railbody ul li:hover { list-style-image: url(http://tinyurl.com/5cgmmj);}
those are subtly different .. one is lighter than the other

If you use an image make sure its small 16x16px max otherwise the alignment of the list will go all over the place

This should work if it doesn't you will tell me.. I know you will
Link on bottom will return you to your Inbox I couldn't link it back to here as I hadn't posted this yet

Draw out a ruler to get the pixel width and height of any elements on a webpage.
Never have to guess at a size again
For example the length between the H on Home and the s on Links here on this group is 366px
The search input box is 149px wide