Difference between revisions of "Chrome"
From Phoenix Cart User Guide
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| Line 7: | Line 7: | ||
<big>'''https://www.google.co.uk/chrome/'''</big> | <big>'''https://www.google.co.uk/chrome/'''</big> | ||
| − | Use the software as an internet browser. | + | Use the software as an internet browser but it also has many useful tools for web development. |
| − | Right click | + | 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. | ||
| + | *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 ('''.classname''') or id ('''#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. | |
| − | |||
| − | |||
| − | |||
| − | *Click | ||
| − | |||
| − | |||
Revision as of 15:48, 12 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 - developer tools pane opens on right of 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 (.classname) or id (#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.
