Welcome, Guest. Please Login
Tinderbox
  News:
IMPORTANT MESSAGE! This forum has now been replaced by a new forum at http://forum.eastgate.com and no further posting or member registration is allowed. The forum is still accessible via read-only access for reference purposes. If you wish to discuss content here, please use the new forum. N.B. - posting in the new forum requires a fresh registration in the new forum (sorry - member data can't be ported).
  HomeHelpSearchLogin  
 
Pages: 1 2 3 
Send Topic Print
Using CSS in template (Read 26433 times)
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Using CSS in template
Dec 11th, 2010, 3:35pm
 
ADMIN NOTE: Much of this thread's length arises over misunderstanding about running shell scripts  - as oposed to TB doing so. You are advised to try the simple test at post #37 before ploughing through the whole thread, as that alone may solve much of the problems discussed therein.

Quick search didn't reveal much on this, so here's the question:
Where, exactly, is the best place to locate a cascading style sheet? Could be a separate template for the purpose, i.e. a kind of external CSS template, or within an existing template.

Having tried incorporating a simple CSS list into the header of an article.html template (see my recent thread "edit html difficulty") I found it didn't play well and basically I had to remake all the settings.

I am following the excellent Les Orchard tutorial which I would recommend to anyone grappling with designing a document structure for html export e.g. into a word processor for printing etc. There is much guidance here that I have not found elsewhere. I am using the particular scheme of prototypes and templaes he advocates.
http://decafbad.com/2010/06/tinderbox-article-tutorial/article.html

To use CSS for the fonts, sizes of heading etc takes this a step forward. It can be done using styles in a good WP such as Nisus but I am following a "one hit" philosophy here -- and would welcome a steer (or several).
Back to top
 
« Last Edit: Dec 20th, 2010, 5:15am by Mark Anderson »  

--IanG
  IP Logged
Paul Walters
Full Member
*
Offline



Posts: 267

Re: Using CSS in template
Reply #1 - Dec 11th, 2010, 9:25pm
 
I don't know if there's a "best place to locate" style sheets.  I believe there are two basic approaches:

1) Put the CSS in one or more notes and ^include(MyCssNote)^ in the appropriate place in the template(s) that define your HTML structure.  The ^include^ should be in the head section, between style tags.

2) Put the CSS in an external file (mycssfile.css) that is referenced in the head of the HTML with

Code:
<LINK REL=StyleSheet HREF="mycssfile.css" TYPE="text/css" MEDIA=screen> 



taking care to use the correct relative references so that the file is in the right place for the HTML to be styled as needed.

For me, the rule of thumb is: use the first approach in cases where the CSS is specific to a document's styling requirements, and use the second approach for CSS that is used in a number of document.  Frequently, I blend the two approaches.

I didn't follow exactly what the problems are with your CSS not "playing well".  Usually when I have trouble with CSS it's because I made a typo (very easy with CSS), or I included HTML elements in the CSS include that conflicted with the CSS.  A downside of including CSS in the Tinderbox document is that it's difficult to troubleshoot complex styling.  Over here, for troubleshooting I change to using an external .css file and CSSEdit, which is simple to use and gives immediate preview of changes to the .css file.
Back to top
 
« Last Edit: Dec 11th, 2010, 9:26pm by Paul Walters »  
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #2 - Dec 12th, 2010, 10:55am
 
@Ian, I concur @Paul's comment that internal/external use really depends on the scope of use you intend. I'd add a further qualification - whether a given CSS file is likely to require (regular alteration). If not, it is easy then to use 'internal' CSS and then simply copy the note from one TBX to the other.

If using 'internal' CSS - i.e. exporting notes as CSS - bear in mind the note can only export to a location with the same relative position as in the TBX. For instance, you can't export a note nested 2 containers down to the root of the website (at least I don't believe you can - true anyone?).

Anyway, in answer to @Ian's problems with the Les Orchard demo, I made a quick version that:
  • Strip out the MMD stuff - that's better learnt - for new users - via a separate demo (don't use MMD myself so can't do the latter).
  • Corrects a few code typos.
  • Updates the method to use $ID rather than a user attribute.
  • Exports the CSS and JS files - as used by Les' demo - from the TBX.
Use my TBX with the image folder from Les' demo. I've not had time to revise all the original demo's text but I wanted to put this up as I may not have time again for a while. Get a ZIP of the demo file here.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #3 - Dec 13th, 2010, 8:03am
 
I've just re-uploaded the demo, as I discovered I'd not changed all the code references to the old $id user attribute.  The latter is now removed.  I've also added a validating DTD and adjusted the HTML and CSS accordingly**. None of these changes work against adding back MMD for those that want, but I'm aware that as such mark-up isn't mainstream this version of the demo might be of more use to a wider audience just trying to make in-page links.

**Basically, the <article>, <section> and <footer> HTML 5 tags have been remade as CSS classes applied to <div> and an XHTML 1.0 STRICT doctype applied.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #4 - Dec 13th, 2010, 9:23am
 
On the MDD, tack, this code poses one maintainability problem:

^value(runCommand("perl ~/..path..to../Markdown.pl",$Text)^

What happens if the Perl script moves? One thing to consider is to 'prototypise' the runCommand first parameter. Add a note called "MMD" with the $Text perl ~/..path..to../Markdown.pl - N.B. no quotes - and then use this runCommand:
^value(runCommand($Text(MMD),$Text)^

Now, if you need to move the script or change the filename, etc., at least it's only one edit per file. At the OS end of things you could create an alias and use the latter in MMD's $Text.  Now you can rename/move the MMD script and never need to touch the TBXs. 2 levels of breakage protection!

[later - edited some dumb typos. I can never proof read on screen.]
Back to top
 
« Last Edit: Dec 20th, 2010, 4:48am by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Using CSS in template
Reply #5 - Dec 13th, 2010, 9:47am
 
Looks a good solution to me -- I will try that when I get back to my Mac.

Perhaps the reason that Les O recommended locating the script in a hidden file (I thought it was an odd move at first) was precisely for this reason, the script is unlikely to suffer aggravation if it is buried deep and inaccessible to the Finder.
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #6 - Dec 13th, 2010, 10:22am
 
Also,  by having only some templates use the MMD runCommand and associating them with  certain prorotpyes, (e.g. *section), it is possible to compartmentatise MMD use within a doc, should that be required.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Using CSS in template
Reply #7 - Dec 13th, 2010, 4:31pm
 
So, do I detect a little bit more warmth growing towards MD and MMD? Cool
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #8 - Dec 13th, 2010, 5:18pm
 
No antipathy - just not my style of working.  I do more (hand) coding that prose writing so I'm used to seeing mark-up and ignoring it as I read. If I wrote more and coded less I'd probably view it differently.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Using CSS in template
Reply #9 - Dec 14th, 2010, 5:41pm
 
Mark A, I've put some content into your demo article to take this forward.

Quote:
Add a note called "MMD" with the $Text perl ~/..path..to../Markdown.pl - N.B. no quotes - and then use this runCommand:
^value(runCommand($Text(MMD),$Text)^


I have done this (see screenshot) but might need some advice on configuration -- not sure how to make the export process call the script. It is not set as a template.



This is what is in the note -- I think (following Mark B) better to start /usr.... rather than perl/usr
Code:
$Text /usr/local/bin/Markdown.pl

^value(runCommand($Text(MMD),$Text)^ 



Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #10 - Dec 14th, 2010, 6:16pm
 
Looking at your screen shot, it's because there's no note called "MMD", so the run command fails as it can't find MMD's $Text.

Unix is less my area but I'd use Terminal and check in that environment that the script runs from the path you think it does before testing it from a TBX export. That way you know the disconnect is in TB and not in the shell outside.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Using CSS in template
Reply #11 - Dec 15th, 2010, 4:00pm
 
Path should be OK because I sorted out the path difficulty before.

Can't make the Markdown (aka MMD) note work and the CSS looks a bit strange and I am getting mostly huge type
Back to top
 
 

--IanG
  IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Using CSS in template
Reply #12 - Dec 15th, 2010, 4:25pm
 
It's a bit difficult to know how to help you with "the CSS looks a bit strange".  In what way is it strange?

Of course, if your CSS (intentionally or otherwise) tells your browser to use huge type, your browser will do exactly that!  Check your HTML; perhaps you have things marked as headings that should not be headings.
Back to top
 
 
WWW   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Using CSS in template
Reply #13 - Dec 16th, 2010, 2:56am
 
Can I take it that the arrangement of the notes in the Tinderbox structure (screenshot above) looks cogent? In particular, there is a container for CSS with two notes within, one for styles, and one called Markdown.

The Markdown note contains the two lines quoted except that I have changed 'MMD' to 'Markdown'.

What concerns me about this is that the note basically calls itself and I cannot find reference to this note above (or elsewhere). Maybe that's OK?

** What is needed to actuate the contents of this (or any other) note?

I can go through the CSS and get it better -- it just isn't done the way I would do it. I have had this working before and have references to work from, so I am more confident about this.

What I find frustrating, as a new user, is that there is not much documentation. The Tinderbox Way is probably due for a revise. I am looking for 'worked examples' and not finding them. Much of it assumes a certain knowledge of how TB is hand coded.

The nearest thing to a 'This is what you do, and why' step by step guide was Les Orchard's scheme for export.

We could do with more in this area.
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Using CSS in template
Reply #14 - Dec 16th, 2010, 3:59am
 
I'd deprecate putting the 'Markdown' note in the CSS container.  It's not an export note and not CSS. The 'Markdown' note is simply a place to store some code that happens to call the MMD script, which happens to do a text transform inserting HTML code inline. Thus it better belongs inside 'Internals'. Either way, it doesn't (need to) export

If you put a specimen output with the bad CSS online and post a URL it might be easier to diagnose what the issue is. Incidentally, if the CSS text in the source note matches the text of the exported CSS file, the error is in your choice of CSS/HTML mark-up rather than anything TB is doing. (Lest helpers here state the obvious to you, it might help if you also note whether you know how to write HTML/CSS or are learning those too - hard to guess from discussion thus far).
Back to top
 
« Last Edit: Dec 16th, 2010, 4:03am by Mark Anderson »  

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Pages: 1 2 3 
Send Topic Print