Wiki Pages @ MindSay 
mindsay
In the ongoing saga of me designing wiki pages featuring the cast of Firefly and Serenity, I have added two more for your pleasure: Morena Baccarin and Jewel Staite. Both pages aren't exactly finished as I wanted to devote some time to the designs first. If you're a Firefly fan, you might as well also check out the other Mindsay wiki pages I've done featuring Nathan Fillion, Alan Tudyk, and Summer Glau.
Let me know what you think of these designs. Oh, and keeping with the other posts I've done concerning the wiki pages for Alan Tudyk and Summer Glau...
Morena reminds me limes, sugar, plum wine, early morning mists, and the season of Spring.
Jewel for some reason reminds me of the state of Alaska, malamute puppies, comfy blankets, early fall, beach sand, and sandalwood perfume.
Again, I don't really know why I associate those things with these actresses. But I do. Enjoy! Oh, and I encourage anyone to add info and other pix to these pages. They're for everyone!
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...
I have just finished putting the final touches on the Gary Numan Mindsay wiki page. I couldn't leave it alone. It occupied my thoughts for too long. I haven't even taken a break to get something to drink. I kept putting off a break, telling myself "just one more bit of info or one more picture and we'll stop." But, no, I did not stop. I'm a HUGE fan of Gary Numan. He's possibly the one artist whose music I truly love and can't get enough of. His music filled my childhood with such morbid joy. And still, as an adult, I STILL get goosebumps whenever I hear even just a lick or sample of his music. I've followed his career since I first heard "Are 'Friends' Electric?" on my babysitter's record player.
For those of you not in the know, Gary has NEVER stopped producing music. You may know him simply as "that guy who did that song about Cars" but he is much more than that. He's coming out with a new album in just a few short days; JAGGED due out March 13th! Even if you aren't a Numanoid like I am, check out the new album and see how dramatically Gary has changed. It's really great dark industrial music and Gary's vocals are killer whispering over some heavy metal guitars. Okay, yes, I know, I should go back to bed, or maybe write a blog entry that's not saturated with praise for someone else, but I can't help being a fan sometimes...!
In my spare time, I decided to request some new wiki pages and got to work on them. Feel free to visit and comment!
Rufus Wainwright
Damien Rice
Tori Amos
All three of these I tried to capture the look and feel of the artist's album covers. I'm also a big fan of these artists and it's my tribute to them. Oh, and mamachameleon, the Rufus Wainwright page is for you! 
Showing 1 - 5. [ Next ]
