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
Send Topic Print
Export unaffected by CSS (Read 8414 times)
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Export unaffected by CSS
Dec 31st, 2010, 6:25am
 
My 'article style' outline is working fine except that the (simple) CSS stylesheet I have included isn't working.

1. The CSS itself has been validated and checked by others, so there's no issue with missing semicolons or braces. it is a very simple list of styles

2. I am not sure that the html templates are correctly calling the CSS style note

3. The way the outline is structured is probably not an issue but a screenshot is available here:
http://web.me.com/greiggy/TechNotes/screenshots2.html

4. The head section of the article.html template is shown here:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>^title^</title>
		<link rel="stylesheet" type="text/css" href="css/article.css" />
	</head>
	<body> 



In particular, is this line correct?
Code:
<link rel="stylesheet" type="text/css" href="css/article.css" /> 



I did alter the name of the CSS note to "stylesheet" but it didn't help.

Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Export unaffected by CSS
Reply #1 - Dec 31st, 2010, 7:27am
 
What is the name of the file exported to the "css" sub-folder of the HTML export? I've a hunch it's not "article.css". Open HTML view for the the "styles" note (yes, that exact note the one containing the CSS code). Check that the export filename is "article"; that's in the "File name" box top centre of the HTML view. The box below should say ".css" (i.e. period-c-s-s). It is those setting that ensure "styles" exports a note called "article.css".

FWIW, you could make the 'article' export template calculate the linked CSS filename using action code but I think that's overkill.
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: Export unaffected by CSS
Reply #2 - Dec 31st, 2010, 7:46am
 
Sticking with your para 1 recommendation, it all seems to check out to me. I have been known to overlook the fairly obvious  Huh, so here's another screenshot so you can take a look:
http://web.me.com/greiggy/TechNotes/screenshots3.html
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Export unaffected by CSS
Reply #3 - Dec 31st, 2010, 8:03am
 
Aha! Got it - look at your first screen shot. Notice how you've put containers "CSS" and "JS" inside "Internals". compare that to my earlier demo where they are a root level.

One thing you can't ask TB to do is to export a note to an export (folder) other than it's logical location based on the TB hierarchy. Thus your layout will export the CSS file to:

[exportfolder]/Internals/css/article.css

But the main export page (article.html) expects it at:

[exportfolder]/Internals/css/article.css

Either (don't do both!):
- select the CSS & JS containers in your TBX and promote them to root level (select, then click shift+tab key) and re-export and all should work.
OR
-  change the article export template to use (change in red):
<link rel="stylesheet" type="text/css" href="Internals/css/article.css" />

Personally, I'd go with the first,but the choice is yours.

[Incidentally, kudos to Paul Waters whose answer along the same lines fell foul of some odd forum message posting glitch]
Back to top
 
 

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

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Export unaffected by CSS
Reply #4 - Dec 31st, 2010, 8:19am
 
Note, too, that the stylesheet URL above assumes the exported note is at the top level of the document. A URL that will be correct from anywhere in the document would be ^root^Internals/CSS/stylesheet.CSS

^root^ exports nothing for a top-level note, ../ for a second-level note, ../../ for a third-level note, and so forth.
Back to top
 
 
WWW   IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Export unaffected by CSS
Reply #5 - Dec 31st, 2010, 8:22am
 
A good way to diagnose stylesheet difficulties like this one, incidentally, is to check the "error console" window in Safari or Firefox. (enable the develop menu in safari preferences)

In this case, safari would have complained that it could not find the stylesheet you had promised.
Back to top
 
 
WWW   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Export unaffected by CSS
Reply #6 - Dec 31st, 2010, 8:23am
 
I understand (now) why CSS and JS need to be at root level -- have made that change. Regret to report that the output is just the same, plain vanilla Times and random sizes. Sad

At the risk of being boringly belt-and-braces, here's another screenshot:
http://web.me.com/greiggy/TechNotes/screenshots4.html

Any more suggestions (I really thought you had it nailed this last time!)
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Export unaffected by CSS
Reply #7 - Dec 31st, 2010, 9:36am
 
At this point it's useful if your 'error' ports keep a running tally of what we've fixed/discounted as a cause.  It's too easy to lose track. So

- do we know the correctly named CSS file is now exported where the HTML page expects it to be? True? I'm assuming it to be "acticle.css" in subfolder /css/ of the export unless told otherwise.

- do we know the CSS is valid. Yes - I do recall a validation being reported.

- do the CSS styles defined actually apply to the HTML we're exporting. True? This is possibly a problem as you're not using the original demo but your own code. Take your exported HTML page and the exported CSS and put them in the same folder, correct the <link> element's href value accordingly.  does the CSS work - it should.  If it doesn't this isn't an TB problem and is best followed up in a specialist CSS forum.

Is the a link to your current version of the TBX?
Back to top
 
 

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

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: Export unaffected by CSS
Reply #8 - Dec 31st, 2010, 11:58am
 
Just compare the exported href for the stylesheet with its actual URL; inspection should quickly reveal the difference. (Remember, URLs are case-sensitive.)

Next, open the exported page in Safari, closing other Safari windows.  Open the Activity Window from the Window menu. Your style sheet will likely be highlighted in red (because Safari couldn;t find it); compare the URL Safari is trying to open with the URL you supplied in the link tag.
Back to top
 
« Last Edit: Dec 31st, 2010, 12:00pm by Mark Bernstein »  
WWW   IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Export unaffected by CSS
Reply #9 - Dec 31st, 2010, 1:54pm
 
I think I've covered the points raised by MarkA and MarkB above. Here are screenshots of the export folder, showing (centre) article.html, css and js folders; (above) the head with the href from the exported article.html i.e. looking within article.html as shown centre; and, to verify the path, (bottom left) the css folder opened to show article.css.

1. path looks fine

2. No errors shown on error console in Safari

3. Activity in Safari shows only two items -- article.html and article.js.
NO MENTION of article.css

So, although we can see that it's there and the path looks perfect and they are all together within the EXPORT folder, there is no activity for the css folder.

Covering MarkA's point about the original CSS code in the mode, having experienced difficulties and begun the verification process, I deliberately reduced the CSS to a bare minimum, which was verified two or three times and I got someone on a CSS forum to check it. You have this in one of the earlier screenshots, not easy to read, but I'm sure it's OK.

We seem to have the right components being exported, with the right paths. For some reason, article.html is not picking up article.css in the css folder sitting next to it.

Thanks for your patience in helping to unravel this
Back to top
 
 

--IanG
  IP Logged
Ian Greig
Full Member
*
Offline



Posts: 74
Wokingham, UK
Re: Export unaffected by CSS
Reply #10 - Dec 31st, 2010, 2:39pm
 
Good news -- got it sorted.

My son (who *does* have a computer science qualification) went through it, found a typo in the naming of the stylesheet, fine-tuned the CSS and it's working a dream.

He was asking a lot of questions about Tinderbox and what it does BTW. Potential customer (as an aspiring academic) but first I have to get him to see that Mac is the enlightened way as I have brought him up badly and he has an all-Windows mindset at present.

Thanks for much helpful advice -- Happy New Year all
Back to top
 
 

--IanG
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: Export unaffected by CSS
Reply #11 - Dec 31st, 2010, 6:47pm
 
Glad it's sorted and Happy New Year to all. Good luck with tempting your son away from the Dark Side!
Back to top
 
 

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