[Pro] Overriding CSS Text Formatting used in Template Helper

Freeway
1

I’m working with a page that has CSS styling in the HTML Markup… Before section which defines the color, font-family, font-size, etc. to be used in various items on the page which have Template Helper applied.

I’ve found that when trying to apply text formatting to other items on the page with the Style Inspector > Text (not using Template Helper), any formatting I use (such as h1:) are overridden by the Before code. It looks the way I want it to in Page view, but when viewed in Preview mode the Template Helper takes over.

How do I apply the text formatting I want on to non-Template Helper HTML?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Robert,

Basically, there are three places for styles - external stylesheets,
the html document head, and inline with the html code. Each of
these style locations are like ‘layers’ and have their own rank of
importance when the browser is trying to draw the page. This is called the
Cascade Order (remember, CSS is Cascading Style Sheets).

Attributes for earlier items in the Cascade Order are replaced/overwritten
when those same attributes are described differently further on in the
order. For example, the color attribute applied to the h1 header
element in the external stylesheet is overwritten when the color element is
also applied to the h1 header element in the document head stylesheet.
Provided that you can, then the color style attribute when applied directly
to the html h1 element would overwrite all previous color definitions for
the h1 element.

If all that has your head spinning, then just take a minute or two to let
it sink in. Document style attributes trump external stylesheet
attributes. Inline style attributes trump them all.

Now, I’ve not used Template Helper, and likely someone else who knows more
about it can give better advice. My thought would be to find another way to
separate the h1 elements out so the stylesheets see them as not just h1
elements, perhaps with a special class style or by targeting a parent
element or div. Or by manually moving the h1 style into the document head,
preferably after any style put there by Freeway or Template Helper.

–
Ernie Simpson

On Mon, Apr 30, 2012 at 2:03 PM, Robert email@hidden wrote:

I’m working with a page that has CSS styling in the HTML Markup… Before

section which defines the color, font-family, font-size, etc. to be used in various items on the page which have Template Helper applied.

I’ve found that when trying to apply text formatting to other items on the
page with the Style Inspector > Text (not using Template Helper), any
formatting I use (such as h1:) are overridden by the Before code.
It looks the way I want it to in Page view, but when viewed in Preview mode
the Template Helper takes over.

How do I apply the text formatting I want on to non-Template Helper HTML?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

TemplateHelper doesn’t do anything in particular to styles.

In its normal (non-partial) mode, all it does is remove a “scratch” element from the page after Freeway has used it to generate styles in the page head. (The basic idea is that you want to use some Freeway-generated styles in a hand-coded or included from another file “fragment” of HTML. Freeway doesn’t publish styles that aren’t used on that page, so TemplateHelper lets you define an element containing those styles, then helpfully erases it from the page before the final publish step.

In its partial mode, in addition to everything above, it also saves the erased element to an external text file. This lets you include that element back into the current page or another page in your site. This lets you do things like create a catalog with 100 items and only draw one item in Freeway. Your database and application server just iterate over the collection of products and decorate that one template with all 100 products’ content.

But in any case, this Action doesn’t do anything that Freeway can’t already do with respect to CSS styles.

What you may need is a gentle introduction book about CSS to help understand what Freeway (or the hand-code in your page head) is actually doing. The only CSS books I have are expert-level, so I don’t have any recommendations for you on that front.

Ernie has already given you the basics regarding the order of precedence, which is a key thing to understand before you go any further.

The next thing to learn is how the selector (the part of a CSS “rule” that lies outside of the curly-braces) works. This is a very subtle thing – you can have two different selectors with the same words in them and a slightly different order or different set of modifier punctuation and they will do entirely different things. The attributes inside the curly-braces are, for the most part, pretty self-explanatory.

Walter

On Apr 30, 2012, at 2:36 PM, Ernie Simpson wrote:

Now, I’ve not used Template Helper, and likely someone else who knows more
about it can give better advice. My thought would be to find another way to
separate the h1 elements out so the stylesheets see them as not just h1
elements, perhaps with a special class style or by targeting a parent
element or div. Or by manually moving the h1 style into the document head,
preferably after any style put there by Freeway or Template Helper.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options