First of all, thanks for downloading my CSS!

I've worked hard on this CSS, to make sure it works. But most of all, I've worked hard on making it look like the message centre as much as possible but without going overboard, giving it my own touch in some places.

My main purpose of creating this CSS is so that people can use something deviantART related, but more specifically, something v6 related. The message centre was my obvious choice because I love the overall look of it, with a few exceptions.

I've tested the CSS in Firefox 3, Opera 9.50, Internet Explorer 7 and Safari 3.1.1 for Windows. It is mostly fine across the board. You'll see I have not checked it in Internet Explorer 6. I honestly don't care for IE6, but I will fix it if it's really bad.

I hope you find the CSS useful, and that you'll even learn something from it if you're a beginner.

In the zip you've downloaded to read this, you'll find a few things:

• CSS (folder)
• mcv6css-sidebar.css
• mcv6css-nosidebar.css
• mcv6css-sidebar-commented.css
• mcv6css-nosidebar-commented.css
• HTML (folder)
• sidebar.txt
• no-sidebar.txt
• body.txt
• body-nosidebar.txt
• footer.txt
• images (folder)
• Read Me (folder)

Everything you need is in this zip. -commented.txt simply means it's the CSS with comments as a guide. Don't use the commented CSS to paste into your journal as it won't work.

^ Back to top

First of all, I would appreciate it if everyone that can, host the images themselves. This is because I don't want to use too much of my transfer data, even though I have plenty of it. For those that don't have their own webspace, you may use my hosted images.

Once you've got all of the images from the images folder hosted, you'll need to put the URLs into the CSS. Just open it in a text editor (WordPad is recommended as far as basic editors go. Aptana is better yet) and find all the background images. You should find them easily as they'll look like this:

background:#cbd7cb url(http://www.yourhost.com/dev.gif) top right no-repeat;

or similar in some way. Once you've replaced all of the URLs, you're ready to go.

^ Back to top

sidebar.txt - This needs to be pasted into the HEADER section of your journal. Don't leave anything out!

body.txt - Paste this into the section of your journal where you write the content.

footer.txt - This goes into your FOOTER section. Don't forget it, cause it's easy to forget.

mcv6css-sidebar.css - Finally, this one gets pasted into the CSS box.

^ Back to top

Same as above, but place no-sidebar.txt into the HEADER section and body-nosidebar.txt into journal body instead.

It should be obvious that mcv6css-nosidebar.css goes into the CSS box.

^ Back to top

I think the sidebar is what makes this CSS so neat. It has the same look as the message centre and while it cannot function in the same way, I've included the selected section you see in the message centre as a hover. I've also included the :active colour (you can see it when you actually click on a link).

I haven't included any icons, as it didn't need them. And it may look a bit overwhelming to start with for users who aren't too great with HTML and/or CSS, but it's really quite straight forward. You won't break anything if you read below.

If you look closely at the structure of the sidebar, you'll notice there is a certain way of setting up the links. Since I could not use individual list classes, I opted for 3 different div classes to display the links that way.

<div class="header-side"></div>

^ The above is important. It will give the journal a curved corner to the right. Make sure this goes in there.

<div class="sidebar">

^ Very straight forward. It will start off your sidebar.

<div class="header">my links</div>

^ Use this header class to create sidebar headers. Capital letters are here nor there as they are set to capitalize anyway.

<div class="top-link">
<ul> <li><a href="http://">Website</a></li> </ul></div>

^ Use this class to start off your link structure. Use only one link in this part.

<div class="middle-links">
<ul>
<li><a href="http://">Photoblog</a></li>
<li><a href="http://">Flickr</a></li>
<li><a href="http://">Last.fm</a></li>
<li><a href="http://">Twitter</a></li>
</ul></div>

^ Use this class to do most of your links, except the very last one you plan on using.

<div class="bottom-link"><ul>
<li><a href="http://">Facebook</a></li>
</ul></div>

