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.
Related
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.
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'm creating DIV controls from code behind using this code -
System.Web.UI.HtmlControls.HtmlGenericControl dynDiv =
new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
dynDiv.ID = "dynDivCode";
dynDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Gray");
dynDiv.InnerHtml = "I was created using Code Behind";
this.Controls.Add(dynDiv);
Once created, I want to access it's height and width. Is it possible to do that? Or has it not been rendered on the screen at this point to have its properties accessible?
EDIT: I want to access the newly created div's(DIV1) width, but I also want to change the width of another div(DIV2) control i created based on DIV1's width. So I want to read and modify the width of 2 different div tags
There isn't a "width" established yet; it will depend entirely on how it's rendered by the client. You can get/set a CSS "style" attribute, or get/set a CSS class that will correctly style the element when it's rendered.
you should be able to accomplish what you're trying to do with CSS, but if all else fails, you could use Javascript (jQuery) to get the rendered size and use it to resize the other DIV.
I would add a .css file and then use percentages to get a good UI
Let's say we know them by its id's div1 and div2
Your classes on the .css file should look like this
#div1 {
width: 55%;
height: 50%;
}
#div2 {
width: 45%;
height: 50%;
}
and then, wrap them inside another div, lets call it wrappedDiv and use pixels in order to set the size correctly, add this other class in the .css file.
#wrappedDiv {
width: 1024px;
height: 768px;
}
Remember to add the .css file on the <head> tag of the page
<link href="~/Content/myNewStyles.css" rel="stylesheet" type="text/css" />
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 using the library 'CSS3 Pie' to allow me to use border-radius with previous IE a treat, by having the CSS style for the element like this:
border: 1px solid #122541;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
behaviour: url('../Content/Scripts/PIE.htc');
It works a treat, however when the page is postback (I am using an UpdatePanel if that makes any difference), the JS in PIE.htc that allows border-radius to work, doesn't fire so in previous IE versions the corners go back to being square.
What can I put in my Page_Load to essentially 'refire' the CSS on postback? Or is there another fix?
You could possibly use the JS edition of PIE (link: http://css3pie.com/documentation/pie-js/) and call a script on postback with something like this:
Page.ClientScript.RegisterStartupScript(GetType(), "myScriptName", "<script>if (window.PIE) {$('.rounded').each(function() {PIE.attach(this);});}</script>");