Just added:

Plaid: a warm and cool theme based on a plaid pattern.
Chessboard: a simple black & white design for intellectual bloggers.
Nightmare: the title says it all; the painting is by Henry Fuseli, 'The Nightmare' circa 1781. 
Olive & Wine: this theme uses the color scheme of the Nightmare theme, but has no header. For those who like the colors but don't want such a big header at top.
Rock Garden: lots of nice gray with brown and navy link colors to offset this theme based on natural stone colors.
Library: perfect for book reviews, in orange golds, browns, and old book page yellows.
Dark Faerie: Best to be used for those who like Victorian romances and ghost stories, too.  The color scheme is gold, orange red, brown -- the colors of an old painting with an ornate bronze frame with a slight other worldly green highlight.  The plug-in titles should be short and sweet, as you will notice that the labels only allow for so much room.
Flora & Fauna: simple animal and floral theme with clean white, toasty brown red, cool teal, and grass green colors.
Incense: a theme with cool lavender and lilac tones subdued by creamy smoke beige.
Wild Floral:  blog theme with just footer, no header -- like a box of flowers planted under your words. 
Swirls: simple, clean scrolls and swirls
Lotus: I originally had the lotus sitting on the bottom of the blog as a footer, but I think it looks much better as a header.
Choco Dots: Milk Chocolate, mint green, and frosting pinks make this theme almost good enough to eat.
Lucky Charms: looks just like an old baby blanket for those bloggers who want something pastel soft and sweet.

Submitted earlier:

Squid: This lil' buddy swims in deep, dark waters. Created at the request of nubeat 

Rose Journal: a sweet, simple theme for love letters. Easily customizable for those who want something delicate.
Rose Thorns: Is a very sexy and romantic theme utilizing a new CSS trick I learned; it has a footer as well as a header image! Just like the following...
Natural: Expect more new themes like this one -- utilizing both a footer and header to create a frame. It was a real headache to figure out, but I finally got it right.

What to expect from me next:  Lighter colored themes, simple themes, themes with a retro twist, more themes without headers but have footers, and an incense theme.  Come back on Tuesday or leave a request here.

Other themes I've posted for review you may have missed:
Muskie!

Houston, Texas!
Cassette Tape
Moroccan
Chili Peppers
Summer Lovin'

I made my own webpage (finally!) It's called All Eiji, and here is the link...

http://www.geocities.com/knuxisdabest/AllEiji.html

Now, it's not finished, and I'm having a small dilemma. As you can see, there are two tables instead of one, one underneath the other, and all I need is one. And so far, I've tried everything, and can't get it to go away. If anyone knows alot about CSS, HTML, Javascript, can you help me out? If not, then I'll probably have to ask  my friend in the IST shop, although I kinda don't wanna.

Thanks

Before we get into doing cheat sheets for the page content of a Mindsay wiki page, we will cover the codes for options that control The Division Notice, The Bottom Navigation and The Surrounding Background Area.  When you are editing the style of a wiki, you'll notice this little message:

/* Add additional rules as you like.  Prefix most rules with "#page" so that  
   your style does not affect the rest of the mindsay navigation/logo/etc. */

/* Send feedback if you need extra id's placed on page elements! */

The Bottom Navigation and The Surrounding Background Area are places where additional rules can be applied.  Anything you do should begin with a "#..." so that it doesn't muck up the rest of the offical Mindsay navigation.  Anyone who comes up with additional rules or codes not mentioned here is invited to share theirs here and blogthemes will post it so that we can all benefit from the "savings!"

The following codes and options can be used to customize additional areas not covered in the basics of the "Edit Style" section of your wiki page.

The Division Notice

The following covers the divisional areas beyond just the top links.  Place this CSS code underneath the comment box customization are in the "Edit Sytle" page.  Rules for all links apply here.  Make sure the colors and effects match those you have already set previously.

 }
div.notice {
 color:#______; 
}
div.notice a {
 color:#______; 
 }
div.notice a:hover {
 color:#______}
 
}
div.sig {
 color:#______;
}

*/You can always refer to the link options covered in part one of this "how to" series./

