Now that we have a new base theme, and no one has tackled all of  the ins and outs of customizing this base theme, perhaps a Design challenge would be in order.  Not because we are looking for customized themes here (we aren't) but we are looking for any information about this new theme that would help everyone else.

 Designing this new base theme will reveal more information about it.  So anyone interested in doing so, feel free to post a link in this thread to your creation along with any insights and challenges you find with customizing this theme!

There's no time limit, and no prize and no winner.  lol  Just let us know what you did or needed to do to make what you already know work for this base theme!



HERE is the theme's appearance with it's Base CSS. 

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!

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

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.

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:

Every base theme done in the same way
they will all look the same ..well as same as I can get them
This link up there ^^ is part 1
part 2 is here The Lens Flare Project part 2
And yes I am quite mad so far I've done Avlack, Sandskrit , Retro, Melon ,Skyline ,Black Lilly, Newspaper, Blue Slate and Andros (in CSS) via Custom Colors.

Still working on Blocks , Base Camp , Myknos, Oasis and Clean

Why? Because I can and to see if it can be done...its an interesting experiment anyway

I thought this would be a good "discussion" topic because everyone has to start with one before customization begins.  And for new users not yet settled in on one yet, this might give some insight as to why certain base themes are chosen to work with.  (Pros & Cons).  Also, theme designers or those testing and working with different base themes will probably have much more to comment on about the different choices.

I personally chose the Skyline Theme because I wanted a wide width theme, after looking at all of them.  I thought that all of that wasted space on the fixed width themes was just that.  So I liked the wider look. 

I liked that I could use the content boxes both "one under another" as well as "side by side", or in combination.  I also originally liked the darker look, because I like the "POP" factor of darker themes (and have since stayed with the darker backgrounds when customizing). 

And I've recently found out that I like that the code I use for transparency for the Calendar WORKS.  (And doesn't seem to work well in other fixed width themes).  Seems that a lot of code works easier with this theme.

I really don't have any issues with this base theme at all.

So what made YOU choose the base theme you started with and/or are using now?  What do you like about it, and what do you think might be a customization weakness with it?  Those that test and customize different base themes, what are your opinions on one or several?

To get a closer look at each base theme without changing yet, CLICK HERE , and then click on each image.  The CSS that each uses now is included.

How to get a theme up

Part 1 (Beginners)

We will start with the simplest way and that's Custom Colors
No CSS involved all you need is an image for your background
You start off on Multiply with the Clean theme 
 
which is fairly boring its all white and grey, you want something a bit more colorful than that so the easiest way is to go to the Choose a theme pageand choose Custom Colors its the third one across
 
you will end up on this page the Choose Colors page.
 
Its easy, this is all you do upload an image from your computer by using "browse" and then preview it , looks ok does it? No?
Ok well try changing the colors around a little or going transparent as I've done here

until you end up with something like this

what does that look like actually on the page ?
It looks like this  don't like it this way ?
Try the other option Andros which looks like this

This is the simplest way to get a background up on your page
A seamless tile like I've used as an example works best this is the one I used and yes it really is that size, the rest of the images here are thumbnails that image is FULL SIZED
Here is a bit of a plug for a group Easy Themes all that group has is tiles and images for use on themes no codes just images

So now you know how to do a simple theme ...you want more don't you never satisfied ..ok ok Part 2  will be installing a customised CSS theme
 

How to get a theme up - part 2(Intermediate)
How to get a theme up - Part 3(Advanced)

In this series I will try to explain the CSS basics. It's hard to discuss all the properties and options in just one tutorial, so I will add more posts eventually. Make sure you also check out CSS Logics and Multiply Design 101 in the group for additional info.

Let's start with the box model. CSS uses a very simple box model when you can control the dimensions, padding, border and margin. From the W3.org website:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge

The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge

The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

So basically each selector used in the CSS code refers to a box on your page. Boxes can be put one over the another, moved and so on. Besides it's dimensions, you can also change its position, either relative to other boxes or make it absolute so you can position it using X (horizontal) and Y (vertical) coordinates like the ones you use in a Mathematics graph.

Below are the most common %elements used in boxes and possibles values (you can search on the internet for more info using something like 'css background' etc):


dimensions
To configure a box size, you can use numerical values (100px, 480px, etc), auto or percentage values with:
- height: Sets the height
- line-height: Sets the distance between lines
- max-height: Sets the maximum height
- max-width: Sets the maximum width
- min-height: Sets the minimum height
- min-width: Sets the minimum width
- width: Sets the width of an element
Example (sets the height of the box that contains the Page Title and nav menu)
div.owner_nav {
height: 199px;
background: none;
}

display
The values of this property have the following meanings:
- block: This value causes an element to generate a block box.
- inline: This value causes an element to generate one or more inline boxes.
- none: This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout and it's not displayed at all).
Example (hides the icons in the top nav bar/header):
li.gnopt a img, li.gnoptsel a img { display: none; }


visibility
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
- visible: The generated box is visible.
- hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have 'visibility: visible'.


