Artisteer - Editor Header style issue

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
7/23/2011 8:43:11 AM
Gravatar
Total Posts 245
mojoPortal Community Expert

Artisteer - Editor Header style issue

With Artisteer skins and 2.3.6.7 I am seeing a problem with the html editors.

When editing HTML text using any editor the "style" Header 1,2,3,4,5 all appear the same size in the editor drop drown list and all seem to result in Header 1.

I tried CKE, FCK and Telerik.  All work the same.

I tried different Artisteer skins including the base (artister - 30headermenu) and (artister - 30topmenu) skins.  I also created 2 new skins in Artisteer final 3.0.0.39952.  Converted them to mojoPortal and both have this issue.

Non-artisteer skins work fine.

Since this is an Artisteer 3 and 2.3.6.7 issue I don't see it as a mojoPortal bug, rather an Artisteer template issue. I think???

Rick

 

7/24/2011 9:48:59 AM
Gravatar
Total Posts 18439

Re: Artisteer - Editor Header style issue

Hi Rick,

There are a couple of factors to this. The first thing is that in CKeditor and FCKeditor we are mapping h1 > h3, h2 > h4, h3 > h5 in the editor dropdown because the module heading is h2 so it doesn't really make sense to use h1 within the instance content. So to make it seem more natural to the user we do this mapping, however it is done by config settings which could be changed if you don't like this behavior. I don't think we have this mapping in the RadEditor.

But there is a style issue in the Artisteer skins that happens because they first set all the headings to the same size with this CSS example from artisteer-30headermenu:

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
  font-weight:normal; 
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 28px;
  text-align: left;
  text-transform: uppercase;
}

Then later in the CSS they change specific headings with other selectors to different sizes, but those selectors aren't in context inside the editor so they all look the same size in the editor even though they won't look the same size outside of the editor.

You can adjust how they look in the editor by using selectors like this in your style-artisteeroverrides.css to set the font size they will use in the editor:

body.wysiwygeditor  h1 { font-size:28px; }
body.wysiwygeditor  h2 {font-size :24px;}
body.wysiwygeditor  h3 { font-size: 22px; }
body.wysiwygeditor  h4 { font-size: 18px; }
body.wysiwygeditor  h5 { font-size: 16px; }

​I will add this in the included Artisteer 3 skins.

Hope that helps,

Joe

7/24/2011 11:53:06 AM
Gravatar
Total Posts 245
mojoPortal Community Expert

Re: Artisteer - Editor Header style issue

Hi Joe

Thanks for your comprehensive reply and the future change to the artisteer css file.

For us, this episode all started with the Telerik Rad Editor being a problem.  Laurena switched to FCKeditor and it worked fine.  We really like the Telerik Rad Editor but it has a few quirks with Artisteer skins.  The other free Editors are improving every few months and although they have less features, they seem more reliable.  It`s nice to have the option to change editors.  At times I like doing my editing externally in Dreamweaver.

Thanks again

Rick Hubka

You must sign in to post in the forums. This thread is closed to new posts.