How to add the custom styles to the aloha editor.
I have a block of text...to that text i would like to add some background color and extra markup to the block of text.
for eg.
ddhjhdhs ahdksahd hkjdhasjhdkjh hdjkhsakj hdjshd shj hdjsahdkja hdkjshdkjh hkjhsakjdhakjh
dsadak dhksadkaj lkdjakl jslkajdl
consider this is a block of text it is having some bg color...Like this i would like to add custome styles to aloha editor.pls explain.
I think that the Aloha sidebar makes possible to define a css class on the selected block of text.
You may also be interested by this color-selector 3rd-party plugin : https://github.com/deliminator/Aloha-Plugin-Colorselector
If it doesn't fit your needs, you will have to write your own plugin.
I hope it helps
Related
I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.
Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.
There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.
I've been looking into TinyMCE and I was wondering if there was a way for setting colors and font-sizes in the default forecolor and fontsizeselect toolbar as classes instead of inline CSS styles.
So instead of something like:
<span style='color: #fff;font-size:18px'>Text here</span>
It's going to look like:
<span class='f_col_white f_size_xl'>Text here</span>
The short answer to this is "no" - the plugin does not work this way.
Inserting inline styles means that content will render the same in the editor as it would when rendered later in a browser. Attaching classes would mean that you would have to load CSS into the editor and load that same CSS into a rendered web page for the content to look the same. Certainly not impossible (or overly difficult) but would require more work to get right.
If you want these types of behaviors you can create your own plugins based on the ones provided by TinyMCE (e.g. textcolor for the foreground color issue) and modify the plugin to work as you desire.
forecolor can be only configured via Text Color Options. All of the options are applying inline styles.
An alternative way is to define color styles in style_formats like so:
tinymce.init(
toolbar: "styleselect",
content_css: "https://the-stylesheet-which-contain-classes-you-defined",
style_formats: [
{ title: "White Color", classes: "f_col_white", inline: "span" }
],
// other options
)
I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change???
if so can some one pls let me know
thanks
For Panel headers:
To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default
To change the background you would need to modify: x-panel-header-default
For tab headers you need to modify:
For the text:x-tab-inner
For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active
Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.
For styling the text in the tab headers:
Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.
This will affect the text within each tab title in the TabContainer.
Example:
a.ajax__tab_tab {
color: #00898D;
}
You don't use css directly
you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.
I'm searching for something that applies styles only to a specific area:
<div class="showcase limited-styles">
<style scoped type="text/css">/* some styles */</style>
<!-- the actual content - only affected by the style definitions above -->
</div>
I already found jQuery Scoped, but for some reason it doesn't work for me - all the other styles apply as well, so it's not any better as using the highest available specifity.
Thanks!
It seems like you could accomplish this by "parenting"
Throw a containing div around all of the elements you want to respond independently, and then put that div name in front of other DOM elements you are trying to style.
Here is a fiddle for reference http://jsfiddle.net/3mx4L07t/
I want to be able to remove/change the internal style sheets values through JavasScript. It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. How can I change the value for the background or remove it completely? Or is there another way to accomplish this?
<body>
<head>
<style type="text/css">
#company-header{background:#000 !important;}
</style>
</head>
<div id="company-header"></div>
</body>
If your just going to change small bits of css, using jQuery's css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this:
$('#id').css('cssText', 'height: 200px !important');
This replaces all the css, so everything needs to be defined in the new css rules that are added.
If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead.
To remove all inline styles you would do something like this:
$(document).removeAttr('style');
or for div's only
$('div').removeAttr('style');
Depending on how many styles there are, this could take som time to process.
Then to add a new stylesheet do:
(function() {
var myCSS = document.createElement('link');
myCSS.rel = 'stylesheet';
myCSS.type = 'text/css';
myCSS.src = '/styles/mystylesheet.css';
var place = document.getElementsByTagName('script')[0];
place.parentNode.insertBefore(myCSS, place);
})();
Edit:
function removeCSS() {
var badCSS = document.getElementsByTagName('style')[0];
$(badCSS).remove();
});
This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference.
Internal styles will always override external styles, but for one exeption, if the external style is !important. If both the external and internal styles are !important, the internal style will be used.
Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet.
Changing the styles directly in the DOM with jQuery's css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet.
EDIT: OK, now that we understand that this question is really just about how to override the !important style declaration when setting styles via javascript, this is a duplicate of this posting: Overriding !important style.
The two possible answers there are to set a whole style string on the object or to create a new stylesheet that refers to this object.
Previous answer before question was edited:
You can just set some style directly on the object if you want like this. This will override anything that comes from a style sheet so you don't have to mess with the style sheet.
$("#company-header").css("background-color", "#FFFFFF");
or
$("#company-header").css("background", "none");
A more extensible way of modifying the look of an object or groups of objects is to based the style settings on class names and then add/remove class names using jQuery. This has the effect of switching which style sheet rules apply to a given object without having to directly manipulate the style sheets themselves:
$("#company-header").removeClass("oldClass").addClass("newClass");
$(document).ready(function(){
$('style').remove();
});
This code will remove the all internal css from the site. I used this but style tag will be visible in the page source.