Movable Type is giving me a headache

[success2be]

I'm new to Movable Type and having a difficult time understanding how to customize the default styles. Here's the questions. I want to change color, font, etc. in the styles.css file (not actual name).

For instance if I was trying to modify the style of the banner tag block, I find the following in the main index file.

<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>

I then see #banner, #banner-inner, #banner a, #banner a:hover, etc. in the styles.css

I'm confused. Which one do I edit? Then there are multiple blocks of "#banner" OR "#banner-inner". Do I touch "#banner a" or "#banner a:hover" if they're not referenced in the main index?

I already went to http://www.learningmovabletype.com/...kground_banner_headline_and_font.php#comments but their help is on an older version of MT.

Sorry, but I've been cussing out loud just trying to understand this stuff. It'll be good if there's a FAQ, forum stickie, or at least good sized comments for the blocks of code in both the index and css files. I already scraped Mambo after trying to configure that mahemoth.

Makes me wonder why blogging is always being talked about in the news when its such a ***** configuring any of these Content Management Systems.

I was actually posting this on MT's forum but just as I clicked the submit button, their servers stoped responding

 

[pedro4ever]

Your complaints are pretty easy to understand. But as I look at your situation, and look at a fresh installation of Movable Type, I see that your issues are more with CSS instead of MT itself. However, since I don't want to leave you haning out on a limb, let's talk about a couple of the finer points of the MT layout, and how they intertwine with CSS.

         <div id="banner">
            <div id="banner-inner" class="pkg">
               <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
               <h2 id="banner-description"><$MTBlogDescription$></h2>
            </div>
         </div>

This is the default banner for a Movable Type setup. Your question is about which part of the CSS you need to modify to make the changes you'd like. The answer isn't as clear and easy as a 1-line answer, due to the flexability of CSS. CSS, as you may already know, can modify certain tags, a certain area, or any combination of tags/areas within tags/areas.

Let's look at each of the bits of CSS that could impact this little snippet of code (we're leaving out the pkg class, since if you look at your CSS it is really just a spacing helper)

#banner a { color: #fff; text-decoration: none; }
#banner a:hover { color: #fff; }
#banner { position: relative; }
#banner
{
   width: 710px; /* necessary for ie win */
   background: #a3b8cc;
}
#banner-inner { position: static; }
#banner-inner
{
   padding: 15px 13px;
   border-width: 2px 2px 0 2px;
   border-style: solid;
   border-color: #fff;
}
#banner-header
{
   margin: 0;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   line-height: 1;
   text-shadow: #36414d 0 2px 3px;
}

Not only do you have things in there that modify your banner, but stuff that will modify how links look in your banner. The problem that you encounter is that by default your site banner is a link to the site's index file. So, it never really appears as the color you've set in banner-header. It will appear as a link. The nature of the beast(s) will make it look for a property setting from the inner-most tag, going outward. So, it searches for how it should look as a link first at banner-header, then the pkg, the banner-inner, then banner. Since the CSS doesn't have any style specified for a link up until banner, it takes on those defined attributes.

That was my long answer. Sounds like you might need to take a deeper look into CSS. My consolation answers are that MT's CSS and page design are screwy, at best. I dumped their layout, and went for one of my own. Keep in mind that MT has a whole slew of pre-designed layouts. Get the StyleCatcher plugin, and you can use the designs of others. I had mixed results with it, but you might like it.

The other thing I suggest, if you're so quick to throw in the towel on blogging, is to check out Blogger. It's got some great templates, and easy publishing options that might just be the answer you're looking for. If you don't like their stuff, you can at least copy some of their page layouts for your own (or even swipe their stuff, and incorporate MT's tags to make your MT site look like a blogger site (I personally found blogger's sites to be very browser friendly, unlike MT)).