Chrome

<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 the index (home) page of your website 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 be selected 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 breadcrumb section of the webpage 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 - in this example it shows:

<ol class="breadcrumb">...</ol>

• The styles defined for the 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 a list of styles:

.breadcrumb {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: .75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
   background-color: #e9ecef;
   border-radius: .25rem;
}

• 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.