[BlueOnyx:18516] Re: Theme creation in 5209R

[Michael Stauber]

Hi Ernie,

> How do I go about creating a new theme for 5209R ?
> 
> There is only the Adminica theme when shipped now, it's a bit hard
> to work out where the pieces have to go, and of cource the Sausalito
> Developer,s Guide is of little use in that respect since the structural
> changes to chorize/GodeIgniter etc.

The easiest way to customize the new GUI is via CSS. Basically the whole
Adminica theme is styleable via CSS and the GUI rendered HTML code is
flexible enough that a little CSS wizardry gives it a whole different look.

To prevent BlueOnyx update from eliminating any CSS changes you make, we
added a separate CSS file that can be used for customizations. This file
is empty and will never be replaced by any BlueOnyx updates:

/usr/sausalito/ui/web/.adm/styles/customer/customer.css

> I see a styles folder in which the adminica folder resides, but
> there is also a themes folder next to the adminica folder, and
> that confuses me.

You mean this one?

/usr/sausalito/ui/web/.adm/styles/themes/

Yeah. It works like this: When you (or a user) goes to "Personal
Profile" you see the "BlueOnyx 520XR: Style" element at the bottom.
Which allows you to switch to different themes and layouts. Such as
"Fluid" or "Fixed" (concerns the width of the page), where menus are
located and how they behave and you can also change colors and
background images.

What this actually does is that a click on different layout styles will
set a cookie. And based on what cookie is set different CSS files will
be loaded to "style" the GUI.

These CSS files associated with the different styles are located in this
directory:

/usr/sausalito/ui/web/.adm/styles/themes/

Ideally you should NOT change them. Because your changes *will* get
overwritten eventually when base-alpine is updated. Instead take these
CSS files as example and put your own changes and modifications of these
styles into the one CSS file that the GUI will never modify:

/usr/sausalito/ui/web/.adm/styles/customer/customer.css

Just one simple example: You want to change the "(*) BlueOnyx" logo that
shows in the GUI and want to replace it with your own graphic.

In that case you would edit
/usr/sausalito/ui/web/.adm/styles/customer/customer.css to add something
like this:

a.logo, a#login_logo {
    background: transparent url("/.adm/images/mine/images/logo.png")
no-repeat
    }

That would then override the CSS that the BlueOnyx GUI has set up for
displaying the regular image. Provided your supplemental image resides
at the path indicated in the CSS.

When you look at the HTML source code of a GUI page you can see what the
CSS files are that are actually used:

The first one contains some elements that all the different CSS styles
share:

	<link rel="stylesheet" type="text/css"
href="/.adm/styles/adminica/combined-common-mini.css">

Next comes the code that handles the style switching. Here the default
is shown, but if a user configures a different style via his "Personal
Profiles" settings, then the rendered code show next will differ slightly:

<!-- Start: Style Switcher -->
	<link rel="stylesheet" type="text/css"
href="/.adm/styles/themes/layout_switcher.php?default=layout_fixed.css" >
	<link rel="stylesheet" type="text/css"
href="/.adm/styles/themes/nav_switcher.php?default=switcher.css" >
	<link rel="stylesheet" type="text/css"
href="/.adm/styles/themes/skin_switcher.php?default=switcher.css" >
	<link rel="stylesheet" type="text/css"
href="/.adm/styles/themes/theme_switcher.php?default=theme_blue.css" >
	<link rel="stylesheet" type="text/css"
href="/.adm/styles/themes/bg_switcher.php?default=bg_silver.css" >
<!-- End: Style Switcher -->	

The next CSS deals with colors:

	<link rel="stylesheet" href="/.adm/styles/adminica/colours.css"> <!--
overrides the default colour scheme -->

And as last CSS the one for your own modifications is loaded. As it is
placed last any changes in there would override the GUI supplied CSS styles:

<!-- Start: Stylesheet for custom modifications by server owner -->
    <link rel="stylesheet" href="/.adm/styles/customer/customer.css" >
<!-- Stop: Stylesheet for custom modifications by server owner -->

That's it in a nutshell.

-- 
With best regards

Michael Stauber