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.
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.
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.
Related
On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
The font style/family is not standard between components.
For example :
input vs textarea
datatable vs datatable page-size popper dropdown
the notification messages
How can I fix this in "element-ui" way ?
Thank you.
Element-UI Version : 2.4.6
I was facing a similar issue, if you are using webpack, one of the options is to add the following code when importing element UI:
import 'element-ui/lib/theme-chalk/reset.css'
You will find the original answer here:
https://forum.vuejs.org/t/elementui-styling-is-not-applied-to-new-webpack-element-ui-project/26194/9
In my scenario I wanted to make a global change to the font-family.
On top of importing the above mentioned reset.css, as you mentioned some components i.e. <input>s, <button>s were still not behaving and inheriting the declared font-family (applied to say the <body>) and were falling back to browser defaults.
Digging around the element-ui GitHub issues, I found the following snippet which forces these missing elements to inherit their font-family, so a single font-family definition on the body will propagate to all components. I insert this right after my body font-family definition.
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
Taken from : https://github.com/ElemeFE/element/issues/150#issuecomment-249750366
I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
What is an iOS equivalent to MacOS NSAttributedString initWithRTF ?
The Application Kit extends Foundation’s NSAttributedString class by adding support for RTF, RTFD, and HTML (with or without attachments), graphics attributes (including font and ruler attributes), methods for drawing attributed strings, and methods for calculating significant linguistic units.
- (id)initWithRTF:(NSData *)rtfData documentAttributes:(NSDictionary **)docAttributes
I need to process a short stream of RTF data in an iOS application.
Thank you!
There is no equivalent in iOS. The iOS version of NSAttributedString has only the functionality needed by CoreText, and CoreText itself has only the functionality needed by the UI classes, and this does not include RTF processing.
As far as I know, at least as of 5.0, UIWebView is the only way to process RTF. See https://developer.apple.com/library/ios/#qa/qa1630/_index.html. That may have changed with 5.1, because some of Apple's other apps seem to handle rich text now (but then again, those apps may have just changed from UITextView to UIWebView…).
UIWebView doesn't give you any way to access the attributed text from the RTF, because the web view never builds attributed text—instead, it builds HTML and CSS.
The good news is that this HTML and CSS is available in the DOM. At least for some types, this isn't true—all you see is an opaque wrapper that gets rendered by some magic code inside WebKit that you can't access—but RTF is not one of those types.
Using Safari Web Inspector, I opened up a sample RTF file on my iPhone, and looked at the DOM. It's full of nodes like this:
<span class="s2"><span class="bumpedFont16">m a test file. This is some </span></span>
<span class="s3"><span class="bumpedFont16">bold</span></span>
… where those classes are defined with inline <style> tags immediately before the tag they're first used in.
So, if walk the nodes that have text, that text is like an attributed character range (although if you actually want the start and end indices you'll need to count them up yourself…), and its computed style is roughly like an attribute dictionary. Of course "roughly like" isn't "identical"; a computed style looks like this:
direction: ltr; display: inline; font-family: 'Times New Roman'; font-size: 22px;
font-weight: bold; height: auto; margin-bottom: 0px; margin-top: 0px;
padding-right: 0px; text-align: left; width: auto;
So, not actually compatible with NSAttributedString, and not nearly as nice (unless your end goal is to create HTML, of course)… but at least something you can use.