Difference between revisions of "Chrome"
From Phoenix Cart User Guide
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| Line 12: | Line 12: | ||
*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. | *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. | ||
| − | [[File: | + | *'''Elements''' should be already preselected in the tool bar - click on it if it is not. |
| + | *Click on Inspect icon (box/arrow) in top left of tools pane - it will turn blue - or just '''Control+Shift+C''' on your keyboard. | ||
| + | |||
| + | [[File:chromeinspect4.png]] | ||
| − | |||
*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. | ||
[[File:chromeinspect1.png]] | [[File:chromeinspect1.png]] | ||
| − | *Click on the element and | + | *Click on the element and the element name will show highlighted blue in the top part of the tools pane. |
| − | + | The element name will show as a '''class''' or '''id''' or, in this example, it has both | |
| + | |||
| + | <code>id="mw-header-container" class="ts-container"</code> | ||
| + | |||
| + | *The styles defined for that element will show in the bottom part of the tools pane. | ||
| + | A class has a dot prefix e.g. ('''.classname''') and an id has a hash prefix e.g. ('''#idname'''), in this case there is the style: | ||
| + | |||
| + | #mw-header-container { | ||
| + | background-color: #facd7d !important; | ||
| + | } | ||
| + | |||
| + | [[File:chromeinspect2.png]] | ||
| + | |||
*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. | ||
Revision as of 08:42, 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.
- Elements should be already preselected in the tool bar - click on it if it is not.
- Click on Inspect icon (box/arrow) in top left of tools pane - it will turn blue - 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 the element name will show highlighted blue in the top part of the tools pane.
The element name will show as a class or id or, in this example, it has both
id="mw-header-container" class="ts-container"
- The styles defined for that element will show in the bottom part of the tools pane.
A class has a dot prefix e.g. (.classname) and an id has a hash prefix e.g. (#idname), in this case there is the style:
- mw-header-container {
background-color: #facd7d !important;
}
- 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.
