In my stylesheet I have this declared
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
Now in my C# code behind I try to set the class like this
row.CssClass = light;
But I get a compile error of
The name 'light' does not exist in the current context
Is it possible to reference a css class #font-face from C# codebehind?
EDIT
This is how I am attempting to use this - I have tried the below
.lightfontface {
font-family: 'light';
}
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
row.CssClass = lightfontface;
I believe your
row.CssClass = light;
needs to be
row.CssClass = "className";
and your css will need a .className entry.
Imagine your html row:
<tr class="className">stuff</tr>
Your CssClass assignment is assigning the value to class, and your css can use a class selector to format that row.
To sum up some of the comments, the style sheet entry should simply be:
.className { font-family: 'light'; }
Ordering on your style sheet is important. Put the font-face definition above the .className style entry. See: https://www.w3.org/TR/CSS2/cascade.html#cascading-order
Related
I am trying to create a server status icon on the top of my application. When it is off appear as red, and on the other hand when it is on appear as green.
I have done all the dirty job in my DAL, BL, Controller and ViewModel and as a result i have a div element on my page which change colors subjected on the service status. My problem is that i cannot add a label next to the div.
public static class ServerStatusIconHelper
{
public static MvcHtmlString ServerStatusIconHelper(this HtmlHelper htmlHelper, bool isServerActive)
{
// Main container
var div = new TagBuilder("div");
bool isActive = isServerActive;
var labelValue = isActive ? "The server status is On" : "The server status is Off";
if (isActive)
{
div.Attributes.Add("id", "server-warning-on");
div.Attributes.Add("style", "background-color: green; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
}
else
{
div.Attributes.Add("id", "server-warning-off");
div.Attributes.Add("style", "background-color: red; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
}
return new MvcHtmlString(div.ToString());
}
}
I would appreciate some help since i dont know to add a div with a paragraph element which will provide the labelValue. In addition if anyone has any idea for something better would be nice.
When using TagBuilder you can set tag content using InnerHtml property or SetInnerText method:
InnerHtml: Gets or sets the inner HTML value for the element.
SetInnerText: Sets the InnerHtml property of the element to an HTML-encoded version of the specified string.
Here is an example:
var div = new TagBuilder("div");
div.AddCssClass("someClass");
div.MergeAttribute("id", "someId");
div.InnerHtml = "Some Text or Html Tag";
var result= div.ToString();
Which generates this output:
<div class="someClass" id="someId">Some Text or Html Tag</div>
You can combine label and div tags this way.
Also, you need to add display: inline-block; to your style to display label next to div.
You can use InnerHtml property of the tag.
var labelValue = isActive ? "The server status is On" : "The server status is Off";
div.InnerHtml = labelValue;
or if you want to concatenate a span element with div, you can do
var span = new TagBuilder("span");
span.InnerHtml = labelValue;
and return as
return new MvcHtmlString(div.ToString() + span.ToString());
I'm building some HTML in a StringBuilder like so:
builder.Append("<tr align='center' valign='top' class=\"skyBlueBackground textAlignCenter\">");
List<String> columnHeadings = GetColumnHeadings(monthCount, _begindate);
foreach (String s in columnHeadings)
{
if (s.Equals("Grand Total"))
{
builder.Append("<td align='left' valign='top' class=\"forestGreenBackground whiteText\"><b>");
}
else
{
builder.Append("<td align='left' valign='top'><b>");
}
builder.Append(s);
builder.Append("</b></td>");
}
builder.Append("</tr>");
Although I've got a class for centering text:
builder.Append("</style>");
. . .
builder.Append(".textAlignCenter { text-align: center; }");
builder.Append("</style>");
...the text is aligned left; it works other than that (skyblue background), it just stays magnetized to the left:
What must I do to get the text to center?
You should either set the textAlignCenter on the TD, not the TR or change the CSS definition to:
builder.Append(".textAlignCenter td { text-align: center; }");
And you should remove the explicit "align='left'" from your TD because that will still overrule the CSS.
If you are asking for how to vertically align the text, you could use the vertical-align CSS property. See here for more info.
You could also use the valign attribute, but it is deprecated in HTML5 and it is not a recommended approach.
Your problem is simply, you have created correctly the css class property .textAlignCenter, but your attribute align="left" on the <td> has style priority.
I think you can do two solutions:
Put the class .textAlignCenter on the td you want to align
center.
Remove the align="center" of the td and add a css like
this:
tr td {text-align:left}
tr td.textAlignCenter {text-align:center}
With this last solution you overwrite the last style.
I'm working on a metro app: c# and xaml.
The app loads a html file (stored in a directory) into a webview with its css file.
I want to use a custom font: how can I accompish that?
I've tried
#font-face {
font-family: 'Geeza_Pro';
src: url('ms-appx-web:///Fonts/Geeza_Pro.ttf') format('truetype');
}
#div_name{
font-size:30px;
font-family: "Geeza_Pro";
}
and
#font-face {
font-family: 'Geeza_Pro';
src: url('Fonts/Geeza_Pro.ttf') format('truetype');
}
#div_name{
font-size:30px;
font-family: "Geeza_Pro";
but is doesn't work!
#font-face /* Define New Font */
{
font-family: coolfont; /* Assign Font Name */
src: url('fonts/coolfont.ttf'); /* Font File Location */
}
#div_name
{
font-family: coolfont;
}
I need to change the font size of bold thing below. I have a css for use but this bold part needs font changed to 8px instead of 10(css). i want someone to help me with how to change in Code behind.
string newpackname = dschkdowngraded.Tables[0].Rows[0]["ChangedTo"].ToString();
DateTime dt = Convert.ToDateTime(dschkdowngraded.Tables[0].Rows[0]["TakesAffect"]);
dt = dt.Date;
// need to change what is inside the ()
string packname = accountSummary.PackageName + " (Downgraded to "
+ newpackname + ". Effective from " + dt + ")";
Css is here:
float: left;
padding-right: 10px;
color: #0d7194;
font-weight: bold;
You can have two css classes, then change the css class propery ofr the relevant label.
myLabel.CssClass = "someClass";
Use CSS for this, when you do it in your codebehind you need to build and deploy whenever you want to change the font size. With CSS you can just change it.
Give the labels that need a smaller text an other class like Tom Gullen suggests
I have an ASP.NET AJAX autocomplete extender with CompletionListCssClass=autocomplete_completionListElement :
.autocomplete_completionListElement
{
width:500px;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
overflow :auto;
height : 200px;
text-align : left;
}
But for some odd reason the width of the auto complete list always takes up the width of the textbox even when I set the width to 500px. Is there a way to fix this?
I believe you can also accomplish this by changing
width:500px;
to
width:500px!important;
Tim Mackey expounds more in this blog post. Basically you have to use !important to override the CSS spit out by the control itself.
I finally figured it out. I used the OnClientPopulated="onListPopulated" property as follows:
function onListPopulated() {
var completionList = $find("AutoCompleteEx").get_completionList();
completionList.style.width = 'auto';
}
You need to set the min-width to 500px