Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
Next revision Both sides next revision
services:pvw:css [2015/03/14 16:00]
r2d2 created
services:pvw:css [2015/03/14 16:18]
r2d2
Line 6: Line 6:
  
 ===== Bootstrap Based ===== ===== Bootstrap Based =====
-Our site template is mainly based on the industry standart [[http://​getbootstrap.com|Boostrap]] CSS that is used by many major sites, including Twitter (who created it).+Our site template is mainly based on the industry standart [[http://​getbootstrap.com|Boostrap]] CSS that is used by many major sites, including ​[[http://​twitter|Twitter]] (who created ​and use it).
  
 One of the main advantage of using Bootstrap is that it is fully responsive by default. This means thats pages will automagically adapt to any browsers page size, including mobiles, tablets and desktop computers. One of the main advantage of using Bootstrap is that it is fully responsive by default. This means thats pages will automagically adapt to any browsers page size, including mobiles, tablets and desktop computers.
Line 23: Line 23:
 To quickly test an external Bootstrap theme, you can simply add this to your //​custom.css//​ file at top: To quickly test an external Bootstrap theme, you can simply add this to your //​custom.css//​ file at top:
 <code css> <code css>
-/* Import ​a free BootStrap Theme */+/* Import ​superhero ​BootStrap Theme EXTERNALLY from MaxCdn ​*/
  ​@import url("//​maxcdn.bootstrapcdn.com/​bootswatch/​3.3.2/​superhero/​bootstrap.min.css"​);​  ​@import url("//​maxcdn.bootstrapcdn.com/​bootswatch/​3.3.2/​superhero/​bootstrap.min.css"​);​
 </​code>​ </​code>​
  
-If you are happy with an external theme, we strongly suggest you to NEVER rely on a call from an external server (except a well established CDN) because in the case it fails to respond, your site will load slowly and be ugly without this css.+If you are happy with an external theme, we strongly suggest you to NEVER rely on a call from an external server (except a well established ​[[wp>​Content_delivery_network|CDN]]) because in the case it fails to respond, your site will load slowly and be ugly without this css. You would rather copy the css (and all its dependencies) to a subfolder of your css directory, ie like that: 
 +<code css> 
 +/* Import superhero BootStrap Theme from a LOCAL superhero_theme sub-directory */ 
 + ​@import url("​superhero_theme/​bootstrap.min.css"​);​ 
 +</​code>​ 
 + 
 +===== Adding your own styles ===== 
 +The //​custom.css//​ file can be filled to ovveride any Style defined either by the Bootstrap CSS, either from our own Default stylesheet.  
 + 
 +We tried to use mostly Bootstrap block, butons, etc. to comply with any Bootstrap theme. In some case, we also had to add some custom DIV for cases not well covered by Bootstrap. 
 + 
 +We've made our best to make each DOM element easely accessible, by using various classes and id, each prefixed by //pvw// and clearly named. We'he also tagged the body tag with a pvwBody_XXX id that is unique to each page, allowing you to access each page styles individually. 
 + 
 +If you ever miss a css declaration to access a specific DOM element, please feel free to contact us, to suggest some new clss definitions. 
 + 
 + 
 + 
 + 
 +{{indexmenu_n>​50}}