I created a theme which extends the ext-theme-classic, but I want to use the neptune-theme images for tools, sliders etc.
I copied the neptune-theme images folder into my resources folder and changed the
$relative-image-path-for-uis
to this directory, but it doesn't work.
Where's my mistake?
The problem here might be the image file type.
Example: ext-theme-classic form images use .gif while ext-theme-neptune uses .png. So if you want to use neptune's form images, copy the images to your custom theme then find an image editor and change its file type from png to gif.
Or you need to override Component.scss (sass/var/) then set the following:
from:
$image-extension: 'gif' !default;
to:
$image-extension: 'png' !default;
Note: I haven't actually tried the second option but I think it should work :)
Related
I've got some colorful md-icon and wanna change it to a grayscale one (replace with a different grayscale basically) when it's disabled (and in reverse).
I can definitely use .css to see whether a button's disabled: button[disabled]:hover, but I'm struggling to see how to combine it together with angular directives (I found a similar demo which works on click: https://codepen.io/elishaterada/pen/mDCEl).
Thanks.
¿wich file you use for the md-icon, svg or another img file?
you can use ng-style,
if is SVG you do delete 'fill' inside xml svg,and play with the css propertys
but if you need change the color to div o another the next example work perfect!
https://codepen.io/Gibrain/pen/pOdpdW
i hope hel you
enter code here
I tried to custome the icon of DXRibbonWindow by adding Icon=<Icon url> in DXRibbonWindow tag, like this:
<DXRibbonWindow Icon="<Icon Url>" ... ></RXRibbonWindow>
but it doesn't work, the icon remains as default, how can i custom the window icon?
Are you using a URL or a file path? I believe the property will only work with a correctly formatted file path to a suitable file type.
Here is an example from DevExpress for reference:
Icon="/WpfApplication9;component/Images/webcam_32.ico">
I have a problem with the Omega Theme's styling. I'm actually trying to do something very basic: To make the paragraph margin smaller. Normally I'd put stuff like that into sites/all/themes/my_omega_subtheme/css/global.css and it would work, but in this case it didn't.
So I debugged the webpage and it seems Omega puts some temporary CSS files into sites/default/files/css that are overriding global.css. So I guessed I would be able to change this in the appearance settings, but there aren't any settings for the paragraph margin. Of course I can't change the margin in there, either, because the files seem to be generated every now and then (at least the names are different today, and I made sure to not click save in the appearance settings).
Additionally I tried setting it with CSS ID and / or class because I thought this would surely override the temporary CSS file's value of p { margin-bottom: 20px; }, but it seems I'm just not informed properly.
So what is the correct way to set the paragraph margin in an Omega theme?
Normally the CSS files stored in sites/default/files/css are the compressed CSS files which drupal generates automatically. To be able to make any changes appear as normal, you need to disable CSS compression.
Go to ?q=admin/config/development/performance and un-check the option Aggregate and compress CSS files.
Now when you view the page source, you should be able to see a list off your theme's CSS files.
How can i Enable the Text Color plugin of Tinymce in Toolbar of Visual Editor ?
I was able to enable the print, search and replace plugins inside the Visual Editor by editing this file
Composite/content/misc/editors/visualeditor/includes/toolbarsimple.inc
and
modifying a line in below file to include the searchreplace, print plugins
Composite/content/misc/editors/visualeditor/visualeditor.js
plugins: "compositelink,compositetable,compositeimage,compositerendering,compositecharmap,compositefield,compositetext,paste,lists,searchreplace,print",
Similarly is there any way to enable the inbuild feature of Tinymce namely Text Color, Font Size, Font Family, Table, Row, Column in the toolbar of the Visual Editor without making the changes through styles which is done by editing this file
Frontend/Config/VisualEditor/common.xml
Thanks
Ajith
Managed to get the Text Color, Background Color, Font Family, Font Size up and running inside the Composite C1 editor.
Listing down the steps below for the benefit of others.
Copy all the files and folder from Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced except editor_template.js and editor_template_src.js into your Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite folder.
Edit the file Website\Composite\content\misc\editors\visualeditor\visualeditor.js and include the below lines in the config section.
skin: 'default',
theme_advanced_buttons1: "forecolor,backcolor,fontselect,fontsizeselect",
theme_advanced_buttons2: "",
For a complete list of options visit the TinyMCE link and go to View Source.
You might also want to inclue inlinepopups in the plugins: line for proper rendering of the popups. Any additional plugins like insertdatetime, media, print,searchreplace, etc can also be included in the same line.
To include the plugins like insertdatetime, media, print, searchreplace in existing toolbar row, edit the Website\Composite\content\misc\editors\visualeditor\includes\toolbarsimple.inc file and include the respective tags containing the commands. For eg.
<ui:toolbargroup>
<ui:toolbarbutton cmd="mceSearch" tooltip="Search" image="${skin}/wysiwygeditor/search.png" isdisabled="false" />
<ui:toolbarbutton cmd="mceReplace" tooltip="Replace" image="${skin}/wysiwygeditor/replace.png" isdisabled="false" />
</ui:toolbargroup>
Copy and merge the code from the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced\editor_template_src.js file into the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\editor_template.js file. Most of the functions can be copied over as it is. Only the common ones like renderUI need special attention. I directly gave a call to the simpleLayout function instead of using a switch in the renderUI
ic = t._simpleLayout(s, tb, o, p);
There could be some issue with not being able to see the entire content in the editor for large content, to fix this issue edit the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\skins\default\ui.css file and modify the .defaultSkin iframe css to specify proper height or overflow scroll.
To include more features to your toolbar, just edit theme_advanced_buttons1.
Good Luck..
Ajith
With Composite C1 you need to do styling (like font face, font size, colors and table related styles) using CSS classes and make these classes available to end-users.
The front-end developer define classes needed in CSS and then register them in the toolbar configuration file from where the end-user can select the styles. Composite C1 does not promote having font tags or style attributes in the content html, so if that is what you really want you need to make changes to the core javascript.
You can read about customizing the Visual Editor toolbar here http://docs.composite.net/Console/CustomizingVisualEditor.
How do I specify the default font size for CKEditor. I tried changing contents.css (body -> font-size) and I tried changing config.js (config.fontSize_defaultLabel) without any success. Does anyone know where i should be looking?
You seem to be on the right track with the contents.css file.
Is your problem that the font size while working in the editor is not correct or is it that the font size isn't being carried over to the page where you actually display the content?
As you know, ckeditor/contents.css is the default style sheet that is loaded while working in the editor, but if you use "config.contentsCss" to call another style sheet, contents.css won't be loaded.
You can call multiple style sheets like this:
config.contentsCss = ['/contents.css', '/css/anotherstylesheet.css'];
If the font size isn't being carried over to the actual page display, you'll need to set the font size in the style sheet used for the actual pages, the default font size used in the editor isn't inserted into the content output by the editor.
"config.fontSize_defaultLabel" is a label only, it doesn't have any effect on the content. Normally, when you load the editor, the font size selector will display "Size". If you set "fontSize_defaultLabel", the font size selector will display whatever value you entered.
If you can provide more details about the problem, I'll try to post a more accurate answer.
Be Well,
Joe