bluApple 2.5 API & Documentation (inComplete)
Posted: 05/27/2010 at 1:16 PM by Marco Williams
CSS (Cascading Style Sheets) are an intricate part of bluApple 2.0 Structure. This section is about tweaking your CSS by overriding certain styles in the default.css style sheet to customize your websites look and feel for individual browsers. As I've specified in the Apply your Design section, unless your a CSS Super Guru and can code perfect HTML and CSS structure you're most likely going to have cross browser issues when creating your website. To solve this issue, bluApple has a what I htink is a unique system for overriding styles by loading specific CSS files based on both Browser and Browser Version if the file exists.
If you look in your themes/[your website]/css folder of your bluApple site. You will see some extra files with a very specific naming convention. The general rule here is that if you place one of these files in the css folder it will load the file after all other style sheets have been loaded for a specific browser. Let's take a look at some fo the files and the naming convention.
File from /themes/default/css/folder
First off we will notice that each file starts with the word default. If this is not a specified it will not load the file.
Secondly, we put the browser name hyphenated off of the default keyword.
For example the second file from the top.
Thirdly if you would like to tailor for a specific version of a browser you can specify the browser version by hyphenating ver and the browser version. The real magic is inside each of the files.
Now this just loads the styles of these files based on the browser version. The real magic is inside each of the files.
Inside the file
Let's put together a real life ezample to clear up how this all owrks. Our scenario is this. We have a div element with some text. Everyone love the Hello World examples so I am just going to follow suite here.
In our default.css file we have the following style assigned to our div element.
All this does is set the default color for the text in this element as black.
In our default-firefox.css file we have the following style assigned to our div element.
This will override the color of the element and make the color blue only when the browser is firefox.
In our default-firefox-ver2.css fuke we gave the following style assigned to our div element.
This will override both of the above styles and make the color of the text red only when the browser is firefox and the version of the browser is firefox 2.
If you look in your themes/[your website]/css folder of your bluApple site. You will see some extra files with a very specific naming convention. The general rule here is that if you place one of these files in the css folder it will load the file after all other style sheets have been loaded for a specific browser. Let's take a look at some fo the files and the naming convention.
File from /themes/default/css/folder
default-firefox-ver2.css default-firefox.css default-MSIE.css default-Opera.css default.css
First off we will notice that each file starts with the word default. If this is not a specified it will not load the file.
Secondly, we put the browser name hyphenated off of the default keyword.
For example the second file from the top.
default-firefox.css
Thirdly if you would like to tailor for a specific version of a browser you can specify the browser version by hyphenating ver and the browser version. The real magic is inside each of the files.
default-firefox-ver2.css
Now this just loads the styles of these files based on the browser version. The real magic is inside each of the files.
Inside the file
Let's put together a real life ezample to clear up how this all owrks. Our scenario is this. We have a div element with some text. Everyone love the Hello World examples so I am just going to follow suite here.
Hello World
In our default.css file we have the following style assigned to our div element.
DIV#myDiv {
color:#000000;
}
All this does is set the default color for the text in this element as black.
In our default-firefox.css file we have the following style assigned to our div element.
DIV#myDiv {
color:#0000ff;
}
This will override the color of the element and make the color blue only when the browser is firefox.
In our default-firefox-ver2.css fuke we gave the following style assigned to our div element.
DIV#myDiv {
color:#ff0000;
}
This will override both of the above styles and make the color of the text red only when the browser is firefox and the version of the browser is firefox 2.
Donations:
Intro to bluApple:
Modules:
New Developments:
Technologies:
The documentation for bluApple is currently being worked on.
Please check back often to see what is new.
Marco G. Williams
Lead Developer & CEO
Marco G. Williams
Lead Developer & CEO
