In CKEditor 4, items shown in the "Styles" combo box are displayed with their styles, demonstrating how the text will be styled if the item is selected.
This is not the case for the "Format" combo box items for block-level formatting. Is there a way to fix this? For example by "cheating" and manually adding a CSS class to each item that mimics how the paragraph style will look?
You can add this in config.js
config.fontSize_style={
element: 'font',
attributes: { 'class': 'fs-#(size)' }
};
which will add class="fs-selectedFontSize"
for eg class="fs-18".
Then you have to add style for such classes in contents.css or link your CSS file. For similar techniques go to the official website of CKEditor Guide
https://ckeditor.com/docs/ckeditor4/latest/guide/index.html
Related
I want that the 'underline' of a hyperlink in JavaFx is always visible. How can I achieve this ?
You can achieve this using css like this
link.setStyle("-fx-underline: true");
Or you could create a css file if you want to style your link more
My app runs PrimeNG 1.1.2 and Angular 2.4.1. In my template I use a PrimeNG tab view with corresponding tab panels and respective headers. For a certain reason I want to style the appearance of the tab panel header.
For instance, say I want to set its font color to green:
<p-tabPanel header="Bezier Curve" [selected]="true"
[headerStyle]="{'color': 'green'}">
However, this style does not apply and the font color doesn't change
Any pointers what I am missing?
Edit:
font-color replaced by color
Try to override ui-tabview-title class and set required css in style.css
.ui-tabview-title{
color:green !important;
}
There's no CSS property with name font-color, you are looking for color:
<p-tabPanel header="Bezier Curve" [selected]="true" [headerStyle]="{'color': 'green'}">
W3Schools clearly states:
Property color - Sets the color of text
Edit:
Problem is the following - after template rendering, header text is located between a tags which means you have to create CSS class that will change text color surrounded by a tags inside your header:
.greenText a {
color: green;
}
And then use headerStyleClass attribute instead of headerStyle to apply CSS class:
<p-tabPanel header="Bezier Curve" [selected]="true" headerStyleClass="greenText">
I had the same problem, neither [headerStyle] nor [headerStyleClass] worked for me.
I switched to change the background-color, what -- for whatever reasons -- works.
<p-tabView>
<p-tabPanel [headerStyle]="db.isValid? { 'background-color':'#f58985' }: {}"
[header]="db.name!"
leftIcon="fa fa-tasks" *ngFor="let db of datasheets">...
Maybe that helps others too.
ps: i used PrimeNG 9.1.4 and Angular: 9.1.3
We can use the custom header as well.
<p-tabPanel [selected]="true">
<ng-template pTemplate="header">
<span style="color:green">Bezier Curve</span>
</ng-template>
</p-tabPanel>
I want to cusomize QToolButton class so it won't show arrow subcontrol when button has a context menu. But I need to apply this style sheet only for buttons with QToolButton::MenuButtonPopup popup mode. How to do it properly? I have tried the following sheet:
QToolButton[popupMode != "1"]::menu-indicator {image: none}
but it doesn't work.
This solution what worked for me. I used a dynamic Property (bool) in the Designer to convert a Check Box into an Indicator Lamp.
QCheckBox[indicator=true]::indicator::checked { image: url(:themes_22x22/Icons_oxygen22x22/emblems/emblem-important.png);}
QCheckBox[indicator=true]::indicator::unchecked { image: url(:themes_22x22/Icons_oxygen22x22/status/user-online.png);}
I am trying to do the following:
I have set up a number of Magento attributes for my products & I want to display an icon next to an attribute called "Color" as well as attach an alt tag to this icon/image. My theme has each of the attributes set up as a dt tag, & so the css I am trying to apply is as follows:
dt[foo^="Color:"]{background: url(http://xyz.com/skin/frontend/default/default/images/warning.png) no-repeat 100% 0%;}
and here is the markup:
<div class="white-box-inner">' '<dl class="attribute-list clearfix">``<dt class="first">Size:</dt>``<dd class="first">21</dd> <dt>Manufacturer:</dt>``<dd>Hat Designs</dd>``<dt>Color:</dt>
<dd>Red</dd>``<dt>Fabric</dt> <dd>Felt</dd> </dl> </div>
This however does not display the icon I'd like to appear.
I'm also not sure how to have an alt tag associated with this icon either via css. I'd rather not mess with the template files. Any help is appreciated.
Thanks.
-TM
From your markup it looks like you're trying to select an element by its content. Attribute selectors only select by attributes; they don't select by content.
There was going to be a :contains() pseudo-class, but it was dropped from the spec and so you can't do this using CSS selectors anymore.
jQuery implements :contains(), though, so you could simply use jQuery to add a class and style that class.
Additionally, you cannot associate alt text or a tooltip to a background image in CSS. You're going to have to go through the JavaScript route to achieve this.
JSP1: has Dojo widget.Style theme "claro" is used on body tag.
JSP2: has a dojo widget - Dialog box. The style definitions are applied directly to the widget. (Functionally this jsp is a footer).
<div dojoType="dijit.Dialog" id="privacyDialog" style="background-color:#FFFFDF; border-style:solid; border-width:1px; border-color:#000; height:203px; width:350px; z-index:9999; display:none;">
JSP1 includes the JSP2
Issue: At run time, styles defined on Dialog box in JSP2 are getting overriden and the dialog box appears with the styles which are defined in claro.css (title bar with blue colour, close icon, etc).
Required: Dialog box should display as it was defined in the widget in JSP2.
I have tried overriding theme after reading http://dojotoolkit.org/reference-guide/dijit/themes.html#id24 but it still is partially displaying the theme(close icon, title bar) specified in claro.css
In my case: specified the class as "form1" and the code added in claro.css is
Your strategy is correct: create a style that is a more specific CSS selector, so it will override the default.
It must be that your selector (.form1 .dijitDialog) is not being applied to the element. Look at the element in Firebug inspector - is your style being found but overridden (in firebug style inspector, does it have strike-through)? There may be some style in claro that is more specific.
Or, is your style not being applied to the element at all?
Also, I would urge you not to put your styles into the claro.css file, but in your own .css file. This will make upgrading dojo less nightmarish.
Update
I see that:
At run time, styles defined on Dialog box in JSP2 are getting
overriden and the dialog box appears with the styles which are defined
in claro.css (title bar with blue colour, close icon, etc).
So that means your styles are found and being applied. The dojo theme style is just more specific. What is the selector that overrides yours?
Without seeing that, I might recommend adding a class to your body tag, something like <body class='claro myCompany'... and then add that to your selector:
.myCompany .form1 .dijitDialog