The Bottom Navigation

These are to be inserted after you customize your division link areas.  This is the area underneath the whole Mindsay content area and Editable content page where there are a set of links listed for My Account, Blog, Community, and Inside Mindsay -- basically all areas of Mindsay which can also be found underneath anything on Mindsay, including the page where you insert your blogs and check your inbox content.  On a Mindsay wiki page you can customize this bar of links to match the rest of your wiki theme.  The following are CSS codes to pimp out this area!  Insert this:

#bottomnav { 
background-color:#______;
border:__px solid #______;

}

Bottom Navigation with Image

*/Make sure your bottom navigation image is small enough to fit neatly on the side or in the center.  The best dimensions are: 125px in hieght and at least 316px in width for an image to float to the left or right of the bar.  An example of a good sized bottom navigation image is what I used for the Pirates of the Caribbean wiki page (scroll down to bitty bottom of the page to see this image): 

 
The code for this effect is as follows:

#bottomnav {
background-image: url('http://www.yourimagehost.com/yourimage.jpg');

background-position:center right;
background-repeat:no-repeat;
 background-color:#______;
border:__px solid #______;

}

*/I've found that this simple code works well, but you can always change it to align to the center left.  Also make sure that your image doesn't so dominate the bottom navigation area that it hides the Mindsay links!  And, just like other tricks before-mentioned, you can customize the background color or border as you see fit as well./

Bottom Navigation Tiled Background Pattern

*/These are to be inserted after you customize your comment boxes.  This will be almost the same as the above mentioned image, except this image will be one that is neatly tiled.  This kind of background image should not be too glaringly loud in color in order for the links to clearly be shown.  Insert an image that can easily fade into the background.  An example will be given below.../

#bottomnav {
background-image: url('http://www.yourimagehost.com/yourimage.jpg');

background-color:#______;
border:__px solid #______;

}

*/An example of what kind of images to be used can be found in several wiki pages I customized.  The first is from the page for 28 Days Later.

This blood splatter image could easily be one that is too loud for a background, however when placed underneath links with a color that stands out against the red and black, it works!  Also notice that this image was created as a "band" for the navigational space.  It doesn't work well as an overall background for a blog.  The next image, however, is a tiled background image which can easily be used as a blog background and a bottom navigation background. You will find this attractive black and white brick image as the bottom navigation background for the Nathan Fillion wiki page.   

Notice that this background image looks a lot bigger than how it does as a bottom navigation background?  That's because the dimensions of the bottom navigation are approximately 130px in hieght and anywhere from 800px to 1000px in width (depending upon the width of your screen).

But what if you don't want the image to repeat itself?  What if you just want it to be positioned on the left, right, or in the center of the navigation bar?  Like the effect I showed you above with the example of the  Pirates of the Caribbean wiki page, just paste in the following code, except in the space indicating "backgound-position", put in the direction you desire: left, right, or center, like so:

#bottomnav {
background-image: url('http://www.yourimagehost.com/yourimage.jpg');

background-position:______;

*/After background-position indicate: center right, center left, left, right, center, etc.  Feel free to experiment with your image placement for other creative possibilities./

background-repeat:no-repeat;
 background-color:#______;
border:__px solid #______;

}

Bottom Navigation Links

After you're done playing with background colors and images for the bottom navigation, you can insert a custom color or effect for the navigation links.  The following are the basic CSS codes for these links.

#bottomnav a {
 color:#_____;

}
#bottomnav a:hover {
 color:#_____;}

*/You can always refer to the link options in part one./
 

b,u {
 text-decoration:none;
 color:#_____;
}

*/These codes cover the bolded and underlined text of your content.  Adding a different color to make the bold and underlines stand out can add some pizzazz to your design or make information more readable for browsers.  I will provide more text options later in this entry./

#editstyle { 
  color:#_____;
}
#editd { 
  color:#_____;
}
div.notice#mindsaypages { visibility: hidden; }
#bottomnav img { visibility: hidden; }

*/These codes are used so that none of your customized options mess up the rest of the Mindsay page.  You can add color to the edits if you like.  Perhaps someone else can interpret for me what these other codes mean?  See, I don't know everything!/

