Fog Creek Software
Discussion Board

Knowledge Base
Terry's Tips
Darren's Tips

Multiple CSS Styles Within Article

I'm writing some articles that include code listings that I want to be styled differently from the body text. I've set up a style sheet to achieve this. The article template I'm using assumes that the code listing is contained within the extra1 field and styles it accordingly. The problem is that when I preview the article, CityDesk is opening a paragraph before the extra1 field, which means that the code listing is getting the appearance of the body text because I've defined attributes for the paragraph tag in my style sheet.

Is there a better way to do this or do I need to edit the HTML for each article so that the correct CSS selector is used for the listings? Thanks.

John Topley
Friday, October 18, 2002

I'm not sure that I really understand the question, but here's a suggestion.  Instead of using an external style sheet, use a <div> tag to enclose the code sample.  Within the <div> tag, include a "style=" attribute that contains the particular style elements that you want to apply to the code sample.

Alex Chernavsky
Friday, October 18, 2002

Use class selectors instead of just HTML selectors. Basically, in your stylesheet, have:

.code { /* my code styles here */ }

Then, in your template, do:

<p class="code">code examples</p>

Or whichever tag you use to open.

An external stylesheet is a good choice, but you still have to make sure your selectors are good -- and I find that class selectors are probably the best choice for 99% of cases.

Austin Ziegler
Saturday, October 19, 2002

I am actually using class selectors. I'm finding that CityDesk is adding a new paragraph tag before inserting extra1, which is negating the use of my codelisting selector from the template. Looks like I'll just have to edit the HTML manually. Thanks anyway.

John Topley
Sunday, October 20, 2002

All of the fields in an article (body, extra1, extra2, etc) have an annoying (to me) feature. If the field contains no carriage returns, it doesn't get surrounded by <p></p> tags when you include it in a page. If it contains at least one carriage return, each paragraph in the field gets surrounded by <p></p> tags.

This is annoying when building list pages, such as blogs. Some days my blog entry is a single paragraph, and other times it's two or more paragraphs. So when I use CityScript to build my weblog page, sometimes my blog entries have proper <p></p> tags around each paragraph, and other times they don't.

The only workaround I've found is to manually add the <p></p> tags to single-paragraph weblog entries by going into HTML view in the article (and making sure not to change back to Normal view).

I'd prefer it if you could specify in CityScript whether a field should be included exactly as-is, or translated into HTML. So x.exactExtra1 would include the Extra1 field without HTML formatting, while x.Extra1 would convert it to HTML before including it.

Darren Collins
Sunday, October 20, 2002

Darren, I think I have a situation similar to what you describe.  In my case, I want to fill various CD fields with information for future conferences (venue, contact person, city, etc.)
I want to format these items in a compact way like this:
Event:  Conference Name
Venue: The Grand Hotel
Contact: Mr. KnowItAll

Instead I got lots of whitespace between each line, which was caused by the <p> tags.

My way out was to style these tags (with IDs or Classes) and get rid of the margin above and below the paragraphs:

div#ConferenceInfo p{margin:0;padding:0;}
<div ID="ConferenceInfo">
<p >Name:{$ .teaser }</p>
<p>Location:{$ .author .}</p>

Note that the div can be part of the template, so that there is no need to hack the html created when you type your blog info

Joel C. Goldstick
Tuesday, October 22, 2002

My markup in the last post has neglected to show the end of the style block.  </style> should be placed before the div tag.  oops.

Joel C. Goldstick
Tuesday, October 22, 2002

The way I usually work around this paragraphing problem is to use Shift-Enter instead of Enter at the end of each line. This inserts a <br> tag instead of a carriage return, so your field doesn't get <p></p> tags inserted into it.

Darren Collins
Wednesday, October 23, 2002

*  Recent Topics

*  Fog Creek Home