I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?
I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?
So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.
Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.
If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).
You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:
.#{prefix}-i-alignleft:before
You can use the keyword alignleft as an icon for your custom button.
I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.
Related
DNN 9.3.2 / 2sxc 10.25.2
I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:
Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
Building a custom theme for each portal (overkill)
Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)
So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.
I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.
So my idea is that it would work like this:
Have a 2sxc Content module on a single page on each portal
Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
Any changes to the module would result in a rewrite of the CSS file.
I could update the c# razor template to add, remove, or modify rules or transform the values of the input.
Is this possible or is it too complicated? Is there a better way of going about this?
So I've been away for a long time, I hope my answer will still help...
We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.
https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91
That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.
Info/Problem.
Using Sharepoint online with a dark/black theme.
On the homepage, I am using the document library previewer web part.
The font for URL's/Hyperlinks is defaulting to black so they aren't visible on the black background.
Attempting to change the font color of these URL's using CSS.
What I've tried
I've used the Dev Tools in Chrome to locate and change the CSS to make the font color white. This works, but the changes don't save after I refresh the page.
Downloaded and Installed Sharepoint Designer and copied the style element to a txt file stored in the style library. I'm not sure how or where to insert this file in Sharepoint designer to apply to to my site
The ideal solution would be editing the CSS for the homepage and then saving it permanently. I feel like I've gotten most of the way there, I just can't figure out how to save/apply my changes.
If it isn't already obvious, I'm not much of a developer so I'm a bit out of my depth here.
I don't think you can customize the css of existing webpart using designer. You have to create your own previewer using spfx. there are some webparts you can checkout.
Did you try to add the CSS style code into Script Editor web part in the home page?
If you use modern page, check the solution below.
react-script-editor
I am looking for the cleanest way to use css font icons that match my site's preexisting icon pack instead of having to create images to use in the plugin folder.
I am open to writing custom solutions as well as using plugins.
I'm not sure if they have to match them 1 on 1, or you just want to have the same type of icons as you had, but I recently ran into and implemented font icons from fontello.com that have many existing icons and supports custom icons if really needed.
i recently purchased a plug-in for my wordpress website called "pull out widget"
I don't like the font on the plugin. Is there a way I can change the font on it and use a Google font instead. any help would be appreciated. I tried to edit the plug-in but I don't know PHP that well. And I don't wana mess up the plug-in so I gave up.
You can change the font face via your theme's custom CSS – all pullout widgets are wrapped into a div with ID #pullouts. The custom CSS will overrule the pull-out-widget's css.
So just go into your custom css, and use Firebug or something to determine what class to call if you're unsure .... and of course this is assuming you downloaded the google fonts plugin -- http://wordpress.org/extend/plugins/wp-google-fonts/
Hye all
I was trying the free version of sencha API with GWT in base and stumbled upon on the issue of setting color to a button. I tried modifying all the CSS get deployed in the war and tried setting styles also but no luck there. So kindly at least suggest a approach.Thanks in advance.
regards
la_89ondevg
By "Sencha", I'll assume that you mean Ext GWT.
The default styling of buttons in Ext GWT comes from a sprite sheet in the resources folder that came with your download of Ext GWT. Specifically, look at resources/images/default/button/btn.gif. To change the colour of the button, you will have to edit this sprite sheet or create new images for the colour of button you would like to use.
If you are planning to make extensive changes to the style of widgets in Ext GWT, consider making your own theme. Themes are generally placed in resources/themes and can contain your own custom CSS and images. Just link your theme's style sheet in your host page and make sure your CSS rules override those in the default theme.
maybe what you're looking for: http://www.sencha.com/forum/showthread.php?97011-Change-style-for-GXT-button-component