Page 1 of 1

Problem using CSS styles

Posted: Sat Feb 17, 2007 11:08 am
by Anastasis
I am in the early days of testing CMSMS for use by for my employers website and quite possibly my own.

I haven't yet got down to building my own templates and have just been experimenting with the installed CMSMS design. I am impressed with the simplicity of its use and am enjoying using it.

I have tried shoehorning in a plain HTML page designed in Dreamweaver from my employer's website which uses CSS styles but for this page only (as it is used for an HTML email) these are not defined in a separate stylesheet, instead they are defined inline in the HTML.
The page is table-based (is this the best method with CMSMS or should DIVs be used?) and I had to remove some of the 'Width' and 'Height' tags that Dreamweaver had embedded, but otherwise the page has gone in very well.

One problem though when published in CMSMS is that it doesn't look quite the same in terms of the styles that are defined and used as it is seen my employer's website or in the HTML emails we send out. CMSMS doesn't seem to have 'rendered' (if that is the right word) the HTML in the same way.

This affects lines at the edge of some cells, some hyperlinks on the right-hand side which have had 'no decoration' (i.e. no underlining) defined for them, as well as the size of the text itself.

Rather than explain any more, please have a look at the page as displayed in a private area of my employer's website:

~ttp://www.chasecooper.com/Email_Newsletter_Template.php

and as displayed on my CMSMS test website:

~ttp://ww~.lunnlimited.co.uk/cmsmadesimple/index.php?page=email-newsletter

Please can someone explain why CMSMS renders the HTML styles differently to their default as they were designed?

Many thanks in advance.

Re: Problem using CSS styles

Posted: Sat Feb 17, 2007 11:37 am
by tsw
probably the default styles from cmsms are conflicting with some other styles (thats why its better to start your own templates if you want to create specific layout)

also if your old styles might wont with the different html structure.

cmsms wont change the html you have written or defined in templates. (although we have thought about running html through validator ;)

From cmsms point of view it doesnt matter if you do table or div layout, but creating layout with divs give you more flexibility and is more accessible and usually semantically better. I suggest that everyone that wants to create templates themself learns a bit html and css and writes them from the ground up (dreamweaver and other wysiwygs are known to produce hard to read, hard to debug and sometimes even invalid html)

hope this helps

Re: Problem using CSS styles

Posted: Sat Feb 17, 2007 1:15 pm
by Anastasis
tsw wrote: probably the default styles from cmsms are conflicting with some other styles (thats why its better to start your own templates if you want to create specific layout)
Thanks for your reply and help on this.

Actually on further investigation, it looks like the editor in CMSMS has stripped out all of the styles defined in the page itself. If you look at the source of the page on my employer's website and compare that with the source of the page on my test CMSMS site, my employer's website source includes the styles at the top of the source, but they are missing from the CMSMS test site.

I put the source into CMSMS by switching to the source view in the content editor, and then pasted the source HTML in, then switched back to WYSIWYG view and submitted the page - the result is as displayed on my test site - with the styles stripped out by the content editor.

I tried repeating the process, but this time not switching back to the WYSIWYG view before I pressed submit.

The result on my test site was a page with a lot of code embedded in the top of the page as shown below:
string(183) "Smarty error: [in content:content_en line 5]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px (Smarty_Compiler.class.php, line 439)" string(117) "Smarty error: [in content:content_en line 5]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(237) "Smarty error: [in content:content_en line 6]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: bold; color: #666666; font-weight: bold; (Smarty_Compiler.class.php, line 439)" string(117) "Smarty error: [in content:content_en line 6]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(204) "Smarty error: [in content:content_en line 7]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: italic; (Smarty_Compiler.class.php, line 439)" string(117) "Smarty error: [in content:content_en line 7]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(207) "Smarty error: [in content:content_en line 8]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; (Smarty_Compiler.class.php, line 439)" string(117) "Smarty error: [in content:content_en line 8]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(241) "Smarty error: [in content:content_en line 9]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #FFFFFF; font-style: bold; (Smarty_Compiler.class.php, line 439)" string(117) "Smarty error: [in content:content_en line 9]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(372) "Smarty error: [in content:content_en line 10]: syntax error: unrecognized tag: border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; (Smarty_Compiler.class.php, line 439)" string(118) "Smarty error: [in content:content_en line 10]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(369) "Smarty error: [in content:content_en line 19]: syntax error: unrecognized tag: border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; (Smarty_Compiler.class.php, line 439)" string(118) "Smarty error: [in content:content_en line 19]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(453) "Smarty error: [in content:content_en line 28]: syntax error: unrecognized tag: border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; (Smarty_Compiler.class.php, line 439)" string(118) "Smarty error: [in content:content_en line 28]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(358) "Smarty error: [in content:content_en line 40]: syntax error: unrecognized tag: font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; list-style-position: outside; list-style-type: disc; vertical-align: inherit; margin-left: 0%; list-style-image: none; line-height: 130%; margin-bottom: 1%; (Smarty_Compiler.class.php, line 439)" string(118) "Smarty error: [in content:content_en line 40]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)"
It seems that submitting the page with these styles embedded causes the content editor a problem, but that cannot be worked around by switching back to WYSIWYG view before submitting because the the content editor strips the styles.

I hope my explanation of this makes sense. It seems that the content editor does not like processing embedded styles. Is that correct?

Re: Problem using CSS styles

Posted: Sat Feb 17, 2007 4:22 pm
by chead
Ideally, your styles should be defined in a CMSMS stylesheet, then attached to the page template you're working with, rather than embedding them.

If you do embed them into the template, you'll need to enclose the ... block in {literal}...{/literal} tags first. That will stop Smarty from trying to process the CSS within the curly braces.

You can't embed them into the {content} area of a page because that content is displayed in the of the HTML page; styles need to go in the area.

See documentatation for the {literal} tag.

Re: Problem using CSS styles

Posted: Sat Feb 17, 2007 10:59 pm
by Anastasis
chead wrote: Ideally, your styles should be defined in a CMSMS stylesheet, then attached to the page template you're working with, rather than embedding them.
Fab - that was it - thanks for the info!  :)

The test page I have been using now looks much more like the original.

I appreciate your help.