I am trying to style the html helper webgrid but it is not showing my style classes when the page renders.
Here is my style code:
.gridTable
{
margin: 5px;
padding: 10px;
border: 1px solid #000000;
border-collapse: collapse;
min-width: 550px;
background-color: #fff;
color: #fff;
}
.gridHead th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow
{
background-color: #FFFF99;
}
.gridTable tr:hover
{
background-color: #CCFFCC;
}
.gridAltRow td
{
padding: 10px;
margin: 5px;
color: #333;
}
.gridRow td{padding: 10px;color: #333;}
.gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
.gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}
Here is my webgrid code:
#grid.GetHtml(tableStyle:"gridTable",
headerStyle:"gridHead",
alternatingRowStyle:"gridAltRow",
rowStyle:"gridRow",
displayHeader:true,
columns:grid.Columns(
grid.Column(header:"", format: #<text>#item.GetSelectLink("Edit")</text>),
grid.Column(columnName: "EntityName", header: "Name"),
grid.Column(columnName: "EntityDBA", header: "DBA"),
grid.Column(columnName: "EntityType", header: "Type")),
mode: WebGridPagerModes.All)
Is there some reason I am missing why the style would not be applied?
Two reasons why your styles wouldn't be applied are: if they are not referenced correctly in the layout page or wherever you are bringing styles into your view; or you may need to clear your browser cache to allow updates to the css file to show through.
Related
I have a CSS-stylesheet that contains several classes to style accordion elements. Due to several restrictions in the editor software I am forced to use, I need to embed other accordions via JavaScript.
This script only allow me to use three CSS classes to style the accordion. I would like to give them a similar style like those created by the editor.
My problem is that I can't figure out how to 'break down' the following multiple classes (those from the editor software) to the three new classes (those for the JS) to get a similar style of the accordions.
Existing CSS classes from the editor:
<cc:*> Accordeon </cc:*>
.sqracc {
box-sizing: border-box;
margin: 0 auto 30px auto;
max-width: 1400px;
}
.sqracc .sqracchead {
box-sizing: border-box;
margin: 0 30px;
padding: 0;
border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.sqracc .sqracchead:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sqracc .sqracchead div {
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
-webkit-user-select: none;
user-select: none;
}
.sqracc .sqracccontainer {
display: none;
}
.sqracc.sqraccopen .sqracccontainer {
display: block;
}
.sqracc.sqraccopen .sqracchead div {
background-image: url(<cc:print value="&accopen.svg.filename">);
}
#media screen and (max-width: 767px) {
.sqracc .sqracchead {
margin: 0;
padding: 0 30px;
}
}
And this are my new classes:
.bar {
}
.baropen {
}
.content {
}
I tried the following but it didn't work:
.balken {
box-sizing: border-box;
cursor: hand;
cursor: pointer;
padding: 10px 20px 10px 32px;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
cursor: inherit;
float: left;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
min-width: 30%;
}
.balkenopen {
cursor: hand;
cursor: pointer;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;
}
.inhalt {
padding: 10px;
}
[EDIT]
here is the JS which I embedded in the code of the editor:
<script type="text/javascript" src="<cc:print value="&ddac.url">">">
</script>
<cc:if cond="¶.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
As you can see this script have given classes. And I cant figure out how to edit those classes in order that they create a similar style like the accordion style classes in the editor CSS.
There is only one CSS file for the whole page.
[/EDIT]
I don't know this type of editor but you have two ways to achieve what you want:
Solution#1:
If there is a reference for the editor css
just put it before your customized css reference e.ge
<html>
<head>
<link rel="stylesheet" href="editor.css">
<link rel="stylesheet" href="YourCustomizedStyle.css">
</head>
<body>
</body>
</html>
This will make your style override the editor style
Solution#2:
Use !important on your CSS (I do not prefer this way) like this:
.balken {
box-sizing: border-box !important;
cursor: hand !important;
cursor: pointer !important;
padding: 10px 20px 10px 32px !important;
border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
cursor: inherit !important;
float: left !important;
background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important;
min-width: 30% !important;
}
.balkenopen {
cursor: hand !important;
cursor: pointer !important;
background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important;
}
.inhalt {
padding: 10px !important;
}
I am trying to apply custom styling for one table to a wordpress theme I am using, but I can't seem to get the table to use my custom styling. Am I doing something fundamentally wrong that I am missing?
Here is the form code with my edit class:
<table class="edit"><tr><td><form action="" method="post"><button type="submit"
class="link"><span>Form Approve</span> </button></form> | <form action=""
method="post"><button type="submit" class="link"><span>Form Delete</span></button></form>
</td></tr></table>
//Wordpress theme style
table {
border-collapse: collapse;
margin-bottom: 15px;
}
table th {
background:#eee;
border: 1px solid #fff;
padding: 10px;
}
table tr {
background:#f5f5f5;
}
table td {
border: 1px solid #fff;
padding: 10px;
}
//MY CUSTOM STYLING
.edit table {
border-collapse: collapse;
margin-bottom: 2px;
}
.edit table th {
background:#eee;
border: 1px solid #ffffff;
padding: 0px;
}
.edit table tr {
background:#ffffff;
}
.edit table td {
border: 1px solid #ffffff;
padding: 2px;
}
.edit table does not exist (that would be a table inside of another element that has a class of "edit"), instead you should use .edit or table.edit. Example:
.edit {
border-collapse: collapse;
margin-bottom: 15px;
}
.edit th {
background:#eee;
border: 1px solid #fff;
padding: 10px;
}
Well I cant really tell you whats wrong besides that fact that your wordpress template styling is the exact same as your custom styling.
I don't think you really need the edit class you can just overide the styles with out it and also .edit would go after table so it would look something like this
table.edit {
border-collapse: collapse;
margin-bottom: 15px;
}
Is there any way to apply styling to the WebGrid Pager?
The only way I've found to do this is from client side by writing Jquery code,
but it seems a little bit dirty.
Is there any normal way to provide css for this GridHelper?
You can use CSS as normal for styling links in a pager. You just need to ensure that you can identify the links via a CSS selector. If you place you Pager call in an identifiable element, this is quite easy:
<div id="pager">
#grid.Pager()
</div>
Now you can access the links for styling:
#pager a {
color: pink;
text-decoration: none;
}
#pager a:hover {
color: green;
text-decoration: underline;
}
It's simple with css.
Set your footer style to table-pager
#grid.GetHtml(
mode: WebGridPagerModes.All,
columns: gridColumns,
tableStyle: "table table-striped table-condensed table-responsive table-hover",
rowStyle: "table-row-clickable",
footerStyle: "table-pager"
)
and add this css:
.table-pager > td {
padding-top: 10px;
}
.table-pager > td > a {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 7px;
}
.table-pager > td > a:hover {
background-color: #f0f0f0;
}
I'm using DOMPDF to build out a download report of database entries for a shopping cart.
Not sure what code to put in here, it's a very typical html page with some foreach loops to display the content, and it creates the pdf just fine, but none of the css from the file is rendered as css, it gets printed as text at the top of the document.
The CSS is inline in the head of the document as any normal inline css would be.
$export_pdf ="<html><head>";
$export_pdf .="<meta http-equiv='Content-Type'
content='text/html; charset=utf-8' />";
$export_pdf .="<style type='text/css'>
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.list thead td { background-color: #E5E5E5; padding: 3px; font-weight: bold; }
.list tbody a { text-decoration: none; }
.list tbody td { vertical-align: middle; padding: 3px; }
.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
table .interior,
table .interior td { border: none !important; }
table .interior tr { border-bottom: #DDD 1px solid !important; }
.list tbody .interior thead td { background: #efefef !important; }
</style>";
Then just a basic table etc.
I can't find anyone else having this issue with inline css. I've seen some posts where people have troubles getting linked styles to work, but this is simple inline css, why is it being interpreted as text instead of css?
Thanks.
-Vince
As weird as it appears, it is due to the simple quotes in the <meta> tag.
Replace them by escaped double quotes and it will work. Could you report this issue in the issue tracker please ?
I am developing an ASP.NET web application which in its site master (in the ContentPlaceHolder3) I put some css style which should apply to the whole website. Part from this style is the following:
.Welcome {
width:531px;
margin:5px 15px;
float:left;
padding:5px 10px;
}
.Welcome ul {
width:250px;
float: left;
margin:5px 3px;
padding:0;
list-style:none;
}
.Welcome li {
background:url(images/ul_li.gif) left no-repeat;
padding:5px 20px;
margin:0;
font: normal 12px Georgia, "Times New Roman", Times, serif; /* the original font-size was 11px. */
color:#5c5c5c;
}
Now, in one of the website pages, I want to put some content inside that ContentPlaceHolder with the following specific style:
/*body { font: 0.8em Arial, sans-serif; }*/
.tipsMenu { padding: 0; clear: both; }
.tipsMenu li { display: inline; }
.tipsMenu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.tipsMenu li.active a { background: #eef; }
.tipsContent { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 60px; width: 400px; }
EDIT:
*When I tried to do it, I got some style from the CSS file that is in the site.master page. So how can I override the style in the master page with the inline style?*
Apart from making sure the specific style is loaded after the one embedded in the site.master page, you can try a couple of things:
1. Check the css specificity of your new styles. Basically you need to make sure that the selectors used in your new styles are more specific than the ones used in the other stylesheet. In short, inline styles are more specific than ids, ids are more specific than classes and classes are more specific than html elements. e.g.:
#selector {
// High specificity
}
.selector1 .selector2 .selector3 {
// Less specificity than #selector, #selector styles applied
}
2. Add the !important clause to the styles. This overrides the specificity rules and forces the browser to use the important style. Although easier, this method isn't recommended for the sake of maintainability, among other reasons. like this:
.tipsMenu { padding: 0 !important; clear: both !important; }
.tipsMenu li { display: inline !important; }