^ The final class for lists. Just one link again and you've got your structure right there. If you take a look at sidebar.txt, you'll get how it's done very quickly.

But now you're saying you want stamps in your sidebar, or just text. Don't worry. I've added classes for these too!

<div class="stamps"> :thumb86564161::thumb59073240::thumb69064167:</div>

^ You need to simply wrap your stamps in the stamps div class. It will centre your stamps, and it also removes the shadow from behind them.

<div class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

^ And again, if you want just an area of text, wrap it in the txt class. It will make sure it's aligned properly with the rest of the sidebar.

Don't forget you need one more </div> to close off the sidebar. It's important so you don't mess up the rest of your journal. You'll see at the very bottom, before the close of the sidebar, I've added a "credits" section in the sidebar. Please leave it there. I'd appreciate it a lot.

^ Back to top

The journal body is actually easy and straight forward. One thing to note though, is that I have somewhat disabled the automatic breaking that the journal does. If you don't know what I mean, I'll explain. When you write a journal, and go to a new paragraph, the journal will automatically insert breaks (space). I've stopped this from happening.

So, how will you break paragraphs up? Easy. Just be sure to wrap your paragraphs in <p>Paragraph in here</p>.

<div class="content"><div class="heading">Lorem Ipsum</div>

^ Use the above to start off your journal body. The class "content" will wrap the body so that it doesn't run into the sidebar. We also want a heading right at the very top, just like in the message centre. You can use the heading throughout the body for topic changes or different sections in your journal like features etc.

And as I mentioned about paragraphs, just wrap any text in <p>Paragraph here</p>.

Use </div> again to close content.

^ Back to top

If you like to feature thumbs, one of my other favourite parts to this CSS is that I've styled the thumbs to look like the devwatch in the message centre. There are a few things you should do though (if you just want normal thumbs in your journal, you can ignore this part).

<div class="thumbs">

^ Start off your thumb feature with the above to wrap them all in one section. If you miss this, you'll find the thumbs will be up tight against the sidebar.

This is the fun part. Styling individual thumbs!

<div class="thumb">:thumb91571943:
<p><a href="http://isabelucha.deviantart.com/art/Moody-Blues-II-91571943">Moody Blues II</a> by :devisabelucha:</p></div>

^ All thumbs can done like the above. I wouldn't recommend using it if you're featuring a lot of thumbs. If you do, and are worried about what it might look like on the profile page, you could always use the cut tag to hide it in the profile view of the journal. Learn about the cut tag.

</div>

^ Use the above to close thumbs.

Important note: If you have featured thumbs, these will go before the closing </div> for content.

^ Back to top

<div class="clear"></div> <div class="bottom-cl"></div> <div class="bottom-cr"></div>

^ The above is for the FOOTER part of the journal. Clear is important here for IE browsers, otherwise the journal will look buggered. The others are for curved corners at the bottom of the journal. It's as simple as that.

^ Back to top

If you use journal moods, when updating your journal, select them to show at the bottom.

^ Back to top

The biggest downfall to disabling automatic breaking is that you need to use real lists. They're actually very easy, and just like creating a list in the sidebar. Or you could be lazy and use <p> to wrap each line. But then you're going to end up with a margin between each line. So, read on to find out about lists.

<ul>

This starts off an unordered list.

<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

The above is your list. Each line gets wrapped in <li></li>

</ul>

^ Closes off the list. It's pretty much that simple and each thing will be on a new line. Without styling in the CSS, the lists will be bulletted. This might be fine for some people, for others it might not. If you want a numbered list instead, you could add the following to the CSS:

.custom ul li {
list-style:decimal;
}

If you don't want anything at all:

.custom ul li {
list-style:none;
}

That's pretty much the basics of lists. Learn more about CSS lists.

It should be noted that this is just the first version. There is a second version coming once I work out a few quirks. It will be a "Feature" version, or "Community" version. It will have quite a bit of CSS added, so keep your eye out for it.

I won't give anything else away on what it will have though! ;)

^ Back to top