Formatting help

[cassandra87]

Hi - I need some simple help with formatting. I've modified the Jazzcafe template, but I really have very little idea what I'm doing. Nevertheless, I've managed to create a relatively decent blog theme. I can't quite figure out a couple of things, though - I'm having problems changing the color of the "go" button under the categories and authors fields of the sidebar (and associated text), the "preview" and "submit" buttons and text when you submit a comment, and the text in the "In reply to" box, also in the submit comment page. I'd really appreciate any help - the blog is takoma-bark.com...

Thanks in advance!!!!

[garvinhicking]

Hi!

Usually, tweaking this only requires minor changes in your CSS files.

The hardest issue is to find the right element path you need to style. Like, your GO Button would be styled with this CSS:

Code: Select all

#serendipity_category_form_content input {
  color: red;
  background-color: blue;
}

Finding the right elements can be done either by looking up your HTML sourcecode, but much easier with the appropriate toolset.

Using the Firefox browser plus the plugins Aardvark, EditCSS and Firebux is VERY helpful and can give you point+click selection of the element path you want to style, plus instant tryout of your updated CSS.

HTH,
Garvin

[cassandra87]

Thanks! I figured out that it was all a matter of tweaking and inserting color tags, I just couldn't figure out where to insert/change them.

I installed aardvark and editCSS - but the info I get from aardvark is confusing. For whatever reason, Aardvark seems to be having a hard time extracting the ID values for the elements. What I figured out was that if I used Aardvark to select the parent structure (excuse my murdering of terminology), such as the entire sidebar instead of just the category element, I could view the source code then figure out the element id from there.

There's two I'm still stumped on, though - I got everything fixed in the comment form, except for the stubborn "in reply to" pull-down selector. It looks like the id should be "serendipity_replyTo", but using the input phrase below doesn't work. I'm having the same problem with the text on the footer.

Besides that, any input on what anyone thinks of the design would be appreciated!! The blog is takoma-bark.com - no posts yet (except a test).

Thank you!!!

[garvinhicking]

Hi!
Actually sometimes you cannot change Elements by their ID just with a "#serendipity_replyTo", because other CSS settings take precedence, if their path is entered more clearly. In those cases you must also specify your element more precisely, like:

Code: Select all

#serendipity_entry .serendipity_comments #serendipity_replyTo {... }

(This is just an example and might not be the real "path"!)

HTH,
Garvin

[judebert]

I use SlayerOffice's MODI; it's a bit grabby, but it's useful. If you want to change the text color of the label itself, you should be able to use

Code: Select all

.serendipity_commentsLabel {
  color: white;
}

If you want to change the text inside the dropdown... well, sometimes that doesn't work at all, because the browser uses the OS to draw those. Depending on the browser and OS in use, you might get some weird results. Google up "CSS Styling Forms" and you should get at least one good article.

I hate disagreeing with Garvin, because I always turn out to be wrong, but I believe that the ID of the item is the most specific possible selection. However, if it is redefined after your definition, the last definition is the one that takes precedence.

I checked it out with EditCSS using FireFox 1.5 on Debian Linux. I changed the colors of the text and dropdown as the last things in the style file, and it worked as expected. I used:

Code: Select all

.serendipity_commentsLabel {
  color: white;
}

#serendipity_replyTo {
  color: black;
  background-color: red;
}

[cassandra87]

Okay, I'm going to very clearly show that I have no idea what I'm doing here.

When I included Garvin's code, using

Code: Select all

#serendipity_whatever input {
  color: #000000;
  background-color: #F9EADA }

nothing happens. But when I omit the "input" word, it works perfectly, so that was my problem. What's the function of this word, and how do I know when to include it?

Thanks for putting up with my ridiculous questions!!

[judebert]

No stupid questions here.

The trick to using CSS is selecting the thing you want styled. Everything before the curly brace is a selector. Since we're styling HTML, we've got lots of little tags, all exactly alike, nested within each other. Picking the exact one you want to style can get a little tricky.

Luckily, we've got three different names for any tag: the tag type (like div, span, or p), the tag's class (specified with class="the_class"), and the tag's ID (specified with id="the_id"). Since you could give something the same class a a tag (like, <li class="div">), we need a way to specify which one we're talking about when we write our CSS rules.

To specify a tag type, just write it (as in div). To specify a tag class, use a period (as in .the_class). To specify a tag ID, use the octothorpe (as in #the_id). (And aren't you impressed with my vocabulary? )

These three things alone give us a lot of power to indicate a particular tag or group of tags. For instance, if you wanted to make all the comment text white, just assign it the class "comment_text", then write a CSS rule like this:

Code: Select all

.comment_text {
  color: white;
}

There are other attributes you can change, too. Google up a CSS tutorial for more detail.

Despite this power, we need more. CSS also lets us pick a tag inside another tag with the space character. So, given HTML like this:

Code: Select all

<ul class="myList">
  <li class="myBullet">A <b>bullet</b> item</li>
</ul>

We can specify only "myBullet"s inside "myList"s with a space character:

Code: Select all

.myList .myBullet {
  color=blue;
}

You can nest as deeply as you like. The item can be anywhere inside the container. Since the <b> tag above is inside the <li> with class myList, this will work too:

Code: Select all

.myList b {
  font-size: 110%;
}

So the "input" you were looking at was specifying an <input> tag contained within an item whose ID was "serendipity_whatever". There must have been something with the ID "serendipity_whatever", which you wanted to style, but no <input> inside it. When you removed the input, the whatever got styled.

Some browsers support other stuff, but almost all browsers support at least this much. There is more syntax you can look at, and other rules, and WAY more attributes. Once again, Google is your friend.

Hope that helps!