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" :Menaging
  2. Select the search button (on the bottom left) :Menaging
  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:Menaging
  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:Menaging
  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:Menaging
  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.Menaging

tnks for reading :)





Mar, 28/10/2014 - 15:59
Bibliography: ShOP Works SHoP Works

SHoP Works, by Stefano Converso
English Edition: ePub via

I progetti evidenziati nella terza lezione, sui componenti costruttivi parametrici, e l'evoluzione dello studio e della crescita di complessità gestita dai modelli digitali, sono alla base della storia degli inizi di SHoP, scritta "dal vivo" in questo libro, tra Roma e NY. Enjoy!

This book shows the activity of SHoP Architects as an emblematic example of the research area, the applications and the growing success of a contemporary American office focused on digital technologies for design and construction. What is peculiar of SHoP is the openness to all the different actors of the building process. An intense experimental intention is found in the works of the office, all embedded in a fully contemporary aesthetic dimension, focused on vibration and variation of building components. And the beauty of buildings is much more relevant since it is strictly connected to all pragmatic and technological aspects of architectural practice, and to the search for new paths of invention.

Sab, 25/10/2014 - 16:31
Managing "Timeline.CSS" Part One

hi guys, here last updates about CSS working progress. I started manage Timeline.CSS file. I am trying to study field layouts to decide which to show and how to view them.

Unfortunately as language it looks more complex than others CSS that i studied before. So to explain you better i try to make a work report about CSS files:

  1. I learned some PHP code (just basic language) and I decided to reorder content by hierarchies to better read fields formatting. Now, having a more readable result, the next step was starting to study word by word each line command. 0.PNG
  2. The Timeline has an own CSS, seems to be written in a much more disordered way and with a PHP basic language a little different:2 Timeline css.PNG
  3. I tried to analyze the rows one by one and I used the strategy to end row after each brace "}" and after ","  about classes. seems to have taken a different form now. I hope it's the right way without any script errors (anyway I saved a backup copy of the original file). this is the final result:3 Timeline css.PNG

Now the script seems more readable. I noticed that before every class there is a sort of call-address. Without those CSS commands, the script doesn't work, so I think there are some differences about CSS or PHP language in this file.
In addition the editor that i am now using suggests by self available commands. I saw that when I write them into this file don't appear certain commands, for example: 
- I've always used the command "border-top-left-radius:" or "border-top-right-radius" 
- Here the only suggestion that appears is "border-radius", as if it were an older version of the language and does not recognize more complex commands. 

Someone can tell me if it's a plausible explanation? 
Reformatting the code by hierarchies was a good strategy or it will give back sure script errors?

Ven, 24/10/2014 - 16:30
Da una funzione a Revit

Riprendiamo il discorso delle funzioni generate in Dynamo ( http://design.rootiers.it/tecniche2012/node/3712 ) e stavolta vediamo come utilizzare le funzioni e il loro controllo per realizzare uno pseudo oggetto architettonico lavorabile in Revit.

Prendiamo una curva generata da funzione e duplichiamo i nodi che la generano, a questo punto abbiamo due curve parametriche indipendenti.

A questo punto possiamo unire le due curve in un’unica lista con il nodo List Create; questo crea una lista degli oggetti (in questo caso le curve) la cui sequenza viene collegata al nodo Surface By Loft il quale necessita di una sequenza di due o più curve.

Dalla superficie possiamo aggiungere uno spessore con il nodo Surface Thicken ottenendo in tal modo un solido.

Ora che abbiamo un solido siamo pronti ad esportarlo all’interno di una famiglia generica basata su faccia. La esportiamo all’interno di una famiglia e non all’interno di un progetto perchè consideriamo l’oggetto come un componente editabile nell’ambito della famiglia in un secondo momento caricato in un progetto. Prendiamo il nodo Import Instance By Geometry e dopo avere eseguito il Run di Dynamo, avremo il nostro componente presente nella famiglia di Revit.

La prima cosa su cui vado ad indagare sono le dimensioni dell’oggetto e come possiamo vedere dalle immagini lo spessore dell’oggetto in Revit è pari a 280 mm, e il valore attribuito in Dynamo è 0.280, il che significa molto banalmente che in Dynamo il valore è espresso in metri. Questa informazione è indispensabile nel momento in cui volessimo gestire le dimesnioni dell’oggetto, in quanto una volta arrivati in Revit questo non è più possibile.

E’ però possibile creare altri parametri, come ad esempio il materiale ed anche altri parametri che possono essere utili da estrapolare o che comunque possono aiutare la gestione di questo componente nel progetto.

Possiamo quindi modificare le dimensioni da Dynamo e immaginare che questo componente possa essere nel mondo architettonico una installazione urbana, ovviamente abbastanza utopica al momento ma con alcune considerazioni non è detto che non sia realizzabile.

Gio, 23/10/2014 - 12:36