InduSlack Lxdm Theme
====================
:revnumber: 14.2
:revdate: Aug 16, 2017
:encoding: utf-8
:lang: fr
:author: Sébastien Ballet
:email: slacker6896@gmail.com
:toc:
:toclevels: 4
:doctype: book

// The best way to build html version of this asciidoc source
// file is to run asciidoc as below :
//
// $ asciidoc -a max-width=75% --out-file=./README.html ./README.txt
//


1. Presentation
---------------
*InduSlack* is a Gtk+2/Gtk+3 Lxdm theme designed for link:http://www.slackware.com/[Slackware], 
and strongly based on Lxdm Industrial theme.

*InduSlack* theme has four main panels vertically arranged : 
  
* *Header Panel*
* *Image Panel*
* *Input Panel*
* *Bottom Panel*

2. The panels
-------------

a. The Header Panel
~~~~~~~~~~~~~~~~~~~
The *Header Panel* is at the top of screen and contains 2 
components: 

* [underline]#*logo*#, which is aligned on the left.
* [underline]#*time*# which is aligned on the right.

The component [underline]#*logo*# is dedicated to display the 
Slackware's logo pointed by the symlink +*logo.pixmap+*. 

By default, this symlink points 
link:pixmaps/logo/Slackware-Logo-nobg-linux-white.png[pixmaps/logo/Slackware-Logo-nobg-linux-white.png].

The logo can be 'virtually' disabled by setting the symlink
+*logo.pixmap*+ to +pixmaps/logo/empty.png+.

Note that directory link:pixmaps/logo[pixmaps/logo] contains others
Slackware logos.

b. The Image Panel
~~~~~~~~~~~~~~~~~~
The *Image Panel* is just below the *Header Panel*. It is dedicated 
to display the [underline]#*login image*# pointed by the symlink 
+*login.pixmap*+. 

By default, this symlink points to
link:pixmaps/login/login-legacy.png[pixmaps/login/login-legacy.png], 
which is the same as +login.png+ from Industrial lxdm theme but 
without any (transparent) border.

The *login image* can be can be 'virtually' disabled by setting the
symlink +*login.pixmap*+ to +pixmaps/login/empty.png+.

Note that link:pixmaps/login[pixmaps/login] contains others
login images.

b. The Input Panel
~~~~~~~~~~~~~~~~~~

The *Input Panel* is just below the *Image Panel*. It contains 
the components to enter/select the username and password.

c. The Bottom Panel
~~~~~~~~~~~~~~~~~~~

The *Bottom Panel* is just below the *Input Panel*. It contains 
the components to select the session, the language, the keyboard
layout, and also, to shutdown/reboot the computer.

3.Styles
--------

a. Gtk+2
~~~~~~~~
*InduSlack* comes with the 2 Gtk+2 styles described below.

****
[underline]#*Attention*#, these styles require Lxdm Gtk+2 version.
****

  
* [underline]#*gtkrc.light*#
+
Defines light foreground colors that better suit with dark
background.
      
* [underline]#*gtkrc.dark*#
+
Defines dark foreground colors that better suit with light
background.
     
The *InduSlack* Gtk+2 style in use is defined by the symlink 
+*gtkrc*+, which, by default, points the style *gtkrc.light*. To 
select *gtkrc.dark* instead, simply run the command :

 ::
+
[source,bash]
----
$ ln -sf gtkrc.dark gtkrc
----
    
b. GTK+3
~~~~~~~~
*InduSlack* comes with the 4 Gtk+3 styles described below. 

****
[underline]#*Attention*#, these styles require Lxdm Gtk+3 version.
****
  
* [underline]#*gtk.css.light*#
+
Defines light foreground colors that better suit with dark 
background.

* [underline]#*gtk.css.dark*#
+
Defines dark foreground colors that better suit with light 
background.
      
* [underline]#*gtk.css.decorated-light*#
+
Defines light decorations with dark foreground that better 
suit with dark background.
     
* [underline]#*gtk.css.decorated-dark*#
+
Defines dark decorations with light foreground that better 
suit with light background.
      
