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.
Related
I am looking to change the font size and weight of the navigation menu items on my WordPress site, I am using The Company theme, but I can't seem to figure out the CSS required
My site is www.thepowerwithin.org.uk
I am looking to make the items in the main menu at the top bigger and bold
I have reviewed your question. I think you want to apply CSS only on main-menu anchor text not on sub-menu anchor text. If I am right then you can do as:
ul.menu:not(.sub-menu) > li > a {
font-size: 16px;
font-weight: bold;
}
You should use children-selector > to apply CSS only on the direct children of ul
When use ul.menu:not(.sub-menu) it ignores sub-menu ul of li.
The best thing to do is learn how to use the developer tools in Firefox or Chrome or Safari or IE to see what's loading on your site and how to work with and change the CSS and HTML. Dev tools allows you to make temporary changes to the locally cached browser copy of the site. You can then add the CSS changes to the theme, either by adding new CSS in theme options or to the style sheet.
If the theme allows you to add custom CSS to modify the menu, that's good. If not, make a child theme so you don't lose your changes when the theme is updated. See Child Themes « WordPress Codex
How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
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'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.