How to Customize a Mindsay Wiki Page

The Basics of Editing Style

This is for all of you who've long wanted to customize their Mindsay wiki page, be it a personal wiki or a wiki for one of your favorite subjects, but didn't know how to.  First, before even getting into all the fun and fancy stuff, we will look into the anatomy of a wiki page.  Like previous cheat sheets, we will go step-by-step and any of you out there are invited to comment or correct anything that I may have missed or wasn't clear on.  Much of the following is based on experiments that several other Mindsay bloggers have done, so I can't take full credit for everything.  How I've learned to customize pages is quite simple; I look at what other designers have done and have found ways to further customize things.  The key thing with wiki pages is to have fun.  If something doesn't work, there's no problem, you can always go back to your Page History button and change things back.

 

The Anatomy of a Mindsay Wiki Page

There are several main parts of the Mindsay wiki page that you are allowed to customize:

a) The Editable Page Content

The Editable Page Content is the middle part of the wiki page where you can insert images, words, music, and video; basically the meat of the page.  Here you can change the color of the background or add an image as the background, toggle the border width and border color.

b) The Whole Mindsay Content Area

This is the area that surrounds the editable page content but does not include the cornflower blue area that lies beyond the content areas (don't worry, we'll get to how to customize that area later).  You can change the color of the background or use an image as the background and change or delete the border for this content area. 

c)  The Comment Boxes

The area in which people can respond to the content of your wiki lies underneath the editable page content but uses the whole Mindsay content area as its background.  You can choose to add different kinds of colors, borders, and images to decorate the bars that contain Mindsay blogger information.

 

What you're not allowed to edit is the main Mindsay title part at the top of the page.  That has to stay constant in order for "station identification" purposes; in other words, it is the one part that identifies the wiki page as part of the Mindsay community.  The only other thing you're not allowed to edit or delete is the advertisements at the top. 

 

There are other parts of the Mindsay wiki page that you are also allowed to edit, but have to add in CSS code in order to customize them:

a) The Bottom Navigation

At the bottom of the Mindsay wiki page there is an area that holds links to other Mindsay pages.  You can change the colors and effects of the links, add an image for the background, edit the borders, and even add a small image to decorate the bottom left or right hand corner.

b) The Surrounding Background Area

This is the area colored in cornflower blue that is a token color for many Mindsay pages.  You can change this color or add an image for this background to go with the theme of your wiki page.

 

Next we will cover what each of the links at the top left hand side underneath the title of the page stand for:

1.  Post a Comment

Anyone can post a comment on your personal or public Mindsay wiki page.  Hitting this button is just like selecting to reply to a blog post.

2.  Edit Page Content

To put in information or images into the Editable Page Content (the middle of the wiki page) you must click onto this button.  Adding your thoughts into this area is just like posting a blog entry.  You can edit your page content here just like you would a blog entry.  However, the difference here is you can do more with this page than you can with an ordinary blog entry.  You can put in tables, graphs, video, images, etc., whatever you want to express yourself.

3.  Edit Style

This button will take you into the area you want to go into first to start customizing your wiki.  Hitting this link will take you to a page where you are allowed to customize each area of the Mindsay wiki page.

4.  Page History

Every wiki page comes with the option of viewing, checking, or reverting to previous content added to the page.  If you make a mistake while customizing a page or if you want to delete material, you can always go to the Page History area to change things.  However, keep in mind that with every change you have to clearing state the reason why.

 

On the right side of the links are either two or three links that you can select to help you.  On a public access Mindsay wiki page you will see three links; Help, Guidelines, and New Page.  Help will take you to a FAQ that covers the general basics of what a Mindsay wiki page is.  The Guidelines page will offer you a list of suggestions on how to be courteous with your wiki page changes and ideas.  The New Page link will take you to a suggestion box where you can submit a subject you want to create a new wiki page for.

 

Note:  Before you can do anything with a Mindsay wiki page, you first have to hit the "Edit Style" button.  The following covers more detailed instructions, options, and explanations of each part of the Style section.  Anything with a "______" you can fill in with your own hex code, pixel size, or image url.  Anything with a "*/______/" will be an explanation.  And anything with a "/*      */" will be the title of the section you will be editing.  For a new option, there will be a bolded "**_____**" to indicate what else you can insert into it.  When inserting your custom options, DELETE THESE NOTES from the Edit Style sheet! 

 

Editable Style Cheat Sheets for Wiki Pages

   

/* Editable Page Content  */

#pcontent

