Create custom code with the browser’s Inspector

Tutorial level: basic HTML and CSS

The web environment is constantly changing. Your success depends on the speed with which you manage to adapt and adjust your website to all these continuous changes. The customization process is heavily backed up by the theme settings but sometimes you may need to change parts of the site for which there’s no predefined optvion. This is not a hard task, it just requires some basic knowledge on how HTML and CSS work. In the following tutorial we’ll show you how to create custom code combining HTML tags with CSS attributes to shape your website.

Every browser comes with a handy tool called Web Inspector which can help you get a better grasp of the code behind any website. To better understand how it works please go through Chrome’s Developers Tools Overview.

In this tutorial we’ll focus on understanding the page’s HTML structure using Chrome’s developer tools (Inspector) and on finding specific CSS classes. We will show you how to identify the HTML snippet for page elements and how to change it’s style.

In the following example we will demonstrate how to find and target a specific theme module within a block and change its basic designs.

Let’s say we want to change the color of the post titles inside a content block. First identify the part of the site you want to edit, then right-click on it and select the ‘Inspect’ option:

2016-01-07_14-31-43

 

The developer tools section will appear on screen. In most cases, the first selection may not be very precise and you’ll probably not ‘inspect’ the desired element because of the website’s complex HTML structures which is based on different containers stacked one on top of the other.

2016-01-07_15-13-12

 

Now you’ll need to select and open every container until you find to the one you are looking for. The Visual Selector will be very useful in this matter.

The Visual Selector steps:

  1. Click on the Visual Selector icon in the left side of the Inspector tool.
  2. Select the element you want to edit.
  3. Find the proper HTML class.
  4. Identify the CSS selector used to style the element.

2016-04-14_13-36-03

 

The post titles themselves are HTML headings so we will have to open the containers to find the heading tag. Once you identify the element, you will see it’s CSS styling in the right side of the Developer Tools area. You will see a live visual representation for each change you make in the element settings.

Let’s change the title color. For this step you will need basic knowledge of CSS selectors. The H3 tag of the post title has a class called td-module-title. We can use it in our code and target the anchor tag:

.td-module-title a {
color:red;
}

This will apply to each element that has this structure. To increase your selector’s specificity you’ll need to add more classes from the containers above the title.

.td_module_6 .td-module-title a {
color:red;
}

Now the code will be applied only to the titles from a Module 6, but this will affect every place where a Module 6 is used and again we need to be more specific to grab a few more classes from the containers above.

.td_block_1 .td_module_6 .td-module-title a {
color:red;
}

Now the color will apply only to a Block 1 that has a Module 6 with a module title and an anchor tag. If you want to be even more specific than this you can add an extra class to the row in the page builder.

The CSS language needs precise directions to know where exactly to apply the changes you want. It can be a bit confusing at first, but once you manage to understand it’s structure, you’ll have the knowledge to make really awesome customization to your theme. Read more about Specificity .

Now that you are happy with the results, you can add the snippet in the designated custom code area of the Theme Panel. The Newspaper theme will automatically apply it.

 

Use the techniques presented in this tutorial to discover how the websites you love are build and have fun customizing your own!