Using Browser Development Tools to change a skin's style

This is a brief introduction to using a browser’s developer tools to discover how to make changes to the style of a skin. If you don't know much, or anything, about HTML and CSS using the browser developer tools should make it possible to make simple changes to colours, borders and fonts. If you want to learn more about HTML and CSS there are plenty of resources on the internet such as https://www.w3schools.com/, https://www.mozilla.org, https://www.tutorialspoint.com.

Note for British English users, the web uses the American English spelling of ’color’ so be careful!

Many skins have a 'custom CSS' code field where you can change specific style attributes of the skin, for example the Tiger skin has Site > Custom code > {} CSS.

BDTTigerCSS.png

If the skin does not have a custom code ensure the license allows editing of the skin, but note edits will not survive skin updates, so make a note of your edits.

In Tiger it also says how to examine the album's element of interest by right clicking on it and selecting 'Inspect element'. Let’s look at its sample album and what happens in Firefox if we click on the word 'Tiger'.

BDTInspectMenu.png

Note: You can do this with developer tools in (click link for guides)
Chrome
Edge
Safari
and other modern browsers, not just Firefox

You can see that a set of tabs have been opened just below where we right clicked and that the 'Inspector' tab is active with the line <h1>…</h1> highlighted.
BDTInspectionElement.png Hovering the mouse over that line highlights (transparent blue box) the element itself and that the width (216.95) and height (46.0833) of the H1 element is shown. You can click on the triangle to the left of the text to expand the h1 tag, so you can see its contents.
BDTH1Content.png
The next pane shows the CSS code for the selected element, it has 'Pseudo-elements' at the top of the panel and below that 'This Element'. The small square shaped icons toggle the highlighting of the selected element, with the icon turning blue when highlighting is active.

BDTInspectStyle.png

Lets now look at the CSS code for the h1 element, the code is

.hero .hero-image header > div h1 {
 line-height: 1.2;
}

in the CSS code a dot before the word means the rule applies to a 'class' which typically applies to many elements on a page. A #, on the other hand, applies to an 'id' and is always a unique element. The '>' character, a 'Combinator', means apply the rule only to direct descendants of the element to it's left, in this case it targets the phrase 'Tiger 17/05/04—07/08/19' but not 'Tiger skin sample album'.

You can see these nested elements in the html panel:

 <div class="hero"…>
 …
 <div class="hero-image">
 …
 <header>
 <div>
 <h1>

Note, the code is targeting only this specific h1 tag and no other h1 tags, should they exist on this page.

The code sets the line height, the gap between lines of text, and you can see its effect by moving the cursor over the code and clicking off and on the small checkbox that appears. Notice how the word Tiger moves closer to the text below it and the dark background shrinks slightly. With the checkbox selected double click on the red '1.2' number and then cut (CMD/CTRL+X) it, you can now type in a new value, say 4, and see how it looks with that value. Double click on the 4 and paste to restore the original value.

This tells you that to change the line height for that element you need to enter in the skin's custom CSS field the code

.hero .hero-image header > div h1 {
line-height: 4;
}
 

Suppose we wanted to change the colour of the text for the date? Make sure the h1 element is expanded and in the first panel (HTML) select the line with the date. In the CSS panel look for the 'element' code, which is

.hero .hero-image header > div h1 .date {
 border-top-color: 
 #eeeeee;
 border-bottom-color:
 #eeeeee;

}

There is no 'color' property, the colour is 'inherited' from a parent's rule, so we need to add one to see the colour we wanted to use, say red. click once next to the '{' to open a new property field. Enter 'color' and press the 'Tab' key then either type 'red' or pick it from the popup menu by double clicking on red or another colour of your choice. You can of course use hex colours like #ff0000; instead of red. Click on the checkbox to toggle the colour change on and off. To remove the colour code, if you change your mind, double click on the 'color' property and then hit the delete key, then click anywhere to delete it. To make the change in the skin itself add the custom CSS code

.hero .hero-image header > div h1 .date {
 color:red;
}
 

Notice that the CSS properties for the element show the file the code appears in and the line number to look for. Using the date text, within the 'span' tag as an example notice the code is within the 'common.css' file and appears at line 1281. If you click on that file name it will open the 'Style Editor', where you can just type in many CSS rule changes you want to try out.


Another example is to change the colour of the text for the folder captions, Landscape, People, Nature etc. Right click on the word 'Landscape' and select inspect element. The HTML line with Landscape is highlighted and on the CSS panel we can see the code

.thumbnails .column .card .caption > :first-child {
padding-top: 0.625 rem;

As before click on in that area to create a new entry and enter 'color', press the tab key and type 'red;'. Notice that all of the folder names are now in red text. Suppose we also want to change the text colour when the cursor is hovering over the thumbnail box (.card)? We need to use the same CSS target as for the colour but modify it so it only works 'on hover', click on the code

.thumbnails .column .card .caption > :first-child {

and copy it.

BDTNewRule.png

We need to add a new rule, so click on the '+' icon in the CSS panel and then paste the code we just copied adding ':hover' immediately after '.card', so it looks like this:


.thumbnails .column .card:hover .caption > :first-child {
}

Now click in the area to add a new entry and enter color, then as before tab and pick a colour from the list. Notice the new colour of all of the folder captions when you hover over each of them in turn. Again, to use these new colours we need to paste into the skin's custom CSS code

.thumbnails .column .card .caption > :first-child {
colour: red;
}

.thumbnails .column .card:hover .caption > :first-child {
color: blue;
}


You can read about using browser developer tools in the help pages for the browser of your choice:
Chrome
Edge
Safari
Firefox