Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
services:pvw:css [2015/03/14 16:16]
r2d2
services:pvw:css [2015/03/19 11:50] (current)
r2d2
Line 1: Line 1:
 ====== Custom CSS ====== ====== Custom CSS ======
  
-You can modify ​the **css/​custom.css** to design ​the site to your own colours.+You can customise ​the **css/​custom.css** to design your website at your company'​s look and feel.
  
-This stylesheet is loaded at last, which means that you can override any style from there.+This stylesheet is loaded at the very end which means that you can override any styles ​from there.
  
 ===== 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 sitesincluding [[http://​twitter|Twitter]] ​(who created and use it).+Our website templates are mainly based on the industry standart [[http://​getbootstrap.com|Boostrap]] CSS that are used by major sites including [[http://​twitter|Twitter]] who created ​Bootstrap ​and uses it to display their pages.
  
-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 advantages ​of using Bootstrap is that it is fully responsive by default. This means that pages will automatically ​adapt to any browser'​s ​page sizes including mobiles, tablets and desktop computers.
  
-Therefore, ​when you design your site, keep in mind to always ​check your pae, with various page width to be sure it is still nicely ​displayed on any devices. ​But if you wish to bypass this functionnalily ala old-school way, you could simply ​set a fixed '​container width' ​in your CSS+Therefore, ​while you design your websiteplease ​keep in mind to check your pages using various page widths making ​sure they are always correctly ​displayed on any of the devices ​listed aboveYou may prefer ​to bypass this functionally,​ going the "old-school" ​way. You would then simply ​need to use a fixed '​container width' ​within ​your CSS template.
  
 ===== Using Bootstrap premade themes ===== ===== Using Bootstrap premade themes =====
-If you'​re ​lazy designing your own CSS, you could start from one of the many bootstrap ​theme available on the web.+If you'​re ​not into designing your own CSS stylesheets, you could start from one of the thousands ​bootstrap ​themes ​available on the web.
  
-You will find some there+You will find some great ones here 
-  * https://​bootswatch.com/ ​some free theme +  * https://​bootswatch.com/ ​Cool free themes. 
-  * https://​wrapbootstrap.com ​some commercials ​themes+  * https://​wrapbootstrap.com ​Nice commercial ​themes.
    
-//BTW be aware that despite we based our template ​on Bootstrap ​one and as you wont be able to alter the page HTML layout, we cannot ​warranty ​that ANY commercial ​template ​will nicely ​adapt to your site.//+//Warning ! Please note that despite ​the fact that we have based our templates ​on Bootstrap and that you won'​t ​be able to alter the HTML page layout, we cannot ​guarantee ​that ALL commercial ​templates ​will fully adapt to your website.//
  
-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 the following ​to your //​custom.css//​ file at the top :
 <code css> <code css>
 /* Import superhero BootStrap Theme EXTERNALLY from MaxCdn */ /* Import superhero BootStrap Theme EXTERNALLY from MaxCdn */
Line 27: Line 27:
 </​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 [[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:+If you are pleased ​with an external theme, we strongly suggest ​that you NEVER rely on an external server ​call (except ​for a well established [[wp>​Content_delivery_network|CDN]]). If the external server ever happened ​to fail responding, your site would load very slowly and would look real bad without ​the CSS stylesheet. You should therefore ​copy the CSS (and all of its dependencies) to a subfolder ​within the CSS directory, ​perhaps ​like this :
 <code css> <code css>
 /* Import superhero BootStrap Theme from a LOCAL superhero_theme sub-directory */ /* Import superhero BootStrap Theme from a LOCAL superhero_theme sub-directory */
Line 34: Line 34:
  
 ===== Adding your own styles ===== ===== 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+The //​custom.css//​ file can be filled to override ​any Styles ​defined either by the Bootstrap CSS or from our own default stylesheets
  
-We tried to use mostly ​Bootstrap ​blockbutons, etcto comply with any Bootstrap ​themeIn some case, we also had to add some custom ​DIV for cases not well covered by Bootstrap.+We did our very best to use only Bootstrap ​blocksbuttons, etcto comply with all Bootstrap ​themesBut in some cases, we had to add custom ​DIVs to implement some layout that where not available within ​Bootstrap.
  
-We've made our best to make each DOM element easely accessibleby 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.+We also did our very best to make each DOM element easely accessible by using various classes and IDs, each of them prefixed by //pvw// and clearly named. We've 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.+If you ever miss a CSS declaration to access a specific DOM element, please feel free to contact us, to suggest new class definitions.
  
  
 +
 +
 +{{indexmenu_n>​50}}