Differences
This shows you the differences between two versions of the page.
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 sites, including [[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 website, please keep in mind to check your pages using various page widths making sure they are always correctly displayed on any of the devices listed above. You 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 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 did our very best to use only Bootstrap blocks, buttons, etc, to comply with all Bootstrap themes. But 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 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. | + | 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}} |