In my Codename One app the styling is defined in css. Namely the side menu which I styled based on this great video tutorial. So I have a style defined as follows :
SideMenuTagLine {
cn1-derive: "SideCommand";
text-align: right;
padding-left: 0mm;
padding-right: 0mm;
padding-top: 1mm;
padding-bottom: 0mm;
margin-right: 3mm;
font-family: "native:ItalicLight";
font-size: 3mm;
}
When I tested the tagline showed in Italic, but then I worked further on the css to add other styles and all of a sudden the tagline lost its Italic (simulator and real device).
To make it reappear I have to delete the myTheme.css.res file. But again when I make changes to a css style (not SideMenuTagLine nor SideCommand), the tagline Italic gets lost. Maybe other stylings are also lost but I did not notice.
Here is the previews that I get when the res file is first generated (starting from no existing myTheme.css.res file). One may notice that the KmLabelProgress alignment changes between the unselected and the selected tabs although I did not change it. :
Then if I change anything in the css file (eg : color for a selector) I get the following generated res file. In this case the afore mentionned alignment changes do not occur :
Please note : this is the behaviour too in the latest (3.7.3) CN1 plugin version (as in the previous version).
What can I do to be sure the css styles that I defined in the css file are applied ?
Any help appreciated,
Edit October 9th 2017 :
Here is the beginning of the stack trace that I get when I open the generated res file with the designer from the command line :
2017-10-09 10:37:09.388:INFO:oejs.Server:jetty-8.0.y.z-SNAPSHOT
2017-10-09 10:37:09.441:INFO:oejs.AbstractConnector:Started
SelectChannelConnector#0.0.0.0:9000 STARTING
oct. 09, 2017 10:37:09 AM org.jdesktop.application.LocalStorage getId
AVERTISSEMENT: unspecified resource Application.id using ResourceEditorApp
Exception in thread "AWT-EventQueue-0" java.lang.StackOverflowError
at java.awt.KeyboardFocusManager.getCurrentKeyboardFocusManager(KeyboardFocusManager.java:216)
at java.awt.KeyboardFocusManager.processCurrentLightweightRequests(KeyboardFocusManager.java:2621)
at java.awt.KeyboardFocusManager.retargetFocusEvent(KeyboardFocusManager.java:2946)
at java.awt.Component.dispatchEventImpl(Component.java:4752)
at java.awt.Container.dispatchEventImpl(Container.java:2294)
at java.awt.Component.dispatchEvent(Component.java:4711)
at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:758)
at java.awt.EventQueue.access$500(EventQueue.java:97)
at java.awt.EventQueue$3.run(EventQueue.java:709)
at java.awt.EventQueue$3.run(EventQueue.java:703)
Please note : the full stack trace is longer than the allowed length on SO.
As Shai indicated, this was a but in the CSS generation related to native fonts. I have fixed this bug and released a new CSS plugin (v.1.1.4). To update, simply download the latest cn1css-ant-task.jar into your project's lib directory.
https://github.com/shannah/cn1-css/releases/tag/1.1.4
Related
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
I have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
I am looking for a ressource where I can download CSS styles suitable for Rstudio/knitr markdown output?
The default look of the default CSS-style is fine, but I would like to find a CSS style where the content is positioned in the middle of the screen.
something like this (ignore content, colors, sidebar etc):
http://www.barackobama.com/news/
not like this (which is similar to the default):
http://stat.ethz.ch/R-manual/R-patched/library/stats/html/Normal.html
I don't really know CSS so I can't do it myself. I have tried to change the margin in the default CSS style from 0px to 200 px:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 16px;
margin: 200px;
}
The problem with this "solution" is that it only works when the browser window is maximized, and pdf printed from the browser are too narrow also.
edit: This is good:
https://gist.github.com/andyferra/2554919
edit2: The preview version of Rstudio ( RStudio 0.98.932 - Windows XP/Vista/7/8) has a nice default CSS. Get it here: http://www.rstudio.com/products/rstudio/download/preview/
edit3: The newest version of Rstudio now includes some very nice CSS-styles to choose from :) http://www.rstudio.com/products/rstudio/download/
Not just a CSS resource, but you can take a look at the knitrBootstrap project, which provides a way to convert Rmarkdown to HTML styled with the bootstrap framework, including a CSS style chooser and some fancy javascript add-ons :
https://github.com/jimhester/knitrBootstrap
I try to change the font size of package explorer in Eclipse from menu Window → Preferences → General → Appearance, and I fail to change the font size. How can I do that? I use Eclipse v4.2 (Juno) on Windows 7.
On Juno and up you can adjust that font by CSS.
Lookup the files in eclipse\plugins\org.eclipse.platform_4.2.x.y\css for your current style sheet (probably e4_default_win7.css), and then just add the following rule:
#org-eclipse-jdt-ui-PackageExplorer Tree,
#org-eclipse-ui-navigator-ProjectExplorer Tree {
font-size: 10px; /* <-- Desired font size */
}
Update: stylesheets are in eclipse/plugins/org.eclipse.ui.themes_x.x.x.vxxxxx/css folder since Eclipse 4.4 (Luna).
FYI:
From Eclipse v4.4 (Luna):
It looks like the CSS files are no longer in the old folder:
`eclipse/plugins/org.eclipse.platform_4.x.x.vy/css`,
They are moved to the new folder:
eclipse/plugins/org.eclipse.ui.themes_x.x.x.vxxxxx/css
And you must select a theme to apply it, in the menu Windows → Preference → General → Appearance.
This worked for me:
.MPart Tree{
font-size: 8;
}
These are my settings and a screenshot of the IDE.
#org-eclipse-jdt-ui-PackageExplorer Tree,
#org-eclipse-ui-navigator-ProjectExplorer Tree,
#org-eclipse-ui-views-ContentOutline Tree,
#PerspectiveSwitcher ToolBar {
font-size: 8px;
}
.MPartStack {
font-size: 8;
swt-simple: false;
swt-mru-visible: false;
}
You can lookup the CSS style files in eclipse/plugins/org.eclipse.platform_4.2.X.vY/css edit your current style (probably e4_default_win7.css).
Add something like this:
#org-eclipse-ui-jdt-PackageExplorer {
font-size: 20pt;
}
and hope you have a nice and large font (I did not check it myself).
Pro tip: Next time you need to find the CSS Id for a part of the UI, use CSS Spy which you can open with SHIFT-ALT-F5 (after you have installed it).
This worked for me using version 2019-09 on Windows 10:
Locate the directory C:\Users\johndoe\.p2\pool\plugins in File Explorer, replacing "johndoe" with your own Windows user ID.
Depending on what you have done in the past with Eclipse, you should see one or more directories with names that start with org.eclipse.ui.themes.
Select the one with the most recent date modified. In my case its name was org.eclipse.ui.themes_1.2.700.v20190826-0816.
Within that directory open the directory named css.
Open the file named e4_default_win.css in a text editor, and append something similar to the following at the end of the file:
Tree {
font-size: 24px;
font: Mistral; }
Don't pick those specific values! You should pick the font and font size you want. I deliberately made poor choices only to make the effect of those settings obvious in the screen shot below.
Save the file and restart Eclipse. You should see that the font has been changed in the Project Explorer and Package Explorer views, and a lot of other places as well:
Just be clear, the name of the file I edited was C:\Users\johndoe\.p2\pool\plugins\org.eclipse.ui.themes_1.2.700.v20190826-0816\css\e4_default_win.css. The name of the file you edit won't be exactly that, but it should be similar.
On Ubuntu 14.04 (Trusty Tahr) this was the best choice for me:
.MPart Tree{
font-size: 10;
}
In my case I'm using DevStyle plugin with Spring Tool Suite 4.
The font size of project explorer can be changed going to Eclipse menu bar:
Window
Preferences
DevStyle
Extras
Explorer font size
This setting is saved into workspace folder:
\workspace\.metadata\.plugins\com.genuitec.eclipse.ui.common.platform\extra-styling.css
I tried edit directly in file but when open Eclipse the file was overwritten
Using STS 4.8.0.RELEASE based on Eclipse 2020-09 (requires a JDK11)
Finally, from Eclipse 2020-09 (4.17) there is an option "Tree and Table font view" in Window -> Preferences -> General -> Appearance -> Colors and Fonts which changes size of the font in Package Explorer, among others.
If it helps you to spot the setting easier , this is a screenshot how to change the font elsewhere than the font from the editor window
Eclipse is using native Windows widgets and their settings can only be changed from Display Properties / Settings / Advanced / General properties tab. There you can change your screen DPI to alter font sizes.
In Eclipse 4.7.x the CSS files are under eclipse/plugins/org.eclipse.ui.themes_1.2.1.v20170809-1435/css/
In my case I use the dark theme for OSX, so I opened the file e4-dark_mac.css and added the font-size line:
CTabFolder Tree, CTabFolder Canvas {
background-color: #2F2F2F;
color: #CCC;
font-size: 13pt; // new
}
Thanks to Veger's reply, I successfully changed the font of my PHP Explorer in PHP Perspective (with PDT installed). The following CSS code,
#org-eclipse-php-ui-explorer Tree {
font-family: Consolas;
font-size: 21px;
}
are added into my "eclipse-4.3\plugins\org.eclipse.platform_4.3.1.v20130911-1000\css\e4_default_win7.css" file.
You may choose a different CSS file, depending on the theme you choose through Preferences → General → Appearance: "Theme" drop-down list).