Im using an icon-sheet with all my icons in it, and now referencing them in my CSS.
Each icon is 32*32 and is in a grid like this :
AA BB CC DD ...
A1 B1 C1 D1 ......
A2 B2 C2 D2 .......
UU XX YY ZZ ......
etc.
Where AA = icon, A1=hover, A2=active.
It works ok, in the CSS right now its like this :
.icon {
height:32px;
width:32px;
background-image:url('/img/slbuttons.png');
}
.AAicon {background-position:0px 0px;}
.BBicon {background-position:-32px 0px;}
.CCicon {background-position:-64px 0px;}
etc...
What im looking for is somehow to make it abit more simple, the icons doesnt change in size (32*32) so instead of manually writing each of the different icons, i just want to reference that ex. :
AAIcon = x0,y0, BBIcon = x1,y0, CCIcon=x2,y0
A1Icon = x0,y1, etc. etc.
instead of i have to sit and write each 32,64,96,128, etc myself - wasnt it possible to make a (xpos=gridcount*32, ypos=gridcount*32) ?
Reason why i want this is i just changed my icon-pack size and then i have to rewrite ALL those values again, and each block icon/hover/active are actually the same except for the coordinates, would be a big help if i could just have a global varialbe that defines the size and then thats used automatically to adjust the positioning later on.
Dont know if i can that in CSS, maybe thats CSS3 or ?
Im not an expert at all in CSS or WEB development so its probably an easy one.
In pure CSS, no you cannot do math. It is strictly a styling language. There are a few options when it comes to dynamically styling your page.
You can use SASS and LESS, which are their own languages, run through a processor (SASS uses Ruby, LESS uses JavaScript) to generate the stylesheet.
The second option would be to use JavaScript, and for a beginner, jQuery would probably be the easiest option. Once you have included the jQuery source using something like <script src="js/jquery.js"></script> (or alternatively the Google CDN), you are free to utilize the jQuery library in addition to standard JavaScript.
A short snippet to get the height of an image:
<script>
var imgHeight = $('.icon').height(); //remove the height and width from your CSS first!
var imgWidth = $('.icon').width();
</script>
You can then use jQuery to manipulate the CSS dynamically based on the height of the background image:
<script>
var iconA = $('.AAIcon');
iconA.css('background-position','imgHeight');
</script>
jQuery
Yes you can! By using a css preprocessor you can do math, variables and so much more. The two popular ones are SASS and LESS. SASS is gaining a lot of traction and is what I use. Here is a great rundown of it.
http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/
With a css preprocessor you can do exactly what you are talking about. Good luck! And enjoy easier css!
Related
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.
I'd like to have the images of a playing card displayed with CSS. But it would be great if there was a templating language that could set up a style like:
.playing-card-(.*) {
width: 30px
height: 40px
background-image: "/images/cards/$1.gif"
}
Does such a thing exist?
I'd love for this to exist but where I've had to do simular tasks I've had to rely on the server side to write the background-image as an inline style or use JS to do it (eg if I'm loading the data via AJAX).
I don't know if there is any CSS technology that will do this for you. Though it's not ideal, you can use jQuery to achieve this:
I would start by assigning a common class to each card "cards", then using jQuery to iterate through each item, assigning the appropriate CSS to the element.
$('.cards').each(function(index,element) {
$(element).css('background-image','url(images/cards/'+index+'.gif)');
});
In my css, I have a table with zebra striping. e.g. white and light-blue.
Lets say I have three columns... what I'd like to do is be able to make maintain the zebra striping, and within css (no javascript) add shading/make the blues darker for each column.
Is that possible? Something like getting the "current" background color #AABBCC and then Adding #000011 to the current color to give me #AABBDD...
No idea if this is even possible, so just wondering. I'm just being lazy, as I don't want to have to redefine my zebra striping for every column/column group I may have.
Thanks
No, this is not supported with CSS, unless you were to use something like CSS expressions (which rely on Javascript).
However, if you're willing to use a preprocessor for your style sheets, you can use a library like LESS to introduce variables and perform addition like that. This example in particular uses Javascript as well, so that doesn't really fit the criteria either.
Haha, in pure CSS, no way. There are several "css-like" languages though that can do this: scss, less, stylus, etc. The gist is that you write code that gets compiled down to "real" CSS.
In stylus:
stripe( color )
&
background color
&:nth-child(odd)
background color + #000011
td.foo
stripe( teal )
generates...
td.foo {
background: #008080;
}
td.foo:nth-child(odd) {
background: #008091;
}
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
I am currently working on a Drupal 6 theme, for which designer is explicitly requesting to use A LOT of rounded corners.
I could of course create the rounded corners - traditionally - with images. But I know there must be also better and easier ways of creating rounded corners.
Optimally, I would like to write my CSS as standards-compliant CSS3, with selectors like:
h2 {border-radius: 8px;}
Use of browser-specific is CSS is very OK also, like
h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
If required, I can also insert some custom JavaScript by hand. I just want to avoid adding yet another 100 rounded corner images to my markup.
Any suggestions on the best approach?
Define a class like "roundy-corner" and use the jQuery corner plugin like so:
$('.roundy-corner').corner();
You will need the jQuery roundy corner plugin:
http://www.malsup.com/jquery/corner/
I like to use JavaScript here because it doesn't require any additional markup in the source document; the script will insert placeholder elements as needed. Also, in the far, far future when we all have flying cars and IE supports border-radius, you can replace it with pure CSS.
Some Drupal-specific notes to use the suggested rounded corners plugin:
Download jquery.corner.js and put it to your Drupal installation's scripts folder. Make sure to set the file permissions correctly.
Load the script in your (Zen) theme by adding the following line to template.php: drupal_add_js('scripts/jquery.corner.js');
Assign rounded corners to any part of the page by adding styling commands again to template.php. Note that you need to hook them with drupal_add_js method. For instance:
drupal_add_js(
"$(document).ready(function() {
$('#primary a').corner('top round 4px');
$('.block-inner h2.title').corner('top round 4px');
});",
'inline'
);
That's it!!! Beautiful rounded corners with no images!