How to Customize the Surrounding Background Area and Scroll Bar of your Wiki Page

After you've gotten done with customizing the style of your page, you'll want to know how some of us changed that trademark Mindsay cornflower blue background.  The following also will have scroll bar color options, but keep in mind that this will only show up in Internet Explorer.  This will take a little explaining, but I will put it in numbered steps for you:

1.  Click "Edit Style" again.

2.  Scroll down to: /* Background for the whole MindSay content area */

3.  After the #content area's last " }" add the following code (this should go inbetween the #content and /* Color for most text */  in the /* Background for the whole MindSay content area */ :

body {
  SCROLLBAR-FACE-COLOR: #______;
  SCROLLBAR-HIGHLIGHT-COLOR: #______; 
  SCROLLBAR-SHADOW-COLOR: #______; 
  SCROLLBAR-3DLIGHT-COLOR: #______; 
  SCROLLBAR-ARROW-COLOR: #______; 
  SCROLLBAR-TRACK-COLOR: #______; 
  SCROLLBAR-DARKSHADOW-COLOR: #______; 
  background-color:#______;
  border:__px double #______;
  color:#_____;
}

*/Where there's a "_____" insert your own color hex codes to change the cornflower blue color to one of your choice.  Refer to the following code to insert an image as your background instead:

background-image: url('http://www.yourimagehost.com/yourimage.jpg');

*/Where there's 'http://www.yourimagehost.com/yourimage.jpg' fill with the url of the image of your choice.  Also refer back to options in part one for ideas on how to customize your background's alignment./

Advanced Custom Options for the Page Content of your Wiki Page

Don't like it when the text of your page content has no padding and is too close to the border?  Want to trick out your text so that your wiki page stands out better than the rest?  Well, the following is a collection of CSS codes you can paste into your page content.  Not all of them will work, but give them a shot and have fun experimenting!

To Set a Margin for your Page Content

In order not to have your text constantly resting too close to the border of your editable page content, follow this set of instructions:

1.  Go to the top links and select "Edit Page Content"

2.  Once you're in the "Edit Page Content" page, toggle the html source by clicking onto the button that looks like a little page.  This will take you to a page where all of the html syntax can be seen and edited just like you can with the "Edit Style" section.

3.  At the very top of your content, insert the following:

<div style="MARGIN: 1em">

*/In between these two codes place your paragraphs and images.  You can even increase your margin, too.  Do whatever looks the best!  I've found that a "1em" margin is the best, but even a "4em" ain't too shabby either!/

</div>

To Set a Dynamic Headline for Subtitles

It's common for a lot of Mindsay wiki pages to have little subtitles to measure out the content of a page.  Some designers and editors use quotes from their favorite celebrity or movie to really flesh out their page content.  Here are a few tricks you can use to make your headlines stand out.  Once again you will need to toggle the html source, so once you hit "Edit Page Content" you will also need to click onto that little page button again.  Before a paragraph (paragraphs are indicated by the html code "<p>") you can place a subtitle by entering the following:

<h1>"________________"</h1>

Where "_____________" is paste in the headline of your choice.  For an example, here's what I put into the page content for the Xena:Warrior Princess wiki page:

"In a time of Ancient Gods, Warlords, and Kings, a land in turmoil cried out for a hero. She was Xena, a mighty princess, forged in the heat of battle. The power... the passion... the danger... Her courage will change the world."  

This headline is the same size as the title of your wiki page above the top links.  For the next smaller headline, most usually used as a subtitle or quote, here's the same Xena headline but set with the following code:

<h2>"________________"</h2>

In a time of Ancient Gods, Warlords, and Kings, a land in turmoil cried out for a hero. She was Xena, a mighty princess, forged in the heat of battle. The power... the passion... the danger... Her courage will change the world."

Headline Tricks for Page Content

You can set your headlines to have a line underneath them by going back to your "Edit Sytle" section and inserting the following code into the  /* Page Title */ area:

