Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
Related
How do I remove the "Release" footer at the bottom of the Oracle APEX template? I can't see it in the Global page, or anywhere obvious in the page templates or user interface attributes (Shared Components).
Footer is defined in page templates.
You would need to remove html footer from template body, make sure to remove it from any page template you are using.
Otherwise you could use css to hide it.
EDIT for clarity:
To edit the template for a page, you can do that either under Shared Components or on the page itself.
While editing the page, there's 2 places you could look (I'm assuming Apex 22 at this point):
on the left side, find Templates > Page. Expand Page, and right-click the name below it (maybe "Standard"). Click Edit.
on the right side under Appearance, find the "Page Template" value. Click the ">" icon to select the template, then click "Edit Component".
Both of those options will take you to the same place as Shared Components > Templates > [the name of your page template]
On that page, you're looking for the HTML <footer> tags, which are usually in the Body section of the template. To remove the app version, look for substitution variable #APP_VERSION# and delete it.
Note that if your page template is part of a theme which is subscribed to Standard Theme, it will be read-only, and you won't see a Save button at the top. You would need to either (a) copy it to a new custom theme, and then change your application to use that theme instead, or (b) unsubscribe your theme from the Standard Theme - this will make it read-write, but prevent it from receiving any Oracle updates to the Standard Theme. This is outside the scope of the current question, but please see the documentation
CSS to remove footer:
.t-Footer{
display: none;
}
Other commands to remove parts of footer:
.t-Footer-top{
Display: none !important;
}
.t-Footer-srMode{
Display: none !important;
}
.t-Footer-version{
Display: none !important;
}
.t-Footer-apex{
Display:none !important;
}
not sure if "!important" is needed
Go to your page template and remove it or add it as css
footer{display:none!important}
And voila.
".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.
I am currently working on customizing the welcome page for my Bigcartel site.
I am using the Neat theme and would like to remove the grid filter that appears over the slideshow image1 to appear clean image2
I was wondering if it's possible in Big Cartel and what was the process to follow?
To remove the grid, you'll need to drop the following code into the bottom of the CSS section in your Customize Design area:
.slideshow div.featured_holder {
background: none;
}
add this in your css
.slideshow .featured_holder {
background-image:none
}
how can i add different styling (eg. border color) to both the checkboxes in the image below using the themable style of nebular frontend framework.
here is the html code
<nb-checkbox>without shortcomings</nb-checkbox>
<nb-checkbox>Defects without without defects</nb-checkbox>
I am using .scss
Using the nebular theme system and producing a different style for the checkboxes is not possible because "checkbox-bg" style is applied globally so whatever background color you give will be applied to all the checkboxes in the application.
What I would recommend is to write a custom class .without-shortcomings and override the style.
.without-shortcomings{
//overide style either component level or global
background-color: #fff;
}
<nb-checkbox class="without-shortcomings">without shortcomings</nb-checkbox>
<nb-checkbox>Defects without without defects</nb-checkbox>
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.