Difference between revisions of "Chrome"
From Phoenix Cart User Guide
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| Line 23: | Line 23: | ||
[[File:chromeinspect1.png]] | [[File:chromeinspect1.png]] | ||
| + | |||
*For full details, click on the element and the element name will show highlighted blue in the top part of the tools pane. | *For full details, click on the element and the element name will show highlighted blue in the top part of the tools pane. | ||
| Line 32: | Line 33: | ||
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 { |
background-color: #facd7d !important; | background-color: #facd7d !important; | ||
| − | } | + | } |
[[File:chromeinspect2.png]] | [[File:chromeinspect2.png]] | ||
Revision as of 08:49, 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 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.
