I'm using CKEditor with CKFinder in a custom CMS. Users upload and insert photos in articles and that works almost beautifully. The downside is that the default image style is margin/padding:0px, so the images appear crowded when left or right aligned.
Is there a way to set up a default image style in CKEditor, so that when a user inserts an image (whether through CKFinder or entering direct HTML/Source), a padding:10px attribute is added as a style?
You can set the styles within the editor here
CKEditor 3.x Styles
Personally, I use the contentsCss configuration option to provide a stylesheet reference, like so:
CKEDITOR.editorConfig = function(config) {
config.contentsCss = ['styles.css'];
};
And inside styles.css you could do:
img { margin: 10px; }
or whatever you want to do for images.
Related
What's the easiest way to add font sizes options to Plone 4's TinyMCE editor?
For some reason a client has this request.
In Site Setup - TinyMCE Visual Editor - Toolbar I can't see any option related to this feature.
This is how it looks in my application:
In /portal_tinymce/##tinymce-controlpanel - Styles add definitions:
Font size 8|span|custom-font-size-8
Font size 9|span|custom-font-size-9
Font size 10|span|custom-font-size-10
etc.
Meaning you can select the options Font size x in your editor. This will be saved as a span with class custom-font-size-x.
When you save this it will already work. But you need the styles to make this visible.
I had an override to tinymce editor already set so I added the styles for each class like:
.custom-font-size-10 {
font-size: 10px !important;
}
in content.css.dtml file. Also add this css in your theme to see the effect in view mode.
Using Silverstripe CMS (v3.4) when I upload an image using the tinymce editor it automatically sets the width/height on the image. This causes problems such as breaking animated gifs so they don't play and also reduces the quality of static images.
How do I turn this feature off completely so that no resizing is done on upload?
You can modify the insert width of the images instead of them being resized to 600px wide.
mysite/_config.yml
HtmlEditorField:
insert_width:
1200
You can also override the width / height attributes on the image tag with css.
.typography img {
width: 100%;
max-width: 100%;
height: auto;
}
Its not great but its the only work around which I know.
As for animated gifs, these are always going to break if they are resized with php.
HTMLEditorField updates img tags in it's saveInto function. Inside the saveInto function is a processImage extension hook that allows us to manipulate images inserted using TinyMCE.
First we create a CustomHTMLEditorField extension with a processImage function. If the image is a gif we set the img src back to the original image path.
SilverStripe 3
class CustomHTMLEditorField extends Extension
{
public function processImage($image, $img)
{
if ($image->getExtension() == 'gif') {
$img->setAttribute('src', $image->getRelativePath());
}
}
}
Next we add the extension to HtmlEditorField in our config.yml file:
HtmlEditorField:
extensions:
- CustomHTMLEditorField
Don't add images in TinyMCE… it doesn't properly support hi-dpi images and it's really hard to control the resulting layout.
Better use something like a content-block module or just use separate image-upload fields. You could also use something like the shortcodable module to insert media such as images via custom shortcodes.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
I'm working on a Wordpress site and I'm quite new to this framework. There's some CSS on my page that's causing each "row of content" to have a 35px margin between it. This appears to be in a css class called wpb_row in a js_composer.css file. I'm not sure if this is some standard CSS class for Wordpress or if there's a global "have margin between each layer of content" setting.
Unfortunately I don't have 10 rep so I can't post an image of the page that's causing the issue but I can link to an image of where the issue is http://i.imgur.com/vEyznRn.png?1 and the url for the site is http://am12.siteground.biz/~youbambu/ecorecycling/
What's the best way to override a CSS class within Wordpress from a standard point of view? I've tried adding custom css to override this and remove the margin-bottom: 35px; in Appearence->Editor->Stylesheet.
Is it possible to either override this CSS in one global area? I'm using a theme called Picasso in wordpress if that's any help, but I don't see how to override this CSS.
To overrride the css use !important. So adding the following to your stylesheet should remove the margin bottom:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
}
Is it possible to either override this CSS in one global area? I'm using a theme called >>Picasso in wordpress if that's any help, but I don't see how to override this CSS.
I would be careful editing/modifying there because I suspect you will lose these changes/modifications on theme updates (which Picasso auto updates).
The theme has a designated place located at Theme Options > Tools > Custom CSS. The adjustments you add here are loaded on every page, just like the stylesheet in editor. Furthermore, these changes are not cleared upon update.
Just my two cents, hope it helps.
You can easily achieve this goal. This is not a WordPress standard or something.
you can edit js_composer.css and change what you want. OR
you can override this css rule adding a new role after js_composer.css loads. Something like:
<style>
.wpb_row { margin-bottom: 0px!important }
</style>
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}