Child theme : the file style.css

The theme folder:

folder theme and child

folder theme and child

Here only the files containing (few) modifications are present.
page.php and single.php contain an added tag to display links to other post in different languages under title.
category.php a little modification to set description translatable.
functions.php is more important and will described in next post.

The short style.css :

@charset "UTF-8";
 * Theme Name: Twentyten Multilingual Child
 * Theme URI:
 * Description: Twentyten based but including features for multilingual context with xili-language plugin
 * Author: ms
 * Author URI:
 * Version: 0.9
 * Tags: child theme, tabs, multilingual
 * Template: twentyten
@import url('../twentyten/style.css'); /* the most important line of the style.css of a child from his parent twentyten */
/* some few modifications for xili-language list */
ul.xililanguagelist {list-style: none !important ; margin-left:0 !important ;}
/* example in header menu if filter xiliml_infunc_language_list is on */ li.lang-fr_fr a {background: transparent url('images/flags/fr_fr.png') no-repeat center 13px;} li.lang-en_us a {background: transparent url('images/flags/en_us.png') no-repeat center 13px;} li.lang-de_de a {background: transparent url('images/flags/de_de.png') no-repeat center 13px;} li.lang-es_es a {background: transparent url('images/flags/es_es.png') no-repeat center 13px;}
li.lang-fr_fr:hover > a {background:  #333 url('images/flags/fr_fr.png') no-repeat center 13px !important;}
li.lang-en_us:hover > a {background:  #333 url('images/flags/en_us.png') no-repeat center 13px !important;}
li.lang-de_de:hover > a {background:  #333 url('images/flags/de_de.png') no-repeat center 13px !important;}
li.lang-es_es:hover > a {background:  #333 url('images/flags/es_es.png') no-repeat center 13px !important;} li.lang-fr_fr, li.lang-en_us, li.lang-de_de, li.lang-es_es {text-indent:-9999px; width:18px;}

In child theme, the most important file is style.css with the line

* Template: twentyten

and the line

@import url('../twentyten/style.css');

The advantage of child theme :

The parent theme is NOT modified.
The child theme (selected in theme settings page) is easy to maintain but need knowledge of the parent theme.
The child theme contains a language sub-folder with the .mo files.
For xili-language, when template tags are not ‘hookable’, it is easy here to add specific tags provided by the plugin.

next post

This entry was posted in How to, News and tagged , , , . Bookmark the permalink.

One Response to Child theme : the file style.css

  1. Pingback: What is a child theme ? Example here for multilingual website | xili-plugins for multilingual sites

Comments are closed.