Theme plugin

[eluser]Nevio[/eluser]
Okay, here we go. My first publicly released CI component. Apologies for grammar mistakes. My English isn't fluent enough.

Name: Theme
Type: Plugin
Version: 1.0 pre-release
Php v.: PHP5 ( OOP )


Theme is a plugin designed to be used for dynamically loaded css templates with ability to load extra themes based on current browser and its version. Lets write down features.

1.) Loading sub themes
2.) Autoloading browser additional themes. For example "style-default.css", "style-ie6.css", etc... ( Case you need to bugfix as you always need with IE )
3.) getThemeElement('imagename.ext') method
4.) getIcon('iconname.ext') method


Files && Folder

- themes/
- themes/example/
- themes/example/style-default.css
- themes/example/style-ie6.css
- themes/example/style-ie7.css
- themes/example/style-ie8.css
- themes/example/style-ff2.css
- themes/example/style-mozilla.css // Safari or Chrome
- themes/example/style-opera.css
- themes/example/elements/ ( Folder where you will place design elements )
- themes/example/icons/
- system/application/config/theme.php
- system/application/libraries/Theme.php


Notice

If you want to rename or make another theme, just copy complete example folder,
rename folder name and edit css files, elements or/and icons.


Installation

- download themes plugin
- Replace your system folder with provided one
- Copy and paste themes where system folder is.
- setup CodeIgniter base_url inside of config file
- load library inside of your controller

Code:

$this->load->helper ('url');
$this->load->library('user_agent');
$this->load->library("theme");

- execute loading method by setting next code inside of HTML HEAD tag.

Code:

<?php echo $this->theme->load( "example", TRUE ) ?>

Now, that's all I guess lol. You should see @import css rule when you go View Page Source inside of your browser.


Some additional notes...

- See configuration comments for more info about some feature
- See method comments for more info about class methods.


Method explanations

There are 3 public and 5 private methods. I will explain here public methods.


LOAD METHOD

Code:

final public function load( $themename, $autoload=FALSE, Array $only = NULL )

- $themename - this is a base theme name. Built in theme got name example. How I explained above, if you rename theme, set that new theme name here.

- $autoload - is optional argument. If you set it to TRUE, it will load default theme and current browser+version theme. In case you are previewing project with IE 6,
you will see 2 @imports. 1st - style-default.css, 2nd - style-ie6.css

- $only - is optional argument. IT MUST BE ARRAY. This argument is used if you would like to autoload additional css file but ONLY for let me say, IE6 or IE7.

Options must be browser FULL NAME. For example.

Code:

$this->theme->load( "example", TRUE, array ( "Internet Explorer 6", "Internet Explorer 7" ) );

List of supported browsers:
- Firefox 2
- Internet Explorer 6
- Internet Explorer 7
- Internet Explorer 8
- Mozilla ( Chrome, Safari )
- Opera

DEFAULT .css theme is designed to be for Firefox 3 because that's the most common one for developers. As well, you must enter FULLY QUALIFIED browser name. Version you don't need to specify for Mozilla or Opera, for IE it is A MUST. It can be lowercase or uppercase.


GETICON METHOD

Code:

final public function getIcon( $iconname )

Current method will return string ( URL ) as {base_url}/themes/{themename}/icons/{icon_name}.{ext}

Method execution:

Code:

$this->theme->getIcon('iconname.png');

Example:

Code:

<img >theme->getIcon('iconname.png') ?&gt;" alt="Lore ipsum dolor..." />

GETTHEMEELEMENT METHOD

Code:

final public function getThemeElement( $imagename )

Current method will return string ( URL ) as {base_url}/themes/{themename}/elements/{image_name}.{ext}

Method execution:

Code:

$this->theme->getThemeElement('element.png');

Example:

Code:

<img >theme->getIcon('element.png') ?&gt;" alt="Lore ipsum dolor..." />

Admins, there is a problem as you can see above with showing src="<?= $this->.

ADDED: Inside of style-default you can find css reseter from Eric Meyer. That thing saved my life so many times lol.

Conclusion

This is just pre-release. I will update it in later time. I hope this helps!

[eluser]Nevio[/eluser]
Please, If you don't know... Try to escape modifying code bellow inside of theme class

Code:

CONST MOZILLA_BROWSER_NAME = '6d6f7a696c6c61';
CONST OPERA_BROWSER_NAME   = '6f70657261';

Code:

private $_browserarray = array (
        "696e7465726e6574206578706c6f7265722036",  // Internet Explorer 6
        "696e7465726e6574206578706c6f7265722037",  // Internet Explorer 7
        "696e7465726e6574206578706c6f7265722038",  // Internet Explorer 8
        "6d6f7a696c6c61",                          // Mozilla ( Safari - Chrome )
        "66697265666f782032",                      // Firefox 2
        "6f70657261"                               // Opera
    );

Code:

private $_cssfilenames = array(
        "696536",         // ie6
        "696537",         // ie7
        "696538",         // ie8
        "6d6f7a696c6c61", // mozilla
        "666632",         // ff2
        "6f70657261",     // opera
    );

This is a hexadecimal representation of browsers and their versions + css filenames.

NEXT RELEASE :: TODO

- adding supports for media types.
- adding support for user specified themes ( that user can change theme ).
- adding support for mobile.

FIXED

- I forgot to add opera loading block. Now it's there.

[eluser]Vicente Russo[/eluser]
Nice, maybe in the next version you could insert mobile browsers...

[eluser]Nevio[/eluser]
Sure. For start I can add support for this list

- obigo
- netfront
- openwave
- mobilexplorer
- operamini or opera mini

And I will add mobile as one more option just in case and few pc browser supports like Konqueror, Firebird and Netscape.

Not sure what else to add. If anyone got idea, write it down.

[eluser]Vicente Russo[/eluser]
Or you can use ismobile.

[eluser]Nevio[/eluser]
Yea. I'll use that method to find out if its mobile and its own browser.

Additional

- obigo
- netfront
- openwave
- mobilexplorer
- operamini or opera mini

files will be added due to as PC got Micro$oft Internet Explorer Crap™ ( lol ) mobiles got it 100% as well.