Fog Creek Software
Discussion Board

Knowledge Base
Terry's Tips
Darren's Tips

Styles in extras

I want to apply a css style to links in the sidebar of my articles.  Can anyone tell me if this can be done, and, if so, how?

David Brewster
Sunday, April 21, 2002

I haven't tried applying a style specifically to links in the sidebar, but I do use CSS for the content of my site. Here's the way I'm doing it:

Create a template that uses the .css extension and contains only the body tag.

Create an article called 'style', cut & paste or type in the CSS in HTML view.

Save and close, copy the 'Magic Name' and paste it into the main template's style tag so it looks like this:
<link rel="stylesheet" type="text/css" href="PTMFOG0000000107">

The best part of this whole process is that CityDesk resolves the relative link when publishing so if I change a style attribute only the new .css file gets published.

I make no claim that this is the _best_ way to do it, only that it's working for me.

Hope this helps!

Eric Chromick
Sunday, April 21, 2002

I wouldn't create a template, I would create an HTML File and name it something like styles.css.
Include it in your templates as shown above, then, if you have certain spots in your templates/articles you would like to use a certain style for, write something like:
<span class="headline">{$.Headline$}</span>

Monday, April 22, 2002

Thanks for your suggestions.  I have successfully applied styles to the sidebar as a whole but can't apply styles to particular parts of the sidebar. 

The problem is that if you put tags into the sidebar box, they aren't read as tags (i.e. the sidebar box is a 'Normal' view and their isn't the option of HTML view, as there is for the articles themselves).

David Brewster
Tuesday, April 23, 2002

My workaround for this is to edit the HTML in a temporary article - I have a permenant /temp/edit.html article on my site that I use for it, and then switch to normal view and copy/paste it into the sidebar.

Clumsy, but it works. Since you're talking about stylesheets, I'm assuming you're a sophisticated enough user to do this (and not an 'end user' who'd be lost).

Another option is to use sidebar, extra1, and extra2 for your different styles.

Tuesday, April 23, 2002

You have to do two things in the template:

(1) change the "span" that surrounds the sidebar so it includes id="sidebar"
(2) define a style #sidebar A

This will affect all A's inside the sidebar.

For example:

<style type="text/css">
#sidebar A {  background-color: #00FF33}
{$ if nonblank .sidebar $}
      <span id="sidebar" style="PADDING-RIGHT: 1ex; PADDING-LEFT: 1ex; FLOAT: right; PADDING-BOTTOM: 1ex; MARGIN: 1em; WIDTH: 25%; PADDING-TOP: 1ex; BACKGROUND-COLOR: #dddddd">
{$ .sidebar $}
{$ endif $}


Joel Spolsky
Tuesday, April 23, 2002

*  Recent Topics

*  Fog Creek Home