0

I am trying to figure out how to add another stylesheet to Aloha so that the content body will use an external font when the content is being edited. However, I cannot find where Ektron sets the css file that Aloha uses when building its elements.

The reason for adding another stylesheet instead of just changing the aloha.css is so that on an Ektron update, only the link needs to be added back in instead of having to go through and update the css file again. Unfortunately, despite looking for aloha.css in Visual Studio, it does not come up in any searches.

I am using Ektron 9.00 SP2.

I'd appreciate any guidance on how to add an additional css file for the Aloha editor.

2 Answers2

0

Are you looking to create a class to be used/displayed in the Aloha editor that the authors can use when editing content? If so

\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\inspector\lib\StyleConfig.js

Edit this file to define classes that will be available (built in) to the editor. These classes will then display on the right hand side available to certain tags that have been defined in the .js file

Don't forget to make sure you have the tags AND their attributes defined as well so they don't get "cleansed" as Ektron words it.

\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\AlohaEktron.aspx

Edit this file to tell the editor what tags AND attributes can be used otherwise if they are not listed there, the editor will strip them out of the content upon publish. You must list each attribute and tag separately (until I find out otherwise) that you want to use.

Eric
  • 455
  • 3
  • 19
0

What I did was edit the default.css on the root. I added the @font-face to the top of the CSS and put everything within the .ektron-aloha class. For example:

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(fonts/Lato/Lato-Regular.ttf) format('truetype');
}




.ektron-aloha h6 {
font-size: 17px;
font-family: 'Lato', sans-serif;
display: inline !important;
font-weight: bold;
line-height: 1.2em;
}

with this I was able to display a lot of custom CSS within the workarea editor. I have to load it manually into the blog (edit the folder properties and set the CSS default.css), but I am having problems getting it to work for the calendar events.