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.
Related
I want to create a PHP-CSS approach for my web applications. So I don't need to make any external CSS file, nor internal CSS, neither the inline styles. This approach will work as:
... html code ...
<?php
_c( '
header .nav {
background: yellow;
}
header .nav a {
text-decoration: none;
}
');
?>
... more html code and other php-css chunks ...
The function _c() will keep collecting all php-css chunks from entire application on the go, and finally, write all these chunks in a CSS file, compress or minimize and include using <link .. tag at the end.
This way, I won't need to even see the face of .css file. All my php-css chunks will be available on their related pages. So I won't need to keep a bunch of css files open and edit them.
If I use this approach for a huge application, what could be side effects on usability, performance, memory consumption, speed of app etc?
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.
Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?
My website body has this code
<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
How to put this zoom code inside?
Add zoom: 125%; to body style
body {
color: #536482;
background-color: white;
zoom: 125%;
}
This does not directly answer your question, but is an alternative that I recommend considering.
If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.
For instance, if I want 125% of default size:
body { font-size: 1.25em }
Then, suppose I want a reasonable amount of margin around a header <div>:
#header { margin: 1em }
If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.
You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
I know that it is usually considered bad practice to mix CSS with HTML and that CSS selectors (ids, classes, etc) should generally be used to style elements in external stylesheets. But this can be quite inconvenient when writing a dynamic page in PHP. It is much easier to output the element's style directly using PHP by writing to the element's style attribute. Would this be considered bad practice, even if using classes would make it even more difficult to manage from the developer's end?
For example, I have an element's color style store in a database and this element has a different color depending on the parameters provided in the dynamic PHP page. In this scenario, I could write to the css stylesheet with php some class with the color variable I get from the database
echo '.custom-color {';
echo 'color: ' . $colorFromDatabase . ';';
echo '}';
and then append the class to the element:
<div class="custom-color"></div>
or I could just echo the style directly to the element.
echo '<div style="color:' . $colorFromDatabase . ';" >';
Which is the better way to go?
Writing the style inline is usually considered bad, whether it's with PHP or by hand. It is simpler but harder to maintain and you don't get to cache your CSS content.
If you want the CSS to be more dynamic , you should experiment with http://sass-lang.com/
Note that custom-color is not a very good class name, it should be something like main-header, blog-post, last-modified since they tell you about the content not about its style.
SASS would let you define a variable for a color and reuse that within your CSS files, you could then just change the variable names and regenerate your CSS files
The advantage of what you're doing is that you don't have to learn new things. PHP will get it done. You need to write something into your build if you want to use SASS with content from a database and come up with a scheme for which CSS to use.
Note that there are a few cases where it would make sense to write the attribute directly, but it's hard to explain when exactly. It's usually when it's only going to be used once.
Example from their page
// Variable Definitions
$page-width: 800px;
$sidebar-width: 200px;
$primary-color: #eeeeee;
// Global Attributes
body {
font: {
family: sans-serif;
size: 30em;
weight: bold;
}
}
// Scoped Styles
#contents {
width: $page-width;
#sidebar {
float: right;
width: $sidebar-width;
}
#main {
width: $page-width - $sidebar-width;
background: $primary-color;
h2 { color: blue; }
}
}
#footer {
height: 200px;
}
Why not both? Separated CSS from HTML and PHP in your CSS file?
You might also check out CSS-preprocessors. LESS is the most common one, but there's also SASS, Stylus and whatnot.
For the best semantic use, I would use this:
div.colored {
color: attr(data-color)
}
Then use PHP like:
<div class="colored" data-color="<?= $color ?>"></div>
And you could always back this up with some simple Javascript.
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.