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...
Related
The issue is on Symfony 5, but I guess it can be a general issue for the communication between php and css.
First, let me say that I'm not sure this kind of thing is possible, probably but I don't know for sure, so let me know if there is some libraries that you might know to handle this kind of things
Let's say I have a simple test.html page with this code.
<div class="test">Test text</div>
I simplified but of course you also have an import from a test.css
From my Symfony Controller when I will hit my /test url, I will redirect to this test.html page with a variable marginleftthat could contain a value like 100px for example purpose.
So the question is, do I have a way to dynamically load my css using the php variable ?
To be more specific, I'm not speaking about using some javascript workaround to change the css class content when I load the page. What I am looking for is directly to load my test.css using php variables.
In other words, I would like to do something like this :
.test{
margin-left : {{marginleft}}
}
My main goal here is to provide a almost full css customization of elements from a page for my users that's why I don't want to just change defaults elements with javascript.
Thanks for your assistance.
The scenario:
A homepage that is generated with PHP and a template engine.
The page is being redesigned.
The new design is based on jQuery UI.
The current CMS uses multiple templates: a page template, an article details template, a comments template etc.
The problem:
Some templates (like the article details template) generate html fragments that should use jQuery UI elements like tabs. Currently the data source of the page template does not contain any information which elements should be turned into jQuery UI elements in the main jQuery call in the documents head.
Possible solution
Add a CSS class like "jqTabs" to the html markup of the sub-templates and use the selector .jqTabs in the main jQuery script.
Question
Is this a bad idea?
BTW: "Use a different CMS" is not a valid answer, because this is not an option right now (deadline, budget,... you name it -.- ).
Not a bad idea at all.
That is one of the primary uses of classes.
A class (like and ID) can be used as both a way to style an element and / or a hook for scripting.
In this case, it might be the best possible solution, as it allows for what seems to be minimal markup changes for a wider redesign.
And it is easily reversible.
I believe that using CSS classes as hooks for JavaScript can indeed be a bad practice. The reason I say this is because this approach intermingles your CSS and JavaScript and can often lead to unnecessary confusion.
Let me explain: Right now I am working on adding new templates to an existing system which uses dynamic user controlled admin settings to control CSS properties (page width, font sizes, colors, etc). These settings can also affect JS properties (slideshow options, delay between slides, etc.).
The problem is that since so many CSS classes were used as JavaScript hooks, I am having a terribly hard time determining which classes are used for styles and which ones are used as JS hooks, and which ones are used for both! As a result, when doing a new template, it would be very difficult to start from scratch with new markup as I would be leaving out various important classes for both CSS and JS functionality.
The task would be much easier if CSS classes were ONLY used for styling, and other JS hooks were only used for JS. I envision this being accomplished with HTML5 data attributes, which would look something like this:
my link
By using the HTML5 data attributes for JavaScript hooks and the class attribute for CSS styling, we can be sure that all classes are ONLY related to CSS, and anything JavaScript related simply gets its custom attribute.
Another option I have used is prefixing any css class with js- that is ever referenced by the JavaScript. That way you would know which classes you could remove safely for styling and which ones had to remain for existing functionality.
<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
My link
</a>
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 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.