Is there any way to utilize a master.less file to house all of the necessary config parameters for .less?
I've got the following variables that I currently have to put at the top of each .less file in my solution.
/* DOTLESS VARIABLES AND REUSABLE FUNCTIONS */
#brand_color: #9fdf40; /* Primary MySite Green */
#Color: #696969; /* Alternate Text Color */
#top_gradient: #80cc15; /* MySite Green for TOP of GRADIENT */
#bottom_gradient: #9fdf40; /* MySite Green for BOTTOM of GRADIENT */
#borders: #696969; /* Standard Gray Border */
#light_borders: #DDD; /* Lighter Gray Border */
#note: #ffffbe; /* Yellow Notification Color (Also used for ad highlights) */
#font_family: Verdana, Arial, Helvetica, sans-serif; /*Standard MySite Font Family*/
.two-corner-radius(#radius){
-webkit-border-top-left-radius: #radius; /* Saf4+, Chrome */
-moz-border-radius-topleft: #radius; /* FF3.6+ */
border-top-left-radius: #radius; /* CSS3 */
-webkit-border-bottom-right-radius: #radius; /* Saf4+, Chrome */
-moz-border-radius-bottomright: #radius; /* FF3.6+ */
border-bottom-right-radius: #radius; /* CSS3 */
}
.gradient(#from:#top_gradient, #to:#bottom_gradient, #fallback:#brand_color) {
#ffgradient: "-moz-linear-gradient(center bottom, {0} 37%, {1} 72%)";
#wkgradient: "-webkit-gradient(linear,left top,left bottom,color-stop(0.37, {0}), color-stop(0.72, {1}))";
#iegradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='{1}', endColorstr='{0}')";
#ie8gradient: "\"progid:DXImageTransform.Microsoft.gradient(startColorstr='{1}', endColorstr='{0}')\"";
background : #fallback; /* for non-css3 browsers */
background : formatstring(#ffgradient, #from, #to); /* FF3.6+ */
background: formatstring(#wkgradient, #from, #to); /* Saf4+, Chrome */
filter: formatstring(#iegradient, #from, #to); /* IE6,IE7 */
-ms-filter: formatstring(#ie8gradient, #from, #to); /* IE8 */
}
/* END REUSABLE FUNCTIONS*/
Now obviously this is easier to maintain over having to edit each instance of each variable within the css (as one traditionally would), however it would be much more beneficial if I could declare a master.less file to hold the variables and functions, and then have it rain down sweet CSS goodness to all of my "sub" .less files.
I'm currently using Chirpy to manage my .less files, which in turn uses a dotless.core.dll
Turns out there's an #import declaration that allows me to import my master.less file. All I have to do is put this at the top of each .less file and use all of the functions/variables contained within it.
#import "E:\Projects\MyApp\UI\Assets\Css\master.less";
Works like a champ.
Related
I'm just kind of curious as to why I need so many different lines of CSS code to make my gradient compatible with most browsers. Isn't this something that should be universal?
Correct me if I'm wrong, but if something this simple is this not universal, I'm surprised that we don't need browser specific code for font-size, padding, margin, etc.
div.myQuestion {
width: 250px;
height: 100px;
background: #7d7e7d;
/* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
/* IE6-9 */
}
<div class="myQuestion"></div>
That's because gradients are complicated.
You don't need prefixes for padding and margin because they were defined in CSS 2.1, and are simple enough.
However, gradients were defined much later, in CSS3. Moreover, the syntax changed multiple times. The behavior also changed. Some people were still arguing relatively recently to change the space of colors in which the color stops are interpolated (it's not obvious when you take transparency into account).
Then, lots of people don't update they browsers. So they are stuck with these preliminary implementations.
Now most browsers have realized vendor prefixes are a nightmare and they decided to avoid using them for new properties.
I'm trying to make a navigation of buttons. When one button is clicked, that anchor tag changes its background color to show that it is active. I'm using the background property with gradients but when I apply the active class to a link, the background doesn't change colors. I've tried looking in the Chrome Console and it simply shows that the new background color is loaded but it does not apply it. (It has the line through it as if it is over-written by another CSS rule. But the new CSS colors comes after the old colors so in the order of hierarchy, it should take precedence. Any ideas on what I'm doing wrong?
Here's my CSS code:
.main-nav li a {
font-size: .9em;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
color: #444135;
display: inline-block;
margin: 24px 12px;
background: #AFE4B3; /* Old browsers */
background: -moz-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* FF3.6+ */
background: -webkit-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* Opera 11.10+ */
background: -ms-linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* IE10+ */
background: linear-gradient(#C8F1CA, #D3F1D5 , #AFE4B3); /* W3C */
border-radius: 10px;
padding: 7px;
width: 100px;
}
.active {
background: -moz-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* FF3.6+ */
background: -webkit-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Opera 11.10+ */
background: -ms-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* IE10+ */
background: linear-gradient(#FF6440, #FF8E73 , #FF6440); /* W3C */
}
And here's the HTML that it is being applied to:
<nav class="main-nav">
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li>Library</li>
<li>Contact</li>
</ul>
</nav>
Here's a fiddle of the problem: http://jsfiddle.net/6udt8/
Thanks in advance!
.active is less specific than .main-nav li a so make it more specific by writing
nav ul li a.active {
/* Styles goes here */
}
Or even more specific...
nav.main-nav ul li a.active {
/* Styles goes here */
}
Demo
As commented, that why does this really happen? So let me explain you that, the issue is the selectors specificity here, lets make a demonstration example...
But first lets take a look at what docs have to say...
From W3C 6.4.3 Calculating a selector's specificity
A selector's specificity is calculated as follows:
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an
element's "style" attribute are style sheet rules. These rules have no
selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In
particular, a selector of the form "[id=p33]" is counted as an
attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is
defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a
large base) gives the specificity.
Don't get what the docs say? Don't worry, read ahead, I've shared a simple explanation which is followed by an article which will explain you the specificity calculation.
Suppose we a simple span element in a class...
<span class="hello">This is just a dummy text</span>
And we use an element selector like say
span {
color: red;
}
Obviously it will color it red... Demo
Now lets declare another selector like
span.hello {
color: green;
}
And place that in your stylesheet, and so now, that will turn the text of the span color to green... (Regardless of the order you place the property block in your stylesheet)
Demo 2 (Text will be now green)
It's because span.hello {} IS MORE SPECIFIC compared to a simple element selector which is span {}.
For more detailed explanation, I would like you to read on CSS Specificity
You can also use CSS Specificity Calculator to compare selectors specificity.
The example I shared of span, here, the specificty of the selector will be only 1
Whereas span.hello specificity will sum up to 11
http://jsfiddle.net/6udt8/2/ updated fiddle as follows
.main-nav li a.active {
background: -moz-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* FF3.6+ */
background: -webkit-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* Opera 11.10+ */
background: -ms-linear-gradient(#FF6440, #FF8E73 , #FF6440); /* IE10+ */
background: linear-gradient(#FF6440, #FF8E73 , #FF6440); /* W3C */
}
Question: Can I add a softer CSS style to a cell back colour?
Issue: Gridview highlights in Red/Yellow/Green if something needs doing. As you can imagine this looks a bit garish at the moment.
What I want to do is add a soft edge around each cell. So I have two schools of thought but don't know enough about CSS to find the answer (I could be searching for the wrong keyword)
1) Add a soft edge around the cell colour
2) Create a 'soft padding' for each gridline that takes the edge of the colours like a mask.
The code!
CSS code I use at the moment to change the cell colour:
e.Row.Cells(iLoopColumn).BackColor = Color.Green
I have found colour gradient at www.colorzilla.com/gradient-editor but how do I merge the two, if that is the right route.
background: #f0b7a1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjdhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhjMzMxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzc1MjIwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjZlNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-8 */
Here's a solution that gives entire rows in a table a soft-edge effect. The key points are
Give the targeted rows a class so you can target them with the css
Apply the disply: block style to force colouring the row (it also
removes default padding between cells)
Use 2 different classes - one to apply the soft-edge effect, the
other to set the colour of the row.
Note: only tested with Google Chrome Version 32.0.1700.76 m
<!DOCTYPE html>
<html>
<head>
<style>
.softEdge
{
display: block;
box-shadow: inset 0 0 20px rgba(255,255,255,1.0);
}
.red{ background-color: #F00;}
.green{ background-color: #0F0;}
.blue{ background-color: #00F;}
</style>
</head>
<body>
<table>
<tr class='softEdge red'><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr class='softEdge green'><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr class='softEdge blue'><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
</body>
</html>
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.
We have the following themeable styles to have a gradient for the background of the webpart body:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/*[ReplaceColor(themeColor:"Light2-Lightest")]*/ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9)';
}
All of it works fine except for the -ms-filter style for IE8. I've tried every combination of escaping the quotes and slashes and single vs double quotes, but the only way I can get it to work is to remove the ReplaceColor instructions:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9)";
}
Is it possible to have -ms-filter support themeable styles?
UPDATE:
It actually works as expected when a theme is applied. The problem is that when no theme is selected, the gradient is blue on top and dark blue on bottom. So it seems to be working up to the first comment slash because the rendered result is the same as if the style did not specify colors:
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0)';
You could get your theme to process the images for you - and that way you wouldn't need CSS for 3 different browsers. The themes in 2010 can recolour images (or areas in images)
e.g.
/* [RecolorImage(themeColor:"Dark2-Lighter",method:"Filling",includeRectangle:{x:0,y:467,width:1,height:11})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;
Which is pretty neat. When you apply your theme, the image (bgximg.png) will be processed and colours replaced and so on.
If you look through CoreV4.css there are examples. Or this is an okay description. Perhaps Tinting would be adequate?
Failing that, I'd try putting my Theme directives before where I use my colours, rather than in:
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.8")] */ background-color:#21374c;
Here is how we fixed it. We have two style sheets that were identical, but placed in different directories:
14\TEMPLATE\LAYOUTS\1033\STYLES\MyProject\MyStyles.css
14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\MyProject\MyStyles.css
Our custom master page points to the first style sheet. That is the style sheet that is used when the Theme is Default (no theme). But when SharePoint goes to compile a selected theme, it uses the style sheet in the second directory.
We left the second style sheet alone because it was working when it is compiled into a theme. We then removed the theme directive comments from the filter styles in the first style sheet:
.ms-wpContentDivSpace{
/* For Non-CSS3 Browsers */
background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent;
/* For Firefox 3.6+ */
background: -moz-linear-gradient(top,
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB,
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
/* For WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom,
from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB),
to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
/* For Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9);
-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr=#FEFEFB,
endColorstr=#E9E9E9)';
}
We tested it out and the gradient is now working, with or without a Theme, in IE7 & 8, FF and Chrome.
Have you considered using CSS3Pie?
This is a hack for IE, which allows it to recognise certain CSS3 properties using the standard syntax. It includes gradient backgrounds.
Using CSS3Pie means you can forget about ever having to use those horrible filer and -ms-filter properties, at least for gradients.
It's also great for supporting border-radius, which is probably its most popular feature.
Hope that helps.