{ background-color:#______; 

 

*/You can always, instead, use an image for your overall background see below for the code.../

 

BACKGROUND: #______ url('http://www.yourimagehost.com/yourimage.jpg');

 

*/Options for setting the style of your background are setting the background image to only repeat vertically, setting the background image to repeat horizontally, and fixing the image so that it won't scroll with the rest of the page.  The codes are as follows.../

 

**Set background image vertically

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

 

**Set background image horizontally

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

 

**Fix background image so it will not scroll

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

 

*/Note:  Keep these codes in mind for when you want to customize other areas of your wiki./

 

  color:#______;

 

*/This will set the color of all the text within your page content.  It will save you from constantly having to insert a color by hand via the edit text bar when you insert editable page content. */

  border:__px solid #______;

 

*/This is the border that separates the page content from the Whole Mindsay Content.  You can option to delete it or put in a thicker border.  Look below for more style codes./

 

**  border:__px  dotted #______; 

*/A dotted border will appear as a dotted or slashed line./

 

**  border:__px  double #______;

*/A doubled border will have a set of two solid lines./

 

**  border:__px  groove #______;

*/A grooved border will appear as if it was carved into the surface./

 

**  border:__px  ridge #_____;

*/A ridged border looks as if it has been raised off the surface./

 

**  border:__px  inset #______;

*/An inset border looks as if content has been raised off the surface and given a deep shadow on the top left side./

 

**  border:__px outset #_____;

*/An outset border is just the opposite of the inset border with the deep shadow on the bottom right side./

 

**Want to try different styles and width of borders for each side of the content?  Try the following optional codes and fill each blank space with one of the styles mentioned above and/or play with the pixel width if you want:**

**  border-right:__px  ____ #______;

**  border-left:__px ____ #______;

**  border-top:__px ____ #______;

**  border-bottom:__px ____ #______;

 
  font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
  font-size:100%;
}

*/You can always change the font families mentioned above, but those inserted here are standard fonts that work well for most eyes!  You can also play with the font size, too, but I recommend not going below 72%, unless you really want people to squint.*/

 

/* Background for the whole MindSay content area */

#content {
  background-color:#______;
}

*/For options on how to customize the background color or background image of the Mindsay content area, refer to the ones given above for the editable page content./

 

/* Color for most text */
#page, #page div, #page td {
  color:#______;
}

*/This is where you can insert color and style options for several areas located within the entire Mindsay content.  More custom style text codes will be provided in the Page Title section to follow./ 

 

 

/* Top links */
.notice {color:#______}
.notice a {color:#_____}

*/These codes cover the links that appear below the Page Title and rest above the Editable Page Content.  You can customize these with the following link options.../

 

**Add a background color for your links

{color:#______;background:#______;}

 

**Add a border to be placed around your links

{color:#______;border:__px solid #______;}

 

**Add a border style to the border around links

{color:#______;border:__px dotted #______;}

*/Refer to the border style options above in the Editable Page Content area./

 

**Add all the link options in one declaration

{color:#______;background:#______;border:__px dotted #______;}

*/This will set your links to have not just a custom color and background, but a border with a custom style./

 

**Add just a bottom border to your links

{color:#______;border-bottom:__px solid #______;}

*/You can always use a custom style for the border and you can also change the border command to "border-top" or "border-left" etc./

 

/* Other link colors */
#page a {color:#______}
#page a:hover {color:#______}

*/These are the links that will be inserted in the areas of the Editable Page Content, comment boxes, etc.  Options for these links can be found above in the Top Links section./

 

/* Page Title */
h1 {color:#______}

*/"h1" means "headline one" or the main headline of the page, which is basically the title.  You can add other smaller headlines to be placed inside your page content here.  Many designers use "h2" -- a headline smaller than the page title that can be used to headline a paragraph or table inside the editable page content.  The code for a "h2" is the same as provided above, just copy the code but change the "h1" to "h2" after it./

 

**Add an overline to your headline

h1 {color:#_____;text-decoration: overline}

 

**Add an underline to your headline

h1 {color:#_____;text-decoration: underline}

 

**Add a line through your headline

h1 {color:#_____;text-decoration: line-through}

 

**Keep your headline undecorated

h1 {color:#_____;text-decoration: none}

 

**Center your headline

h1 {color:#_____;text-align: center}

 

**Align your headline to the left

h1 {color:#_____;text-align: left}

 

**Align your headline to the right

h1 {color:#_____;text-align: right}

 

/* Comment colors (alternating schemes) */
.comment1 {background:#______; color:#_______; border:__px}
.comment1 a {color:#______;}
.comment2 {background:#______; color:#_______; border:__px}
.comment2 a {color:#______;}

*/The above are the basic blank codes for the comment boxes, but you can also optimize your comment boxes with images and different border styles.  Refer to sections above for other codes.  Look below for a code that you can use to place an image inside the comment box./

 

**Add an image to your comment box

.comment1 {background-image: url('http://www.yourimagehost.com/yourimage.jpg'); color:#_______; border:__px}

*/Keep in mind that images to be used for comment boxes must be very small in height but need to be very wide.  Or you can use a very small image and float or align it to the left, center, or right. 

 

The following is an example of an image that I used for a comment box on the Brokeback Mountain wiki page:

See how long (wide) it is?  Also notice that I put the image of Jack and Heath off the right hand side leaving space for the "reply" link.  You will also notice on the Brokeback Mountain wiki page that when you have several replies to comments that the comment box shortens.

An example of how short comment boxes can get after you get a lot of replies to comments can be found on the Harry Potter wiki page.

I'm sure other designers out there can play with image sizes and alignments for their own custom comment boxes./

 

What we'll tackle next:  More options for Page Content in part two of How to Customize a Mindsay Wiki Page: Advanced Options for Page Content!

 

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 

 

 

Quick Links

Latest Comment