I tried to override sass variable in variables.css like this
but it's not what I want.
It seems to change the styles of all tabs.
You just need to do as shown below on the page component which you need to apply.
my.scss
.ios,
.md,
.wp {
page-my {
.margin-top-15 {
margin-top: 15px;//this is just an example
}
}
}
Currently, it is not possible to override a sass variable in one single page, it simply does not work.
This is the response to a similar issue reported in ionic forums:
https://github.com/ionic-team/ionic/issues/7469
One useful solution is to ionic serve your project, open the inspector on your browser, inspect the desired element and see its ionic generated classes to overwrite them manually in the .scss file.
Currently you cannot change sass variables in one page. That's just not how sass works. Sass is meant to be used as a global setting.
There is a work around to change let's say for example the background of a loading container.
You can do this for most.
If you open developer tools and select inspect element on the loading wrapper it gives the class .loading-wrapper as shown in image link below.
css class for loading shown in inspect element
In your app.css
.loadingCss {
.loading-wrapper {
color: #f4f4f4;
background: #2979ff;
}
}
in your component ts add the class to your loading create instance
//initialize a loading overlay
let working = this.loadingCtrl.create({
content: 'Working...',
spinner: 'dots',
cssClass: 'loadingCss'
});
Now you can create multiple instances of loading and have separate classes for loading and add them to your instance and the css will take effect.
Final result is shown in the below image link.
Loading overlays with custom css on two pages
I hope this helps
Related
I am using the steps given in the URL to make a color-picker rte plugin
http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html
and at the same time I am making another custom rte plugin to do some text modulation.
But only one of them is working using rte.coralui2 as categories.
and both icons are coming at the same location.
If I disable one js then another is working.
I have registered the plugin with different name and I have also used different variables.
I am not able to make the rte plugin button at different location.
Please suggest the possible solution.
it's possible you are overlaying rather than extending the rte.coralui2 category. I suspect your custom clientLibs are competing with each other and only one is available.
It seems like you are using the same steps provided in the blogpost for creating both the plugins and while doing that, you are using the below code twice with different icons :
if(items.indexOf(ExperienceAEM.TCP_UI_SETTING) == -1){
items.splice(3, 0, ExperienceAEM.TCP_UI_SETTING);
}
So, maybe, the icons are being added at the same place and only one of them is shown.
You should create ExperienceAEM.CuiToolbarBuilder Class only once and add both icons inside that class
Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin
I've just upgraded my TinyMCE to version 4, which seems to have a tooltip by default.
How can I disable/hide the tooltip that appears on mouse-over on any tool-bar item?
I've been searching for any possible solution, but so far, I have found nothing in the official documentation. What I found in the development tinymce.js file (uncompressed version) is that tooltip is hardcoded and set to be included every time.
I tried different things to disable the tooltip, by so far, the easiest and safest way I came up with is by using CSS, include this bit of code in the main css file to hide the tooltip forever:
.mce-widget.mce-tooltip {
display: none !important;
}
This solution avoids using Javascript/jQuery, and also avoids modifying the source file tinymce.js.
I fiddled around and found a dynamic solution using JQuery and tinyMCE 4.x. This solution allows you to enable/disable tooltips inside tinyMCE:
tinymce.init({
...
init_instance_callback : function() {
$("head").append("<style> .mce-tooltip{ display: none; } </style>");
},
...
It does change the class mce-tooltip after tinyMCE is initialised (init_instance_callback). Set 'display: block;' if you want to display the tooltips again. Its not the nicest solution, I know, but it works.
You can access the button instance and set its rendered state to false:
var controlIds = editor.theme.panel.rootControl.controlIdLookup;
for (let i in controlIds) {
if (controlIds[i].tooltip) {
controlIds[i].tooltip().state.set('rendered', false);
}
}
My question is this: how do you allow a different GWT visual theme depending on the user that logs in?
I would like to decide which theme to use when the customer logs in (that is before the GWT app gets loaded, so I am pretty sure it should be possible).
I have attempted to use class replacement based on a custom-property, but that failed because only the last inherited module's set of images become visible, even though I can select the right css file... I have searched everywhere and can't find the answer!
Thank you for your suggestion Thomas, but the problem with this solution is that you're assuming the CSS stylesheet is available for me to add to a ClientBundle (I tried that but unless you copy the css file and accompanying pics to your project, you can't do that). The themes come from external GWT modules. And I would like to keep it this way for modularity (it would be painful to import a whole bunch of resources into my project every time we needed a new theme).
The work-around I came up with was to write the injection code myself (just inject a link tag in the HTML head) at run-time.
For completeness, here's the code to do it:
protected void doInjection(String cssFilePath) {
// <link type="text/css" rel="stylesheet" href="sol.css">
Element headEl = Document.get().getElementsByTagName("head").getItem(0);
HeadElement head = HeadElement.as(headEl);
LinkElement link = Document.get().createLinkElement();
link.setType("text/css");
link.setRel("stylesheet");
link.setHref(GWT.getModuleBaseURL() + cssFilePath);
head.appendChild(link);
}
And you call this method with something like this:
doInjection("gwt/standard/standard.css");
Then, inherit all Resources modules from your project's GWT module file. For example:
<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>
<inherits name='com.google.gwt.user.theme.dark.DarkResources'/>
Inheriting the *Resources version of the Module avoids automatically injecting the style-sheet.
To decide which theme to use, I created a custom GWT property in the module file, based on the value of this property, I replace a default Java class (which would just insert the default theme) with a different Java class (which subclasses the default class) if a different theme should be used. This has the added bonus that I can include my own ResourceBundle resources within each theme, because the replacement Java class used with a theme, besides injecting the right css file, can also provide alternative Resources to my GWT code.
EDIT
I would like to add one important note:
The solution described above works quite well. But if your app uses different Locales or other GWT properties, this approach may cause the number of compilation permutations to explode! With only 6 different themes and 3 different Locales, on top of the standard 6 different browser versions you normally have, the GWT compiler will create 6 x 3 x 6 = 108 different compilations!! This is pretty crazy!!
A better solution, which I decided to follow after all, is to set an attribute into the HttpSession once the user logs in, and then based on the value of this attribute, load the appropriate css file (first thing in the onModuleLoad() of my entry-point class). The only difference from the solution described above is on how you select the theme.
I use a different approach, which mostly relies on the power of CSS with a single line of GWT code to switch themes.
First, define the themes that you want to apply. I use an enum.
public enum Theme {
DARK,
BRIGHT;
}
public static String getDefault() {
return BRIGHT.name();
}
Now, when you launch an app, apply a default theme (Theme.getDefault()). When a user selects a different theme, apply it:
public static void setTheme(String theme) {
/*
* Setting style on Body element allows us to "theme" the RootPanel as well.
*/
Document.get().getBody().setClassName(theme);
}
When you apply a new theme, the look of your app will instantly change without reloading the page.
Finally, define all theme elements that you need in your CSS file:
.DARK {background: #000; color: #CCC}
.BRIGHT {background: #ebebeb; color: #000}
.gwt-DialogBox {border-radius: 6px}
.DARK .gwt-DialogBox {border: 3px solid #555}
.BRIGHT .gwt-DialogBox {border: 3px solid #CCC}
Notice that you only add a theme selector in front of rules that are different for different themes.
I would try the following general approach:
Define one CSS file for each of the visual themes.
Put them all in a ClientBundle as described here.
Hold off injecting the themed CSS until you've authenticated the user. You can inject the general CSS you need for displaying the login screen.
Then inject the themed CSS depending on the user using the CssResource's ensureInjected() method.
How do you change the default font type and font size in TinyMCE?
I'm using the advanced skin and I've changed the body, td, pre style in default/content.css but it still doesn't change.
Well, there are several content.css and only one is used to style your editor depending on your configuration settings.
You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like
content_css: "http://localhost/css/my_tiny_styles.css",
and in my_tiny_styles.css or whatever file you choose you use
font-family: myfont1, myfont2, sans-serif;
Here's another way to resolve this problem.
By adding your own custom styles into our CSS file by defining tinymce id.
#tinymce .mceContentBody p {
font-family: your_font_name !important;
}
If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
EDIT:
this is the setup option of the init function as explained here:
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:
setup : function(ed) {
ed.on('init', function(){
$(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
});
}
Note I used jQuery, but can of course be done without it as well.
Here's how to do it without touching CSS or any other codes.
Use the plugin 'TinyMCE Advanced'
Activate it in settings.
More detailed instructions here.