Drupal: Managing "Timeline.CSS" Part Two

hi guys, here we are for the second part of our CSS report study,

Finally i discovered the mistery! I was working on two different ".CSS" files, the first one (style.css) sets up the Theme style (in this case i found it to our server address "bim.rootiers.it/site/all/themes/mytheme/style.css") , the second one sets up the Timeline add-od style (timeline.css) ("bim.rootiers.it/sites/all/libraries/timeline/compiled/css/timeline.css"). 

I lost a lot of time trying to understand why same commands doesn't work on different .css files. After many days of deep work,  I got that timeline.css was only a very dirty php script!!! Along all the document there are a lot of repeated commands that replace each other. Into a php script the last command always overrides the previous one. In this example:

border: 20px red;

​border: 15px blue;

the final border will be the last one (blue with a 14px width)

The great discovery was the use of " !important " command. So If i write for example:

border: 20px red !important;

border: 15px blue;

border: 5px black;

in this case the final border will be the one with the " !important " command (red with a 20px width). What wonderful command! it works also through differents .css files, i can rewrite classes proprieties of the Timeline.css directly from the main Theme file "style.css".

Now that we know how manipulate our CSS script hierarchy, i am going to show you some tips to preview and fast control of web design using Chrome brouser. To better explain let's see some pratical exemples:

1.  open your web page by Chrome browser, right click on the screen and select "element Inspector" :
2. Select the search button (on the bottom left) :
3. Select now the element on the web page you are going to modify. We can chose if select the element on the screen or directly select the html code that prints the element:
4. Now the Element Inspector will show you all the element's proprieties on the right corner. You will have a list of proprieties grouped by class style. By left click inside that window we can easly add new commands using a suggesting tool of all available commands for the element we selected. let's add, for example, a background color:
5. Remember that all modifications are just temporary, they are only a fast preview, if we want that script permanent we need to modify the original ".CSS". So click on the link near the proprieties group, Chrome will open a temporary modified copy of our original "style.css" file:

6. If you modified, as me, only a single class and element style you can copy only the relative rows highlighted. Then open the original file into your server (our is always at "bim.rootiers.it/site/all/themes/mytheme/style.css")  and paste to relative rows. If you changed a lot of things of various elements copy all the script and override all into the original file of your server.

tnks for reading :)