Difference between revisions of "Chrome"
From Phoenix Cart User Guide
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| Line 10: | Line 10: | ||
Try it out on this page for example. | Try it out on this page for example. | ||
| − | *Right click page - click on '''Inspect''' at the bottom of the popup menu - or just '''Control+Shift+I''' on your keyboard - developer tools pane opens on right of screen. | + | *Right click page - click on '''Inspect''' at the bottom of the popup menu - or just '''Control+Shift+I''' on your keyboard - the developer tools pane opens on the right of the screen. |
*Click on Inspect icon (box/arrow) in top left of tools pane - or just '''Control+Shift+C''' on your keyboard. | *Click on Inspect icon (box/arrow) in top left of tools pane - or just '''Control+Shift+C''' on your keyboard. | ||
*Hover the cursor over the extreme top left corner of this screen and you will see the following popup. | *Hover the cursor over the extreme top left corner of this screen and you will see the following popup. | ||
*Click on the element and all the style details will show in the the tools pane. | *Click on the element and all the style details will show in the the tools pane. | ||
| − | *In the top half of the pane the element name will show as a class ('''.classname''') or id ('''#idname'''). | + | *In the top half of the pane the element name will show as a class, with a dot prefix e.g. ('''.classname''') or as an id, with a hash prefix e.g. ('''#idname'''). |
*Use this name to define a css style in the '''user.css''' file that will override the styles in the core files of Phoenix. | *Use this name to define a css style in the '''user.css''' file that will override the styles in the core files of Phoenix. | ||
*In this example, to change the colour of the element the following would be saved in the '''user.css''' file. | *In this example, to change the colour of the element the following would be saved in the '''user.css''' file. | ||
| + | |||
| + | |||
*Click the colour square and a colour picker and colour changer will popup. | *Click the colour square and a colour picker and colour changer will popup. | ||
Revision as of 05:02, 13 October 2019
<historylink type="back">🠈 Back</historylink> 🠉 Must Have Tools
Chrome is free to download and use at the following link:
https://www.google.co.uk/chrome/
Use the software as an internet browser but it also has many useful tools for web development.
Try it out on this page for example.
- Right click page - click on Inspect at the bottom of the popup menu - or just Control+Shift+I on your keyboard - the developer tools pane opens on the right of the screen.
- Click on Inspect icon (box/arrow) in top left of tools pane - or just Control+Shift+C on your keyboard.
- Hover the cursor over the extreme top left corner of this screen and you will see the following popup.
- Click on the element and all the style details will show in the the tools pane.
- In the top half of the pane the element name will show as a class, with a dot prefix e.g. (.classname) or as an id, with a hash prefix e.g. (#idname).
- Use this name to define a css style in the user.css file that will override the styles in the core files of Phoenix.
- In this example, to change the colour of the element the following would be saved in the user.css file.
- Click the colour square and a colour picker and colour changer will popup.
