Can someone explain how can I add custom font, css classes styles to Contribute?
styles for h1, h2, h3, ul, ol, p, span, blockquote, etc
The problem that I'm having is that when I go to edit the page, only header styles appear but none of the rest. How can I make all of the styles that I have on the css to appear to the WYSIWYG?
Thanks
You can change the settings on the "Publisher Settings" in Contribute.
There is a page "Styles and fonts" where you can allow the users to select all of your CSS elements.
Preferably you normally only make a selection of styles that you want the user to be able to choose. You can do this with a seperate CSS where you specify the styles that a user can select. This file doesn't contain much only some styles normally without actual formatting which is still in you main stylesheet.
See this tutorial for some help:
http://www.adobe.com/devnet/contribute/articles/css_03.html
Related
I want to change the font family of my TinyMCE content.
I tried:
tinymce.get('myid').execCommand("fontName", false, "Verdana");
But this is actually only changing the font in the menu. My content is still written in Arial.
How could I proceed to change the font family of the text already present in the TinyMCE?
The answer to this depends on how the content gets its font setting. If there are inline styles on the content you would have to parse the HTML and remove/modify the inline styles to use the font you wish to use.
If there are no inline styles the content would rely on CSS to control the styles so you would either use the content_css setting in your TinyMCE configuration to set the CSS defaults you want or inject inline styles to override the CSS.
I am very new in Typo3 world (I came from Joomla and WordPress) and I have some doubts related a thing that has been requested by a customer that use Typo3 for its site
He ask me to create some colored boxes into a specific page. Each of these boxes simply must contain text or links.
How can I do this?
I am thinking that I can solve in the following way (but I have not idea if this is a GOOD solution):
In the backend I go in the Page section and I open the settings related to the page that I have to modify
Here I have 3 columns (Left, Normal, Right) and for example I add a NEW Regular Text Element into this central column
Now appear to me the wysiwyg editor, so I click on the Toggle text mode icon and I pass from the wysiwyg mode to the pure HTML editor's mode and now I will create some div tags (settings the CSS settings for the background color and the dimension) that rappresent my boxes (and into these div I put their textual contents).
Is it a possible solution or is it a bad solution?
Tnx
Andrea
You may either use the RTE typoscript config to add some new paragraph styles, which will make the boxes or use the section_frame field in tt_content, a field called "frame" in the backend when you edit a content record. Both solutions would just need some typoscript (which you will deal with very often in the TYPO3 world) and CSS code.
If you need some more structure in the backend, there is also an extension for that called multicolumn. If you just need "more" columns in the backend (in combination with backend layouts) to achieve different looks, this can also be done by adding some typoscript config. To give you a more precise recommendation, some sort of scribble or design screenshot of what you want would be nice.
I'm trying to manipulate the functionality of tinyMCE when user tries to attach picture in the editor. What I want to achieve is to HARDCODE the properties of the picture. So when he selects a picture I want to disable the options for SIZE selection, orientation and all other options. Is this possible and what are the ways to do that... I searched the web but without any luck. My idea is to open the script file ot tinyMCE image plugin and to change the values which the script takes and inserts like inline styles, but I'll be glad to see if there is more elegant solution.
Thanks in advance,
Z.
You could add the unselectable=true attribute to the image. This way the image cannot get resized (you may strip out that attribute later on before saving the content to db). To disallow special attributes of your image you may define what attributes are allowed using the tinymce valid_elements setting.
UPDATE: This is the css necessary to be set using the tinymce param content_css in order to make images non-resizeable
img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;
}
I am having some trouble styling filepicker.io widgets for web, specifically filepicker-dragdrop.
Is there any way to disable the inline styling and replace them with classes?
Something like data-fp-disable-styles or perhaps when using data-fp-dropzone-class="..." the inline styling is automatically disabled.
Although you can add classes to the button with the attribute data-fp-button-class, I cannot get rid of the inline styling on the on the dropzone and container div.
You can set the data-fp-drag-class and data-fp-class options to set the styling of the dropzone and container div and use the !important flag for any styles that you want to use to override the inline styles.
If you're looking for a more fully customizable solution, we'd recommend using the raw javascript api's to create your own drag pane (https://developers.filepicker.io/docs/web/#widgets-droppane) and/or pick button
I have an application that opens HTML pages in a UIWebView. The pages have a specific color theme, which is disrupted by form elements on the page (I have few "select" fields), which have their own color theme (white font, light gray background). CSS can't seem to force it to display in other colors.
Does anyone know how to fix that?
Thanks!
Try using -webkit-appearance: none; to disable the browser's default styling, then apply your own styles. More info and examples at 37signals.
Try using !important in your external CSS styles. It could be that the style sheets for UIWebView are inline and are overriding your external styles.
For example, select { color:#000!important; } should override any inline style text color (unless it is set to !important as well) on <select> elements.