Comments and 'Boxes and Borders'

[msmcknittington]

I've modified the Boxes and Borders theme in Grass using the options in Customize Your Theme to include a background. I had to change the background color of the entries, modules, etc. to a solid color to allow the text to show and be legible. I'd really like to use custom entry pages for my journal, but unfortunately I don't see an option that would allow me to set a different background color for comments so they can be read. I currently have the entry pages set to display in the site layout, but I'll turn it back to my entry style if anyone wants to see what's going on.

Is there any way to do this? I'm fairly ignorant of coding, but if you explain it slowly, I ought to catch on pretty easily. :D Even just knowing if there's a better style variation for the theme I'm using that would make this possible would be wonderful.

Comments

[matgb]

Is there any way to do this?

Yes, but not having used B&B, I'm unable to test it. Go to Customize Journal Style and paste the following in:
.comment {background-color: #fff;}

Turn entry pages on. If it hasn't worked, let me know and I'll have a look, I should be online for a bit, but need to see it live to figure out what's actually wrong.

[msmcknittington]

Oh, good grief. I did not reply to your comment before. Sorry about that!

Here's what I meant to reply with:

Whoo, that worked! Thank you so much! I have entry pages turned on now if you want to take a look and make any suggestions. But only if you want to, since my comments are now able to be read.

[matgb]

Cool. Only extra suggestion I can add having seen it is to put some padding in there. Change it to:


.comment {background-color: #fff, padding: 1em;}

Brief explanation. The main code gives every section of the page a name, either a class or an ID. All comments are given the class .comment, so .comment {} says do everything within {} to everything called comment.

Background-color is obvious, #fff is the hex code for white, and padding is the blank space with the area before you display the content, you'll probably want to fiddle with the numbers, can't figure with your layout whether it defaults to 1em or 0.5em for the main entry. an em is the width of a single character in your browser settings, normally set to 16pt unless you've changed it.

LMK if you want anything extra tweaked.

[msmcknittington]

Thank you! The comments look much better with some padding.

Is there any way to get rid of the text entirely in the header? I'd like the title of my journal to appear in a fancy pants font, so I have an image with the title in that font, which you can see if you click over. I'd like the part where it say "msmcknittington / [whatever page you're on]" to go away. I thought just not entering a title would make it go away, but not so. I bet it's going to be something like .header {something about displaying text here}, right?

Thank you so much for sharing your knowledge. It's very kind of you to do so!

[matgb]

Close enough, although in this case it's #title, #pagetitle {display:none;}

Bits of a page can be given either an ID or a CLASS. An ID has to be unique (this is the header, or in this case the title), whereas a CLASS can be repeated multiple times (entry headers, etc). A page should only have one title, ergo it's an ID, denoted by # instead of .

On my display, your image is obscuring the text, but it's still there, this code will turn it off from display completely (but leave it there for screenreaders who can't see the picture)

[msmcknittington]

Whoo, that worked! Thank you so much! I have entry pages turned on now if you want to take a look and make any suggestions. But only if you want to, since my comments are now able to be read.