Certain DIVs within a website can usually be constant...
I.E. The footer of a webpage generally doesn't change and should be standard across all pages.
Within a websites CSS, you'll have things like;
.FooterDIV {
Background: #FFFFFF;
Color: #000000;
}
I was wondering what the best way is to specify the standard text within a DIV, is this possible in CSS alone? PHP perhaps?
After some 'Googling' I have found no clear answer - it's difficult to know how to word this.
A simple approach is to put those "global" elements into a seperate php file each, which you include in all of your pages. For example:
footer.php
<div>Copyright 2012, Acme Corp.</div>
Then simply add the following line wherever you want the footer to appear
<?php include('footer.php'); ?>
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation semantics (the look and formatting) of a
document written in a markup language.
i.e. you should CSS to style your data. You shouldn't be using it to specify what your data is. Surely there's a better way of approaching your problem? Like splitting up reoccurring elements/divs on your site into include files?
That is usually done server side, in PHP for your case, you create a function that writes your html footer, you then call this function for any of your php pages.
Also if you are using a template engine, like when you are using a MVC PHP framework, then the template engine will usually let you create a template file with your footer content, and you will include that same file on all your different page templates.
What you are describing can't be done in css. If you're using php, I would seperate the footer out into at seperate file, e.g. 'footer.php' and then include that at the bottom of each of your pages.
Related
I need to add styles to my style tag in my head section. How can i add to that style tag from the view.
You'd be better off from an MVC point of view by putting these style elements in to their own stylesheet, and then inserting the sheet in the way mentioned above.
However if you must use internal CSS, this should work:
$this->addScript('extraCSS','<style type="text/css>".foo{color:red;}</style>');
extraCSS I believe is just an internal name given to the content that gets added to the $scripts_for_layout buffer.
This will appear below any JS inclusions, which can be a problem at times.
See all about adding css files using the HTML Helper here: http://book.cakephp.org/view/1437/css
Make sure you have $scripts_for_layout in the head of your layout to have cake put scripts there automatically (see the third example).
EDIT:
For style tags, see here: http://book.cakephp.org/view/1440/style
Otherwise, CakePHP uses simple PHP as the templating language in the view - so just write it using that.
Some example code and further explanation of what you'd like to do would also be helpful.
I want to include a specific css file that should be applied to the homepage, and 6-7 other pages throughout my site.
I know I can do this via PHP, getting the URL, finding out what page, linking the css...etc, but I was wondering if there was a slick way (or any better way) using CakePHP to include the correct css file(s).
I realize I can link the CSS file from the specific views, but - then they wouldn't be in the <head>. Is there a way to link from a view and have it show up in the head?
I hope my questions make sense, and greatly appreciate any help.
I realize I can link the CSS file from
the specific views, but - then they
wouldn't be in the <head>. Is there a
way to link from a view and have it
show up in the head?
Yes, they would be in the head. See the HTML Helper documentation:
If key 'inline' is set to false in
$options parameter, the link tags are
added to the $scripts_for_layout
variable which you can print inside
the head tag of the document.
So, this snippet in your view...
$this->Html->css('my-css', null, array('inline' => false));
...will add the proper <link> element to your <head>.
Check this little tutorial out:
http://nuts-and-bolts-of-cakephp.com/2008/05/05/css-files-and-scripts_for_layout/
Basically you can use this standard view attribute $scripts_for_layout to inject CSS files based on the view. Hope this is what you're looking for. There's a few other crazy options I thought of, involving extension parsing, but it would probably be more cumbersome than just manually linking the stylesheets. I think this link describes the best solution.
You can also have different layouts, and include css in them:
http://book.cakephp.org/view/1080/Layouts#!/view/1080/Layouts
This comes handy if all the views of a model have the same css, or script.
It is not the answer for your question, but...
you can program your own injection for the layout file. The problem with $scripts_for_layout is that js and css codes are injected in the header. If you write your own implementation you can put the $scripts_for_layout var (for the js) at the end of the layout file. The cue is: separation...
I am assigned a task to revise a website and at present, I am working on index.html page. the previous coder has mixed a lot of JavaScript and CSS code in between and it is becoming difficult to read.
I want to know whether it is necessary to include <script> tags and CSS code in between? What about PHP code? Where each must reside?
Edited:
If multiple JavaScript and CSS files are to be referenced, how to include in a single <script> or <link> tag?
Keep your JavaScript inside a separate file, keep your CSS inside a separate file and have them both referenced from within your HTML. The order of these referenced files relative to the HTML does not matter. As for the PHP, I wouldn't worry too much about it being mixed in with the HTML (just keep your functions, classes and other scripts in separate files and include them with PHP in the header).
If is the same CSS on each page, having an external file that caches help to save bandwidth. If there are different rules intermixed with the HTML for different element types you may have some conflicts, but if you rewrite it, it will end up being a lot cleaner and easier to maintain later.
I like to keep a file structure like so:
index.php
/css
main.css
othercssfiles.css
/javascript
main.js
otherjsfiles.js
/template
header.php
footer.php
/scripts
functions.php
otherscripts.php
Then in my header file, I would place HTML code referencing the files in the CSS and JavaScript directories. And in the root directory my index.php file would include(); the header at the top and the footer at the bottom.
otherjsfiles.js and othercssfiles.css can be used in cases where a single page may have a specific requirement, requiring a lot of CSS and JavaScript that most other pages don't need. It means other pages do not need to fetch unnecessary data and it keeps page specific code separate from the entire site's code.
I have found this an easy way to keep track of various aspects of the code that makes up an HTML page, but naturally, you will find ways to organize it that makes sense to you.
Edited:
If multiple JavaScript and CSS files
are to be referenced, how to include
in a single or tag?
It would be better to combine them into a single file to conserve HTTP requests (which take time). Then you would just include those CSS and JavaScript files like normal.
<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
Additionally, it seems like you could use the services of a CSS beautifier for readability, a JavaScript beautifier for readability and a JavaScript minifier for when you are done reading it (keep the readable version) and want to save bandwidth. These tools are especially helpful when you are working on maintaining a website you did not create.
Rarely is there a valid reason for CSS be mixed into the HTML - a separate file is generally best.
With JavaScript: there may or may not be a good reason for it being mixed into the code. E.g. if a piece of script is dependant on running after one element of HTML is loaded and before another. This isn't a particularly good coding practice, but if you're updating an existing site you may be stuck with it.
In the end the only way to really tell is to pull it out and make sure the page still works.
As Sam said, keep JavaScript and CSS external, and reference items in the JavaScript by id rather than onclick= etc. Follow Yahoo, and put the CSS in the <head> and the JavaScript before the closing <body> tag.
For multiple JavaScript or CSS, use multiple <script> or <link> tags.
As for PHP, it's good practice to keep as much of the functionality in a separate include file, and just call functions etc. in the main HTML. This will aid maintainability greatly. Aim for simple loops, if/elses, and function calls, and nothing else.
If multiple javascript and CSS files
are to be referenced, how to include
in a single or tag?
You either reference each file using multiple tags or use a minifier like YUI compressor to create a single CSS and JS file from the originals.
The order of CSS styles is relevant, but only relative to other CSS styles. So, start by moving all CSS styling together (in the head section) in the same order as originally. That will make it somewhat less messy while defenitely not changing how the page works.
Then you can start looking at whether you can rearrange scripts and PHP code. What they output to the page directly is relevant, otherwise they can easily be rearranged.
PHP coding allows you to have HTML/CSS interspersed with PHP code by using server tags like <? -php code here -?>.
This is normal - it is very flexible and easy-to-get-started.
Your JavaScript should ideally be placed into a separate JS file and using the <script> HTML tag to reference it. See the docs.
Your CSS should ideally be placed into a separate CSS file and use a <style> HTML tag to reference it. Again, see the docs.
While writing code in a file that would comprise of PHP, HTML, CSS & JavaScript, in what order each must appear? What are the best practices for separating the presentation and the logic?
Sometimes external .js and other files are using in the link tag. Where these link tags must appear?
This doesn't answer the question directly but the article that Rasmus Lerdorf (creator of PHP) wrote has some nice examples to follow.
Clean and simple design. HTML should look like HTML. Keep the PHP code in the views extremely simple: function calls, simple loops and variable substitutions should be all you need
http://toys.lerdorf.com/archives/38-The-no-framework-PHP-MVC-framework.html
most if not all javascript should be external files linked from either the header (between the tags) or all the way at the bottom near the closing tag depending on how youre enhancing the page.
css should never be inline in my opinion. start with external css files linked from the header, and if you must go to the file level. ie.
<head>
<style type="text/css">
/* CSS CODE HERE */
</style>
</head>
as far as php best practices, dont do a database call in your html templates. keep the templates simple php. if's for's to echo out your database results.
Your tags should (must?) go in the head of your page.
There are a handful of exceptions, but most of the time your CSS will be in an external .css file that you'll link like the .js files you mention. The order you need to load your external scripts may depend on their content. For example, if you're using jQuery plugins, you'll need to load the jQuery library before the plugin file.
PHP and HTML will often be intertwined within a document. There are discussions on SO and elsewhere over how HTML should be displayed within PHP (e.g.
?> <!--html goes here--> <?php
or
echo '<p>This is my html</p>';
..but I've never seen a definitive answer to either method. Use whichever makes you file legible.
All of this must be in different files except of very small portions (for example js in html).
The best place for link tag is in head section of html.
I have a web application developed using PHP. I want my users to select themes for their pages throughout the application.
Where should I start before using PHP themes?
What should I know about Themes in a PHP application?
Edit:
My question about themes is only about changing the color of the layout, not the images.
Suppose My ADMIN user will have white and Orange, but my staff user will have white and green...
How it can be done in PHP with CodeIgniter?
There are lots of directions you can go with this.
1) "CSS ZEN"
This is where the markup remains unchanged, but you totally change the design just by using CSS and images. Demonstrated very well on http://www.csszengarden.com/
2) MVC Stylee
This is where you create a model that represents the page data and then pass it to a view, which contains some inline echo statements. The idea is that you could send the same model to a totally different view so it could look entirely different, HTML and all. Cake PHP is a good start for this: http://cakephp.org/
Example:
<div class="content">
<? echo $Page->Content ?>
</div>
3) Micro-Markup
With this method, you add your own "special tags" to an HTML page. You then read in your plain HTML page and replace the special tags with the information you want to display. This is good if you want your templates to be recognisable to HTML guys that don't know PHP and might break the PHP code in the MVC app.
Example:
<div class="content">
<#Content#>
</div>
Out of all of these, MVC is a very structured way of achieving what you want - however, I listed the other options as they cater for specific scenarios that might be relevant to you.
I have implemented the concept in all three of these, in situations that were appropriate for each.
Regarding The Edit In The Question
I imagine you'll have "something" that represents your user - so it is as easy as:
(In the event of just wanting to override a few settings...)
<link href="style.css" type="text/css" rel="stylesheet">
<?php if ($User->Type === USER_ADMIN) { ?>
<link href="admin.css" type="text/css" rel="stylesheet">
<?php } ?>
You can adjust this example in the following ways:
Use a switch statement if there will be many user types
If the replacement is total, rather than just a few overrides, you may want to completely swap the stylesheet.
You would usually set up template files that contain the HTML and CSS, and build in the PHP generated values at runtime.
The best approach to this is to have the theme reside in a separate directory, containing no code, just template variables like {mainmenu}, {backbutton}, {content} ... you get my drift. Those are then filled by your PHP script, possibly with the help of a template engine like Smarty (No need to re-invent the wheel here).
There is also the approach of having PHP markup directly in the template file(s) like echo $xyz; while this is a perfectly valid practice I use myself often, I recommend using a template engine over using PHP markup in the code if you want a solid, future-proof templating system because:
First, there is less that a designer can break when working on the HTML.
Second, having PHP markup in the code is a temptation to program PHP logic inside the template (loops, conditions) instead of properly preparing them in the PHP code at the point where the template variables are created. That is terrible for maintenance and the further use of your templates, because you have to replicate that PHP soup into every new template again. After all, you want to have a template engine so others can create new looks for your product, without having to know how to program it.
Third, with the templating engine based approach you have the possibility to add caching where necessary without any additional work. Not possible with the scripting approach. Yes, in a web application you won't be able to cache that much, but with a lot of data, there will be instances where it will help the user experience.
Fourth and least important, it makes your template less easy to export to other applications, and import templates from other applications.
The CSS Zen approach mentioned by Sohnee is great for websites, but is going to be too limited for a web application that uses complex input elements, JS based menus, and the like. It is too often that those elements need to be changed and customized in the markup.
If you have a look at my CodeIgniter Template library it briefly explains how you can set up themes and layouts (the equivalent of header & footer).
If you set up global code such as a Hook or a MY_Controller then you can dynamically set your theme based on the logged in user, the user type, etc.
Eg:
if($user->role == 'admin')
{
$this->template->set_theme('admin_skin');
}
else
{
$this->template->set_theme($user->theme);
}
That is just a VERY basic example of the sort of thing you could use this Template library for.
CMS Solutions
Magento and Wordpress package all theme related files into their own seperate directories. These contain the serverside code, stylesheets, images and javaScript for the theme. The user in effect chooses a directory to use which affects how the page is layed out and styled.
An easier approach
A much easier way to get started would be to accept that the actual content, e.g. HTML of a page would stay the same, but let the user choose from various CSS style sheets.
When choosing a style sheet the system could use JavaScript to load it in dynamically so that the user can preview the look they are choosing.
If you have really good semantic HTML it will be enough to change the CSS files. Unless the design changes are really heavy. Then it would make sense to provide PHP templates that are build with some sort of modules: variables which contain certain HTML structure like navigation or sidebar, etc.
For themes you do not need PHP. Just define your themes in CSS (the best way is one file for each theme) and use a simple JavaScript chooser like at this site: http://www.fotokluburan.cz/switchcss.js.