Note that when one of the decorated styles above is used :

* The *Header Panel* is filled with the image/pattern pointed by 
symlink +*header_panel.pixmap*+. 
+
By default, this symlink points 
link:pixmaps/patterns/slackware-website-bg.png[pixmaps/patterns/slackware-website-bg.png] 
which is a transparent version of link:http://www.slackware.com[slackware.com] 
website background pattern.
         
* The *Input Panel* is filled with the image/pattern pointed by
symlink *+input_panel.pixmap+*. 
+
By default, this symlink points *+pixmaps/patterns/empty.png+*.


The *InduSlack* Gtk+3 style in use is defined by the symlink 
+*gtk.css*+, which, by default, points the style 
*+gtkrc.css.decorated-light+*. To 
select *gtk.css.light* instead, simply run the command :

 ::
+
[source,bash]
----    
$ ln -sf gtk.css.light gtk.css
----

4. Customization
----------------

a. How to change the position of login image ?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The position of the 'login image' is controlled 
by the properties 'xalign' and 'yalign' of component
'image1' in files +greeter.ui+ (Gtk+2) 
and +greeter-gtk3.ui+ (Gtk+3) :

[options="header",width="75%",align="center"]
|====================================================================
^| xalign ^| login image 
| *0.0*    | 'on the left.'
| *0.5*    | 'X centered.'
| *1.0*    | 'on the right.'
|====================================================================
            

[options="header",width="75%",align="center"]
|====================================================================
^| yalign ^| login image 
| *0.0*    | 'On the top, below the *Header Panel*.'
| *0.5*    | 'Y centered, between the *Header Panel* and *Input Panel*.'
| *1.0*    | 'On the bottom, above *Input Panel*'
|====================================================================

For instance, to place the 'login image' so that it is 
left justified on X axis and centered on Y axis in the
*Image Panel*, open the file +greeter.ui+ (Gtk+2) or 
+greeter-gtk3.ui+ (Gtk+3), and, search the section below :

 ::
+
[source,xml]
----
<object class="GtkImage" id="image1">
  <property name="visible">True</property>
  <property name="pixbuf">login.pixmap</property>
  <property name="xalign">0.4</property>
  <property name="yalign">1.0</property>
----

then, modify it as below :

 ::
+
[source,xml]
----
<object class="GtkImage" id="image1">
  <property name="visible">True</property>
  <property name="pixbuf">login.pixmap</property>
  <property name="xalign">0.0</property>
  <property name="yalign">0.5</property>
----


b. How to change the position of input area ?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The position of the  'input area' is controlled 
by the properties 'xalign' and 'yalign' of component
'alignment2' in files +greeter.ui+ (Gtk+2) and 
+greeter-gtk3.ui+ (Gtk+3) :

[options="header",width="75%",align="center"]
|====================================================================
^| xalign ^| input area
| *0.0*      | 'On the left.'
| *0.5*      | 'X centered.'
| *1.0*      | 'On the right.'
|====================================================================
            

[options="header",width="75%",align="center"]
|====================================================================
^| yalign ^| input area 
| *0.0*      | 'On the top, below the *Image Panel*.'
| *0.5*      | 'Y centered, between the *Image Panel* and *Bottom Panel*.'
| *1.0*      | 'On the bottom, above *Bottom Panel*'
|====================================================================

For instance, to place the 'login image' so that it is 
centered on X axis and bottom aligned on Y axis in the
*Input Panel*, open the file +greeter.ui+ (Gtk+2) or 
+greeter-gtk3.ui+ (Gtk+3), and, search the section below :

 ::
+
[source,xml]
----
<object class="GtkAlignment" id="alignment2">
  <property name="visible">True</property>

  <property name="xalign">0.6</property>
  <property name="yalign">0.0</property>

----

then, modify it as below :

 ::
+
[source,xml]
----
<object class="GtkAlignment" id="alignment2">
  <property name="visible">True</property>

  <property name="xalign">0.5</property>
  <property name="yalign">1.0</property>
----
