I'm using Popline in a Windows Store app but the only way I can get the icons to show is by linking to the bootstrap CDN version of the file. When I try and reference my local copies of the files, it doesn't work.
Here's my path to fontAwesome.css
<link rel="stylesheet" type="text/css" href="ms-appx-web:///Assets/HTML/css/font-awesome.css">
I know this is correct, because if I edit that file and add
* { border: 1px solid red; }
To the top, everything in my document gets a red border. The issue seems to be with the font files themselves. All are imported into the project and Content is set to "Copy if Newer"
I've tried editing fontAwesome.css so that the font file paths are preceded by ms-appx-web:///Assets/HTML/. When that didn't work I tried taking that block out and putting it directly in my document, like so:
<style type="text/css" media="screen">
#font-face {
font-family: 'FontAwesome';
src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Can anyone see what I'm doing wrong?
update
Please note I am using NavigateToString to load my html. This is absolutely necessary and there's no way around it, so the solution must work for NavigateToString
After a lot of trial and error I finally found how to do this. There are several solutions out there which work if you're using the Source property to put HTML in the WebView, but none of these work if you're using NavigateToString
This one, from Matt Small's blog, does.
#font-face {
font-family: 'FontAwesome';
src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64 STRING OF fontawesome-webfont.woff>) format('woff'),
url('ms-appx-web:///fontawesome-webfont.ttf?v=4.2.0') format('truetype');
font-weight: normal;
font-style: normal;
}
You'll need to put this code into the head of your HTML file. This will not work if in a separate css file.
You can use this page to convert your fontawesome-webfont.woff file. If that link doesn't work there are lots of other pages out there that do the same.
Related
I'm using Rotativa to generate some pdf's in a mvc application, now, I need to define an image as a watermark for the pdf, I was trying setting some custom css properties to the body tag, but in this case. I need to define the margin as 0, also I have a custom switch for a footer and with the margin 0 this is a problem.
I'm looking for a way t define a watermark, maybe using a custom switch.
Anyone knows if is possible?
Thanks,
Try this....
In your view put this HTML
<div class="watermark" style="background: url('../Images/watermark.png');"></div>
Also, add this style to your css file (or in a style section inside you view)
.watermark {
height: 100%;
width: 90%;
position: absolute;
top: 0;
bottom: 0;
z-index: 999;
opacity: 0.25;
}
I've read through the links here I could find about these techs. No exact match I could see, so...
I have a custom CSS class, I'm trying to apply it using an HtmlAttributes containing #class, but it never overwrites the underlying CSS (in the same file) for an <a>. Even deleting the default CSS for a fails. By contrast, when I use #style in HtmlAttributes, it works.
I'm assuming there's a subtle but boneheaded mistake in my syntax.
NB: My goal is to make the links look like buttons. For now I'll settle for removing underlining as proof of concept.
Here is the Razor markup that works, where quote is an object that contains text in a property, and whose ID is used against the model / db:
#Html.ActionLink(quote.QuoteContent.SupplyBytesAsString(), "ReadQuote",
new {quoteContentID = quote.QuoteContentID },
new { #style = "text-decoration: none;" })
Fine. This dumps underlining. But the following doesn't work, and I can't tell why. The actual CSS comes last here. It dumps underlining among other things, none of which get applied.
#Html.ActionLink(quote.QuoteContent.SupplyBytesAsString(), "ReadQuote",
new { quoteContentID = quote.QuoteContentID },
new { #class = "quote" })
This is my CSS right now, just the relevant sections (?), Microsoft's default and mine. I've tried every single option that various sources recommended for my quotes class... .quote then a, a .quote, .quote by itself, colons, anything else I could find or dream up. Maybe I missed something, ugh.
Anyway, I'd love to know what I'm doing wrong before my head explodes. Thanks...
a
{
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited, a:active, a:hover
{
color: #333;
}
a:hover
{
background-color: #c7d1d6;
}
a.quote
{
border: 1px inset #808080;
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
}
a.quote:active, a.quote:hover
{
background-color: #FFFF66;
}
a.quote:link, a.quote:visited
{
color: #333;
background-color: #00CC66;
}
< end of question >
Thanks to idlerboris for their comment. I checked out the issue they suggested (including viewing source markup from the browser) and the CSS was attaching.
So, it turns out I did make a boneheaded mistake as I feared, and long before the point where I posted here.
In short, the CSS doesn't work because I don't have .quote defined by itself in my CSS file. Naturally, I started with .quote defined standalone, but an error somewhere at that time (probably over in Razor) must have confused me and I got into hasty fixing instead of doing it right.
If there's a syntax lesson here, it's this obvious one: Don't try to use a style in combo-selector CSS syntax unless it's already defined by itself.
Another pointer: Don't forget to refresh in the browser when you debug and you haven't edited your page content. Caching will vex you. Not the root problem here, but forgetting caching didn't help.
The main lesson here is clearly: Code slowly, prefer looking things up over guessing, and no matter what, only change one variable in each experiment! sigh
We have created a dynamic JQUERY table with dynamic columns (Depending upon count value) and assigned it to DIV tag. However the thead and tbody is going outside DIV tag in IE7.
Looks like the width is automatically set dynamically by CSS, we are not able to override it.
Did anyone faced similar issues. Please help.
use important keyword like this.
width: 100px !important;
Added the following lines in DataTable.css file and it worked perfectly!!
table.display thead th div.DataTables_sort_wrapper
{
/*Fix for width issue*/
position: relative;
clear: both;
width:50px;
overflow:hidden;
word-wrap:break-word;
}
I have just started ASP .NET recently, I already know C# HTML and CSS so it wasn't too difficult to get a simple site running. All the online tutorials and documentation I have found , is either completely visual using the vs2005 ~ 2010 designers (I hate the designers) or mostly designing and some parts in VB .NET (I am er... not too keen on VB .NET). Overall , most only cover the basic and simple parts of web development , so I am getting problems in mastering the api. Anyway the thing that is bothering me the most is that I can't change the appearance of the web controls, the css properties work in some cases but not in all. The Site.Master part is almost completely unchanged. Screenshot:
screenshot
How do I change the blue and light blue colors of Site.Master?
From the looks of things, you are using the basic Web Application website which Visual Studio produces for you when creating a new project.
Going on this assumption, you need to look for the Site.css file in the /Content/ folder.
Inside this, will be all the styles used for the various elements of the site.
I think the areas you are wanting to change are the #header, #header h1',#menucontainer,ul#menu`
Just change the background and color properties to the colour you want. Also change the color of the border
You can open up site.master just like you would any other html page. In visual studio designer, you can do code view (html). Once in there you can make changes to your stylesheet/html page (in this case your master file) according to whatever elements you need to change. Im assuming you know htm/ css as you stated in your question.
Another way to quickly check html elements is to open the page in safari/chrome/firefox/opera, right click on the element of interest and "inspect element". Itll tell you what you need to change.
Btw:
<asp:menu converts to a div. Set a class for this element then add it to your stylesheet.
Many of the elements I was looking for were in the bootstrap.css file.
However, I modified my site.css to overwrite elements of those style.
I'm using Visual Studio 2013 Professional.
This link was helpful.
http://forums.asp.net/t/2009287.aspx?Changing+bootstrap+css
Site.css
.navbar-inverse {
background-color: #FFF;
}
.navbar-inverse li {
font-weight:bold;
}
Please read and learn1.
ASP.NET Theme and Skin.
Walkthrough: Customizing a Web Site Using Themes in Visual Studio
How to: Apply ASP.NET Themes
How to: Disable ASP.NET Themes
How to: Apply ASP.NET Themes Programmatically
Walkthrough: Creating User-Selectable Themes
How to: Define ASP.NET Page Themes
Site.Master.cs:
protected void Page_Load(object sender, EventArgs e)
{
foreach (MenuItem m in NavigationMenu.Items)
{
if (m.NavigateUrl.ToString() == "~" + HttpContext.Current.Request.Url.LocalPath.ToString())
{
m.Selected = true;
}
else
{
m.Selected = false;
}
}
this.DataBind();
}
Site.css:
Besides these two, I removed the "div.menu ul li a:hover" selector, the "div.menu ul li a:visited" selector and the "div.menu ul li a:active" selector.
div.menu ul li a.selected
{
background-color: #867F27;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
background-color: #7E5B33;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
I am trying to get the value of a "Background-image"-tag in a stylesheet which is used on my web-site. The style-sheets are referenced from the HTML file as follows:
<style media="all" type="text/css">
#import "master.css";
</style>
<style media="all" type="text/css">
#import "layout.css";
</style>
The layout.css file contains:
#frontpage-main-features {
background: url('../elms/frontpage-main-gradient.jpg') no-repeat left top;
margin-bottom: 10px;
}
#frontpage-main-features-inner {
width: 700px;
padding: 20px 20px 10px 20px;
background: url('../elms/frontpage-main-gradient-bottom.jpg') no-repeat left bottom;
}
In the master.css file a background image is referenced which is then overloaded in the layout.css file by the #frontpage-main-features-inner section. I would very much like to access the "background"-tag in order to see which background image is currently being shown in a specific part of the page. Any suggestions?
Best,
Michael
Why not just use FireBug / the IE8 dev console? load the page, open the console, find the piece of html you are looking for and inspect the css properties, it will give you all applied styles for that element, overridden properties will be striked through...
You're talking about looking at the markup of the page from C#, i.e. this is the markup that is not an ASP.Net server control and is not viewable by ASP.Net.
Sorry, that's not possible using ASP.Net. You can only view data that is marked for server to view.
Why do you need this? There could be another way to do whatever you are trying to do. Maybe you need to turn the problem around (get markup to get the class name from c#) which is easier.
The problem is that CSS rules are not applied or enforced on the server, they are applied by the client browser. You could perhaps create a parser that goes through the referenced CSS files and figures out what image should be displayed but you really can't know with certainty how the client browser will interpret and apply the CSS rules.