overflow
Controls how the content that does not fit the box dimensions will be handled. You can use:
- visible: Default. The content is not clipped. It renders outside the element
- hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
- scroll: The content is clipped, but the browser displays a scroll-bar to see the rest of the content
- auto: If the content is clipped, the browser should display a scroll-bar to see the rest of the content
Example (add scrollboxes to replies when they contain long text lines or images):
.reply {
overflow: auto;
}


position
- static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations);
- relative: An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position;
- absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties;
- fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling.

Example (position the Page Title):
h1#page_owner_title {
position:absolute;
left:100px;
top:150px;
}


color
The foreground color, mostly for text. You can use a value like #FFF or #C0C0C0 or a name like red or transparent. Example (color for the main text on your page):
body {
color: black;
}


background
The background color and/or image. Example (general page background):
body {
background: white url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
}

You can set the image and color separately, like this (in this case the order does not matter):
body {
background-image: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background-color: white;
}

Remember that if you use the same statement only the last one will be used, so this will make your background be only blue (no image):
body {
background: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background: darkblue;
}

For the background image, you can also use some other properties:
- background-attachment
values: fixed or scroll
- background-position
values: top, bottom, right, left, center or value
- background-repeat
values: no-repeat, repeat, repeat-x, repeat-y

You can also combine them in just one line, like this:
background: darkblue url(Image_URL) fixed no-repeat center;


border
Sets the color, type and thickness of the border (click here for a tutorial in the group).
Example (sets the rail border):
.rail {
border: 2px solid black;
}


margin and padding
The margin and the padding values can be set in just one line in the order "top right bottom left", one value for all the dimensions or separated in different lines. For example:

padding: 10px 5pix 12px 0px;

is the same as:

padding-top: 10px;
padding-right: 5px;
margin-bottom: 12px;
margin-left: 0px;

As you may already know, you can also do the same to change the border for just one part of the box (put a border bellow the titles on your main page):
.itemboxsub {
border-bottom: 2px dotted #fff;
}


If you want to suppress an %element, you can use:
- transparent for the color. Example (content boxes on the main page with no background):
.itembox {
background: transparent;
}

- none when you may have multiple parameters, like 'background-image' or 'border'. Example (no border and no background image in the rail):
.rail {
background: none;
border: none;
}

- 0 when you have values, like 'padding' and 'margin'. Example (no margin for the itemboxes):
.itembox {
margin: 0;
}


To remove the background completely (make it totally transparent), you can use:
background-color: transparent;
background-image: none;

or:
background: transparent none;


For a quick reference about the most used commands, see this page at w3schools.com.

OK, now you already know a bit of CSS and want to create your own theme... So what are the basic steps? Actually you do not create anything from zero (OK, you are really good you can do it), but you modify one of the base themes. It's much easier and that's how all the theme designers start. These are the basic steps:

1. Select a base theme: click on Customize My Site at your main page and then on Choose a Theme in the yellow banner that should be visible at the top of the page. Look for one with the basic layout and/or colors you want in your custom theme, you can see the basic differences looking at the thumbnails;
2. Go to this excellent post by psychotic2 and find the theme you just picked, select all the CSS code and copy it to your Custom CSS page;
3. Then you can start changing it: alter the colors, borders, backgrounds, etc.

- What to change?

If you've selected the Custom Colors base theme, you don't need to copy the CSS since all the code with the changes you did to the colors will be already in your Custom CSS page with a bonus: most of the sections have comments about what they are, you just need to tweak it more to get what you need.
If you have no idea about the sections and selected another theme, you can look at the help at the Custom CSS page or look at this post for a basic guide. There are also some tutorials in the groups already about some changes that people usually request, they are also a good source of knowledge about the CSS section names (selectors), they use the general format:
selector {
%elements
}


- How to change?

To change a color, simply replace the code or name of the color you want to use. HTML color tables can be found here or here. You can use just a color name like black or red, or use a RGB color code starting with '#', for example: #000 or #00000 is the same as black. For no color at all (full transparency) use transparent, like this:
.itembox {
background-color: transparent;
}

You can change the color of borders, its thickness, type or simply remove them using:
boder:none like this:
.subnav {
border: none;
}

You can also change the backgrounds or images changing the URL of the image with the one you want to use. Remember that you must host the image on the Internet first, so images on your computer can't be used. You can host them right here on Multiply, see this tutorial. If you want to remove a background, you can use none, like this:
.railstart {
background: none;
}

The most common modifiers for the background when images are used are (look here for a full explanation):
body {
background-image: url(IMAGE_URL);
background-repeat: no-repeat/repeat/repeat-x/repeat-y;
background-attachment: fixed/scroll;
background-position: top/left/bottom/right/center;
}


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/

That's the basic instructions. As soon as you get used to the basic functions and the names of the sections in the CSS you can try something more complicated. And the group is open to any questions about it. Enjoy!

Multiply Design has set up an easy way for you to view the Base Theme images and its corresponding CSS Codes in one of our Photo Albums. 








You can click on BASE THEMES WITH CSS to be taken to the album to view.


You can use this link and add any of the base themes names to get the base themes CSS.  Just replace THEME_NAME with one of the base themes names.  Click on the photo to enlarge to view the base theme names.

http://multiply.com/style/custom/THEME_NAME

For example:
http://multiply.com/style/custom/skyline

Give it a try...