border:3px solid black;
In the above example, you can set color by saying the color's name. There is also a wide verity of color name out there also.
And so my question is this. Is there a way to define your own custom color name on your site in css, javascript/jquery, or even php.
Why? (I'm partially mad, but) In c# it can be handy to have a global variable to use that you can change and it would effect everything using it, and I would love a similar effect.
You may ask "Couldn't you just use class="myColor"?" I COULD, but I don't always use the color the same way, I sometimes use it for borders, background, or even text. Also, I'd have to give it a class, rather than declare it in css, which for a border can be weird.
Basically, I was wondering if there's anything even close to what I am looking for, be it css (so doubt it), jquery, or even php. Considering I want to use this color name in css I doubt this is possible, but I would love to be proven wrong.
You can set variables using a CSS PreProcessor such as SASS or LESS.
Using SASS it looks like this.
$lightGrey :#5e5e5el;
a {
color: $lightGrey;
}
Output:
a {
color: #5e5e5e;
}
Use a color value as opposed to a named color: https://developer.mozilla.org/en/CSS/color_value
SASS has this useful feature (and many others).
There is nothing built into CSS for this. You may want to look into LESS. With it you could easily put a color in a variable and use it throughout your CSS. LESS is designed to make CSS more DRY.
Here is the description of it from that link:
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
You can use "LESS" or "SASS" to do that.
#myColor: #FFCC00;
...
background-color: #myColor;
...
border: 1px solid #myColor;
This may be coming to CSS eventually.
Related
So my problem is awkward, I have a Wordpress website on which I can't overwrite CSS. On which I've added a google font.
The problem is that sometimes when I want to overwrite a CSS using either a id and class selector, or embeding style into html, the font get's always overwritten.
How to overwrite css (font-face) which is coded in css in style_options.php which generates options.css.
Did anybody solve this problem already?
Thank you for answers!
Strictly speaking, if you want your attribute not to get overwritten, you need to use !important like so:
p {
color: blue!important;
}
#myid {
color: red;
}
<p id="myid">This text is blue.</p>
But i think you should check in your theme's option, there's gotta be some way to edit within wordpress such things as the font. (thanks Vineet Kaushik for pointing that out)
Is there anyway that I can put frame of my pdf(tcpdf) ?
or just a simple border margin box like border:2px solid black; will do.
I just discover tcpdf and I check their example and I can't find about frame.
What you are looking for can be controlled with:
Rect()
TCPDF shows an example called graphic methods (PHP) (PDF).
Also, you can look at:
SetMargin
It can take a bit of setup but works nicely.
You could use this method: PDF, PHP, which uses SetLineStyle().
We have a less file hi_style.less:
#import "css/base-ui.less";
#hi {
margin: 100px;
}
that includes another less file css/base-ui.less with lines like this:
.ui-go {
background: #74A372 url(<?php echo $l_uri; ?>/images/ui-go.png) repeat-x scroll 50% 50%;
}
The reason we need php (unless someone has a better idea) is because there is only one codebase but we have many sites attached to separate database from that singular codebase.
e.g.
site-a.mysite.com and site-b.mysite.com both use the same code but the urls are obviously different.
Is there a way to ignore the php tags in less or a better way to have explicit urls with one codebase.
We can't use relative paths as the base path can change and point to a different codebase.
Thanks in advance.
EDIT: It can't be a static file after it's processed because the codebases can be accessed via a url like: site-a.mysite.com/testing or site-a.mysite.com/beta so the url of the image file could be:
http://site-a.mysite.com/images/ui-go.png or
http://site-a.mysite.com/testing/images/ui-go.png or
http://site-a.mysite.com/beta/images/ui-go.png depending upon the codebase that's being accessed.
It seems to me that wrapping the url string in quote marks (which is quite valid; here I did single quotes ') will solve your issue. So...
.ui-go {
background: #74A372 url('<?php echo $l_uri; ?>/images/ui-go.png') repeat-x scroll 50% 50%;
}
That allows LESS to actually output the string with the php code (rather than throw an error), then when you run your compiled css through the php parser (I assume that is what you are doing), it should still fill in the echo value as needed.
I am going to start on a website whose requirement is to change the color scheme after every 2 weeks.
I am looking for a dynamic solution to change colours and somewhat structure of a website using css & php.
One solution which i can see is using dynamic css method for example
<?php
header("content-type: text/css");
$mencolour = "#ff0000";
echo 'h1 {color:$menucolor}
?>
Other solution is using some php classes to do the same task.
such as one is available on phpclasses website.
http://www.phpclasses.org/package/6482-PHP-Parse-and-process-Leaner-CSS-files.html
Is there any other better way of doing this? if any one has used above two methods, what could be drawbacks of using them.
Need some expert opinions :)
Sass is a popular CSS pre-processor that, among other things, lets you use variables in CSS, for things like your color scheme. You'd compile the CSS when you change it, so no need for the overhead of running a PHP script each time it loads. (Yeah, you could write your own cache system for that in PHP, but no need to redo others' hard work ;D)
$menu-color: #123456;
#menu { color: $menu-color; }
You can use a body class to change the theme:
/* Base style */
h1 { color: grey; }
.spring h1 { color: green; }
.summer h1 { color: yellow; }
.fall h1 { color: orange; }
.winter h1 { color: blue; }
To change the theme, just add the class on the body:
<body class="fall">
<h1>The leaves are falling!</h1>
</body>
Given that this is on a 2-week schedule, firing off a dynamically generated css file is overkill. It would be far easier to serve up a static .css file, which can be generated by PHP. That way you don't have to mess with outputtting cache headers and whatnot - the file will be cached the way any other static file would.
Use cron a similar timed-job tool to rebuild the .css file whenever you need those color changes to occur.
The PHP method, by default, would cause the clients to re-query the server for changes on every hit. That's a waste of bandwidth and cpu time just to change a few values once every 14 days.
I have a relative positioned div inside another div. The inside-div is positioned with percentage (left: 0%; top:13%).
My problem is that in all IE versions the div is displayed some pixels further down than where it is displayed in Chrome, or FF...
Anybody recognize this?
<div class="nav_container" id="nav_container">
<div id="nav_container2" style="position: relative; left: 0%; top: 13%;"></div>
</div>
Also, I am just about to browser adjust my website so some article about most common problems with IE is appreciated.
Thanks
UPDATE:
Here is the style for the primary div.
.nav_container {
background-image: url(../Graphics/menu_lvl1.gif);
height: 101px;
width: 720px;
}
My guess is IE is rendering the padding/margins differently than Chrome/Firefox (which is usually the issue with layout bugs).
You're best off to specify both padding and margin when position matters, otherwise you're leaving it up to the browser defaults (which are all different).
You should also make sure your page isn't being loaded into Quirks Mode by IE. Be absolutely sure that you have the proper DOCTYPE definition at the top of your page to force IE to load into standards mode. W3Schools has a good rundown of where and how to use it:
W3Schools - HTML doctype declaration
And then the W3C has a list of all the valid declarations:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
If none of those take care of it, you can create IE version specific CSS and load them using Conditional Comments. That will allow you to specify different values for top based for IE.
#Camran
Here you go bro I hope this helps you out. http://www.positioniseverything.net/articles/cc-plus.html Everything is fully detailed and easy to follow along. Trust me I was having that same issue and what kills me is everyone I talked to who claimed they were professionals kept stating that it's an impossibility to have perfect positioning, yet here's somebody who came up with a solution.
Make sure IE isn't running in quirks mode. This happens when you have any text before the doctype declaration. If its in quirks mode it behaves hideously for CSS. Well moreso than normal.
Use conditional comments to target IE and change top accordingly.
IMO, that's the ONE thing you need to know to resolve IE issues.
Are you using a css reset? (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) It'll help you make sure all your browsers are starting with the same default padding and margin.
Try a reset stylesheet, and see if that helps. Include it before any other CSS declarations.