I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample
Related
I had everything working within style tags, but as soon as I cut and pasted what was in the style tags to a .css and linked it, the style stopped working. the only thing I can think of is that the file path is wrong. My html file and the style sheet are in the same directory.
Here is how I linked it (this doesn't work):
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
This does work though:
<head>
<style>
body {
background-color: rgb(255, 0, 255); /* this is the pink color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
</style>
</head>
that's the correct way to do it, however ensure that your file path matches. for your example above, the css file has to be in the same folder as the page you are working on and named correctly.
See that there are no HTML tags in your CSS file.
Check your console, are there any error regarding the css file? If yes, then try to use a full path for the css file
If no error in the console
check the Sources in console
navigate to external css link (<link rel="stylesheet" type="text/css" href="./mystyle.css">)
right click
open in new tab
Can the link be opened? If the link opened just fine without error and it display blank or not updated css file, then it's probably cached, try to change your link to <link rel="stylesheet" type="text/css" href="./mystyle.css?v=1.0"> (just add any query string that's never been used before to override the cached one)
Once you move your CSS to an external file, you need to remove the HTML tags. CSS has it's own formatting guide lines.
For example, for inline CSS (included in the HTML), you would do:
<html>
<head>
<title>Video Game Reviews</title>
<style>
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
</style>
</head>
<body...
But once you move the CSS to an external file, the HTML tags are removed. For example:
HTML file
<html>
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body...
CSS file called mystyle.css
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
There a few other things to check for.
If you are referencing mystyle.css like this ./mystyle.css, then the CSS file needs to be in the same folder or directory as the HTML file. That is what the ./ means.
If you store all your utility files (like CSS files) in a single location (something like /rc) you can use a full path like this:
<link rel="stylesheet" type="text/css" href="/rc/mystyle.css">
In this case, the / (no dot) means from the root directory of the website. But that is really a different question.
Your said , your html & css are in the same directory, but ./mystyle.css makes html search for a level up from the current directory.
Solution :-
Remove this(./)
Or
Move the css to a separate directory, say css.
So, now - css/mystyle.css
I was developing a simple website in Hungarian language, where special characters like: á, é, ű, ő etc are included in the text (head and body), and it worked perfectly in all browsers when opened from local. Once I uploaded the index.php file to the domain all special characters are displaying wrongly (like small pictures/icons). Page is done on bootstrap
I've tried changing the font-family, changed default language from en to hu, no improvement. Searched for answers already, but can't find what is wrong in my case
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vállalati oldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #e3e7e8;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
I am getting no errors
I found what the root cause was. First I started with checking if my fonts were supporting special characters (although I would expect strange signs if font would not support already on local). Everything was ok there. Naturally I tried to change fonts for different ones also supporting local language but- no luck.
Then I started to think that either there needs to be sth wrong at my hosting side- so when I upload the page to domain or with the uploading process itself.
Issue came to be with the uploading process. I am using filezilla for upload of my index.php file and all other files. It came that when I am setting up a connection I needed to do two things:
1. check the option: Force UTF-8 in the charset tab while setting up the connection
2. once connection is set up and before files are uploaded right click in the connection established part of filezila and choose "enter custom command" once small window pops up I put in there a "opts utf-8 on" command, then I got the success message in the main window
After all this I have uploaded my files and everything worked perfectly. All special characters are displayed!
I have an MVC form (with layout page _Layout.cshtml) using jQueryVal. When I submit with empty required fields the validation message displays properly BUT the style in Site.css is not being applied (overriding bootstrap.css). I suspect it is because jQueryVal is running client side. The only way I've found to make it work is to place the actual style on the _Layout page.
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/Site.css"));
Site.css
.field-validation-error {
color: red;
font-weight: bold;
}
_Layout.cshtml (This style block works but not when placed in Site.css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans" rel="stylesheet">
#Styles.Render("~/Content/css")
#*TODO site.css not overriding validation error text color*#
<style>
.field-validation-error {
color: red;
font-weight: bold;
}
</style>
Rendered Tags
I tried this page in IE and the style for red validation errors worked fine. Apparently, in Chrome, with a .cshtml utf-8 meta data header, it expects the .css file to be utf-8 as well. Who knew?? I opened a new document in Notepad++, making sure it was utf-8, pasted my .css content, saved it overwriting existing .css and LIKE MAGIC! IT WORKS! :)
In layout.cshtml you have used !important, but in site.css no - have you tried to use it in site.css? If yes, have you tried cascade css, e.g.
body .field-validation-error {
color: red !important;
font-weight: bold !important;
}
I am using the same css file on two different HTML pages for the same thing, on home page the fonts are looking bold but on the other page for the same thing I see some font size variation.
This is how it appears in the browser.
There is a font-weight difference in the pages.
CSS code
.nav a {
text-transform: uppercase;
text-decoration: none;
color: #0083b7;
text-transform: uppercase;
font-weight: 800;
border-bottom: 1px solid #0083b7;
font-size: 13px;
I don't know why is this happening, please tell me how to correct it.
Thank you.
Your only problem is that in the profile.css your custom font is not being loaded correctly for some reason. In fact, if you try to put the same font to both pages with chrome inspector you'll see that they're pretty much the same.
On profile.css what you are seeing is not Merriweather sans , but just sans-serif. Try to find out why .
Edit, here's why:
In your profile page you missed
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
in the HEAD.. (html) you have it on your first page. Put the font loading in your profile page and you're good to go.
Here's the result:
http://i.imgur.com/fb0hWA5.png
It looks like you have some odd repeated code inside the body tag on the 'gym' page.
<body promptdialogcheckdone="1"><embed id="__IDM__" type="application/x-idm-downloader" width="1" height="1" style="visibility: hidden !important; display: block !important; width: 1px !important; height: 1px !important; border-style: none !important; position: absolute !important; top: 0px !important; left: 0px !important;">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dear Fitness</title>
<link href="images/css" rel="stylesheet" type="text/css">
<link href="images/css(1)" rel="stylesheet" type="text/css">
<link href="/test1/css/profile.css" rel="stylesheet" type="text/css"><link href="/test1/css/common.css" rel="stylesheet" type="text/css"><link href="/test1/css/responsive.css" rel="stylesheet" type="text/css">
<!---Footer --->
/* snipped for space */
<!---Footer --->
<div class="green_border"></div>
So I was having this trouble that my background image was not working at all...
I had the .css file correctly added with element in html. However I never got it to work. The only way it started to show me the background image was when I decided to create a NEW .css file which i called bodystyle.css and it finally did show me the background image.
The code used was the one below... I just pasted it to the new .css file and included the new file and it worked like a charm... why would this happen? Has anybody encounter this?
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333;
background: url('http://wilco/includes/img/body-bg.jpg');
padding-top: 0px;
}
a {
color: #4681da;
text-decoration: none;
}
This is modify version of your program
Directory Structure: in windows
D:\MYPROG\wilco\includes\img
in this folder your image body-bg.jpg exist
D:\MYPROG\styles
Your css file NEW .css exist
AND last
D:\MYPROG
your prog.html file exist
Code is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="styles/NEW .css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<p> This is my Background</p>
</div>
</body>
</html>
AND THIS IS YOUR CSS FILE
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333; width:970px;height:;background-position: center top;
margin:auto;
background-image: url("../wilco/includes/img/body-bg.jpg");
background-repeat: repeat;
padding-top: 10px;
}
a {
color: #4681da;
text-decoration: none;
}
I tried in my computer its working. you try with your image and tell me if any queries
bye
What I do to "fix" this, is F12 to open the developer console (in most modern browsers), navigate to the head element, then the link element, and open the link to the css file in a new window.
Once it is there, press Ctrl+F5 (or Cmd+R on OSX).
Then go back and refresh your page...
All your files (.html,.css and background image) should be in the same folder.
try checking that..