I started using Atom today. It's great, but I have a couple of issues:
Syntax Themes: I installed some syntax themes, but I found one cannot modify editor font colors, just style and size (from the main settings pane). Is there any workaround?
Markdown Preview: I was unable to find out how to change preview style.
I mean, markdown is rendered with arial fonts and a white background.
Is there any way to change this default behaviour?
You should be able to customize both in your user stylesheet. On Mac OS X, you can open this using Atom > Open Your Stylesheet, which will open the ~/.atom/styles.less file.
For the syntax themes: You can customize the colors in your styles.less file, simply take a look at the theme's source LESS file and then override the settings in your custom stylesheet. More details and an example can be found here.
Markdown Preview: The Markdown Preview package has an example on how to do that in your own styles.less file:
.markdown-preview.markdown-preview {
background-color: #444;
}
Take a look at the Markdown LESS files to see some of the styles you could override:
Default style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-default.less
GitHub style: https://github.com/atom/markdown-preview/blob/master/styles%2Fmarkdown-preview-github.less
The markdown-preview-plus documentation now gives a different approach to styling the preview (even from the "snippet" provided in their README"):
To target Markdown-Preview-Plus rendering in general, you can do something like this in your stylesheet:
html[data-markdown-preview-plus-context] body {
/* styles that affect mpp preview */
}
Full details (especially on further "contexts") in the MPP docs.
Related
I am a beginner in CSS & Markdown. I customized a CSS file based on Pixyll, one of Typora's official themes. It looks alright in Typora editor, but I found a problem related to the (un)ordered list when exporting the Markdown file to a PDF document.
Block margin in the editor
Block margin in the exported PDF document
Apparently the block margins are not the same, and the problem went away after switching to Github theme.
I checked the Computed Style with DevTools and read the Import & Export instruction on Typora's official website. The developer suggested me to use the #media print to apply some styles to exported documents seperately. But I've gone through my CSS file and there was no #media print label.
So how does the CSS File specify different styles for exported documents and editors? Thanks in advance.
I have downloaded a simple template from the internet and for icons, the developer used Flaticons font. Now I want to put another icon on the website but I can't get Flaticons code for CSS file. On Flaticon site only can be downloaded in PSD, SVG, BASE 64 I don't have code like .flaticon-research:before { content: "\f100"; }. How to get that? Is there any solution to convert SVG file to get that content or how? I don't want to download every single SVG file and from the SVG file get the icon. I want to use the above example method. Any help will be welcome. Thanks all
follow the instruction here https://www.flaticon.com/iconfonts
after downloading the font you will see multiple files show you how to use your icons depending on you using css or scss
I am using Rails pdfkit gem to render multi-page pdf files. The rendered pdf file picks up the CSS(SCSS) styling and page breaks as expected. However, when I try to render the same pdf document in production, it seems like the styling only loads some CSS rules and ignores others such as parent container's width and height declarations. Here is my CSS (SCSS) for the parent container element:
.policy_pdf{
font-family: Arial, sans-serif;
.pdf-page{
width:98%;
height:17.1in;
margin:auto;
page-break-after:always;
...
#media screen{
border: 1px dotted red;
}
page-break-after:always;
}
...
}
and PDFKit initializer:
PDFKit.configure do |config|
config.default_options = {
:page_size => 'Legal',
}
end
Here is an example of a pdf rendered in development:
and here is how this same pdf looks in production:
The red line around the doc is a CSS rule I introduced to display how page edges are rendered in production.
Environments
Both, development and production (Digital Ocean Droplet) are using the same version of Ubutnu (16.04).
What have you tried?
At first I thought that some of the CSS classes I am using for pdf-kit such as .page get overwritten by some conflicting rules at compilation, so I tried using unique class names such as .pdf-page instead of .page.
I then tried to see whether it can be related to SCSS compilation. But nested border and background-color declarations within the same stylesheet are getting 'picked-up' and rendered fine. The policy-pdf block inside the compiled application.css looks correct as well.
Disabling smart-shrinking made the PDF look even more "crumbled".
Applying size / width CSS rules (in-line and via external stylesheet) to the html tag as suggested in this post:
Clue:
Both, production and development are running the same version of wkhtmltopdf of (~> 0.12.2). However, running wkhtmltopdf -V, returns wkhtmltopdf 0.12.2.1(with patched qt)
I had similar porblem. In my case it was missing fonts on Ubuntu.
sudo apt-get install ttf-mscorefonts-installer
sudo fc-cache
https://askubuntu.com/questions/651441/how-to-install-arial-font-in-ubuntu
I had such problem a while back too.
I'm not sure, but if I recall correctly, it ended up being different versions of ghost-script.
You can check the version by running gs -v
The production output appears to have larger margins than the dev output.
From your given sample of the relevant css showing your "page config", this might be simply fixed by specifying those margins. This isn't done on the virtual page element .pdf-page, but inside the #page selector.
#page {
margin:10mm 15mm 10mm 15mm;
}
Depending on how this design has being developed and previewed, (print dialog, dev tools media emulation) you may need to adjust those margins to conform to the margins used to preview the work.
This can be done within the Chrome print dialog by setting Destination to 'Save as PDF', expanding 'More settings', selecting 'Customised' within Margins and finally entering the values or directly dragging the margins that now appear over the print preview.
While I'm not familiar with PDFKit, I've developed templates for AthenaPDF, I assume they're all pretty much standard PDF converters using Headless Chrome under the hood. We found it was easier and more flexible to define the #page properties through css rather than attempt to configure it through the AthenaPDF docker service. It only took standard, minimal and none as margin values.
I'm using an icon font and everything works so far as the icons show up in the interface as they should. I'm creating the file via Sass using the .scss format.
I noticed when I inspect an element to view it's CSS properties in the code inspector, or view the style sheet via the code inspector, or just open the .css file in my text editor, it shows the Unicode character of the icon glyph as follows:
.icon-alert::before {
content: "" !important;
}
What causes the little box with the question mark instead of what's actually written in the .scss file: \e669
How can I fix this?
I cannot mark this duplicate yet but there are existing posts around this topic. You have to create a function to workaround a known bug:
Sass: unicode escape is not preserved in .css file
https://github.com/sass/sass/issues/1395
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)