There's no configuration option in Web Essentials for VS2013 addin to set font style of markdown preview display. Is it possible to configure it using other means i.e. changing files?
I would like to either change it to some more readable serif font or change it to sans serif...
Got it. For some reason the context menu for "create markdown stylesheet" is disabled in 2013 but if you add the file yourself it works. In the solution root make a folder "Solution Items" and a file "WE-Markdown.css"
you should be able to add styles now and it will updates in your markdown preview.
NOTE: i was using version 1.6 Web Essentials for VS2013
EDIT:
As a simple example i am just using a bootstrap cdn include
#import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css);
Though it seems that the css support is not very advanced and there are some issues with multi line code blocks. there may be a way to fix this with some css overrides
Related
I'm new to Stack Overflow and I'm a bit familiar with HTML & CSS.
So I've been trying to get my CSS to work with my HTML for a week or 2, and this is my file structure before VSC "Solved" my problem: TestProj/HTML/index.html (for my HTML) TestProj/Resources/CSS/test.css (for CSS)
I'm using the following Boiler for HTML https://textbin.net/4hzjievpq0 (the reason there is no css link is because that is a boiler generator, I've put the link in my code so that's not the issue)
But whenever I "Go Live" (Extension in VSC to view in chrome) it displays it with no custom fonts or anything, but when I do background-color in the html file NOT THE CSS it works.
When I follow the css link in the html file it says there is no such file, and asks to create a file, then it creates a CSS file in the html hierarchy and then it somehow works?
I thought the CSS file was supposed to be in a different folder.
Any Suggestions?
Thanks,
Critical
I have to modify a legacy application and I want to quickly figure out what version of Font-Awesome the application is running, so I know which icons are available.
As that application is using complied CSS, I was unable to determine from the page's resources.
I imagine something like a JavaScript command or inserting an icon like fa-version which renders the version number.
You could try the following :
Locate CSS File
locate the use of a fontawesome icon in a page. Using Developper Tool (F12), find which CSS file gives the icon (and font).
In this file, search for a version number in comments (some CSS compiler keeps these comments)
Locate the Font file
in the previously located CSS file, search for the following string :
#font-face{font-family:FontAwesome;src:url(fontawesome....eot)}
Either the font file contains the version number, either you should go deeper.
Look for version in font file
Download the font file (you can guess the URL based on file name and CSS file URL)
Open the file in your favorite text editor and search for Version
I have some problems with css auto complete on my html files.
My project is java project on spring/bootstrap. I have less file that is compiled to css later on. On my html files I don't have access to classes from less or bootstrap files. I have "webapp" folder configured correctly in project.
CSS files are in:
a) webapp\css\less\main.less
b) webapp\css\ (bootstrap, main.css main.min.css)
Is it possible to add css (class) completition to html files that are created in project?
It should do it out of the box for css: http://www.jetbrains.com/editors/html_css_editor.jsp?ide=idea
for LESS however you might need to use a plugin : https://plugins.jetbrains.com/plugin/7059?pr=idea
I know LESS works out of the box with WebStorm and PHPStorm, though
If it still doesn't work, you might need to set the right file extension or associate that file with a certain interpreter
I've been using Font Awesome for a little while now, and was updating to 4.0 today. I decided to use the BootstrapCDN this time, and I've run into problems. The icons aren't being displayed despite using the new class names.
The CSS file is getting pulled down fine, but when I look at developer tools in Chrome the fonts aren't being served. Based on the relative path to the font within the CSS file (src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');), I was able to test the link and download the font:
http://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?v=4.0.0
So the link is correct (of course). Anyone know why the font isn't being served?
You have to do more than just use the new class names. Did you make sure that you added the fa class as well?
I'm assuming this is an easy question, but I'll be darned if I can find the answer.
I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css
At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.
If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx
In this case the / takes the path right back to http://localhost:2020
This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).
I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.
Any ideas??
Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.
I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.
Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.
If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.
In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.
The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%# Page ... directive on each page.
In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.
There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.
I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.
So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way
background: url(../image/..);
of course the code above sitting in the CSS file. It works for me all the time
not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:
1) click on the project in the solution explorer
2) it shows a "Virtual Path" property which is defaulted to "/projectname"
3) change it to "/" instead and it seems to do what is desired
let me know if this works for you!
it has been ages since I did anything in css, but maybe url(./images/image.jpg)
will work?
Edit:
Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.
I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.
I had set path css url image by
code { background:url(/images/xxx.jpg) no-repeat; }
and running file at IIS, so must to point default website to your project
how to running testing preview
type:
http://localhost/default.aspx
this is correct path same running on server
include file js or css can use "/" root path
cheers
Noboyband