Difference between revisions of "Chrome"
From Phoenix Cart User Guide
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| Line 33: | Line 33: | ||
<code>id="mw-header-container" class="ts-container"</code> | <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. | *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: | + | 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 { | #mw-header-container { | ||
| Line 42: | Line 43: | ||
| − | *Use | + | *Use the element name with the correct prefix 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 09:07, 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.
Change Colour and Styles.
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 showing the name of the element and styles defined for it.
- For full details, 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 the element name with the correct prefix 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.