h1{color:#______;

border-bottom-width: ___px !important;

border-bottom-style: solid !important;

border-bottom-color: #______ !important;}

*/You can do the same code for "h2" or "h3" if you so desire.  This will set the trend for all of your headlines.  Examples of this trick can be seen in use on Aphex Twin and Damien Rice wiki pages!/

Additional CSS for Text Properities

There are many other options available to you when it comes to editing the text of your page.  The great thing about CSS is that all you have to do is set the code into your "Edit Style" page and don't have to repeatedly insert the code into the html source!  In order to set styles and tricks for your text, go to "Edit Style" and refer back to the sections where you want your text to stand out.  There are FOUR sections of the style page that you can insert an optional text property:  /* For the editable page content */, /* Background for the whole MindSay content area */, /* Color for most text */, and /* Page Title */.  Choose the one where you want to do funky things with your text and go from there.  The following are codes for text properties:

Custom Letter Spacing

If you want to set some space in between letters of a particular headline, enter the following underneath the section for /* Page Title */:

h1 {letter-spacing: -3px}

or you can set the spacing by centimeter:

h1 {letter-spacing: 0.5cm}

The above are just example setting that are most easy on the eye, however you are free to experiment with this effect as you see fit!

Custom Line Spacing

What if you want to create more space in between your lines instead of having to put breaks in between sentences by hand in the page content?  The following code can be used to make space automatically using CSS:

p.small {line-height: 90%}

This is for a paragraph with a smaller line-height.  The letters will appear a little crunched together. The default line height in most browsers is about 110% to 120%. 

p.big {line-height: 200%}

Indenting the Text

You know how some books have that little five to eight space indent at the beginning of each chapter or paragraph?  You can do the same thing with CSS:

p {text-indent: 1cm}

The above code will give you  a good eight space indent for your text.  Again, you can make it less or more, have fun experimenting!

Control the Letters in the Text

To set the text to be all in uppercase letters:

p.uppercase {text-transform: uppercase}

To set the text to be in all lowercase letters:

p.lowercase {text-transform: lowercase}

To set the text to be capitolized:

p.capitalize {text-transform: capitalize}

To Make Text Blink

I don't often recommend this code to others because it can be really annoying to read, but if you want to put in a blink code to make a particular headline stand out, do the following:

h1 { text-decoration: blink} 

To Set List Item Markers and Images

When you are inserting list items in your editable page content, the only option you have is to go with the usual bullets provided, but what if you wanted to do more than that?  The following codes can be used to customize your lists:

Set list marker as a clear circle:

ul.circle {list-style-type: circle}

Set list marker as a dark square:
ul.square {list-style-type: square}

Set no markers to list:

ul.none {list-style-type: none}

Set ordered lists by number:

ol.decimal {list-style-type: decimal}

Set ordered lists by lower case roman numbers:
ol.lroman {list-style-type: lower-roman}

Set ordered lists by upper case roman numbers:
ol.uroman {list-style-type: upper-roman}

Set ordered lists by lower case alphabet letters:
ol.lalpha {list-style-type: lower-alpha}

Set ordered lists by upper case alphabet letters:
ol.ualpha {list-style-type: upper-alpha}

Set an image to be used as a marker for a list:

ul {list-style-image: url('http://www.yourimagehost.com/yourimage.jpg'); }

*/Make sure the image for your marker is small like a tiny arrow or jewelled button./

Make the Letter of a First Line Large

This code will add a special effect to the first letter of a text:

p:first-letter
{color: #______;font-size:xx-large
}

Make the First Line of a Paragraph Special

This code will make the first line of a paragraph in your text stand out in small capitol letters just like some magazine articles do:

p:first-line
{color: #______; font-variant: small-caps}

To Set an Image to Float within a paragraph with Caption

You've got a small image you want to be placed within a paragraph, yet you also want to set it with a small caption on the bottom.  Not a problem.  Use the following within the Edit Page Content toggle html source when placing an image to be shown within text:

div
{float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black;
text-align:center;
}

*/This is just one example to use.  Feel free to edit the width, margin, padding, and border styles./

That's it for now.  Hope you all have fun with these additional rules!  I'll post more later...

~valentinaxxx