Video
If you open the video on YouTube, you can find the chapters of the different settings in the description.
Changing the CSS
It might seem intimidating, but it really is super easy. To change a design of some element, all you have to do is to find the class of that element and then write the rule for it in Theme Options (Customize) -> Additional CSS.
How to find a class
To find a class of a particular element, you first have to open the Developer Tools in your browser. Just google how to open those depending on your browser. In the Dev Tools, you want to select the element and then find which class it has.
How to write CSS
The CSS is written in this syntax: .class{property:value;}. The only part that Google or ChatGPT can’t tell you, is the name of the class. You have to find that by yourself. The rest you can always search for.
Changing properties of pages or single portfolios
If you want to change something on all of the pages or single portfolios for example, you have to find the class of the HTML Body element. So for example all the single portfolios have a class “single-portfolio”. So if you want to change the background color, you would write: .single-portfolio{background-color:black;}
Important rule
In case your rule doesn’t apply, it might be, that there is another rule in the CSS code that the browser gives preference. To override that, you want to add “!important” after the value, so f.e. : .single-portfolio{background-color:black!important;}
Transcription of the video
Hi there! Today, I’d like to talk to you about custom CSS.
Basically, custom CSS allows you to use the programming language that defines how your website looks. You can use it for small changes, like updating your design, hiding elements, changing colors, or modifying backgrounds. While CSS is technically programming, don’t worry—it’s going to be super easy, I promise. Plus, you’ll have much more control over your website.
Unfortunately, I can’t add every possible design option to the Minimalio theme options. That’s why I want to show you how to write really simple CSS. The way it works is that all the elements on your website have something called a ‘class.’ A class is essentially a name in the code that you can use to apply specific styles.
For example, here we have a class called ‘.header-brand’ for the main logo. By writing a bit of CSS code, you can target this class and change its design—for instance, by setting its color to red. You can’t simply Google, ‘What’s the class of my logo on my website?’ because neither Google nor ChatGPT will know that. However, you can definitely search for or ask how to change design elements, like color or background, using CSS.Just search, ‘How do I change something with CSS?’ and you’ll likely get the right answer. The real challenge is finding the correct class for the element you want to change. That’s what I’ll show you next.
First, go to the page you want to modify and open the Developer Tools. Every browser has these tools. I’m using Chrome, but you can use any browser—the tools are just located in different menus. In Chrome, go to ‘View’ → ‘Developer’ → ‘Developer Tools’ or ‘Inspect Elements.’ Once the Developer Tools are open, you can hover over the page elements to see the corresponding code. When you select an element, you’ll see its HTML code, including its class name. For example, the logo element might have a class like ‘.header-brand,’ which you can then use in your CSS.
To add your custom CSS, go to your theme’s ‘Additional CSS’ section, usually found in the theme options or customizer. Paste your code there. Remember, class selectors start with a dot (e.g., ‘.header-brand’), followed by curly brackets containing your CSS properties.
If you want to hide an element, you have two options. You can use ‘display: none;’ which completely removes the element from the layout, causing the page to shift. Alternatively, you can use ‘visibility: hidden;’ which keeps the element in place but makes it invisible.
What if you want to change the background of a specific page? You need to find the class of that page. Go to the page, open Developer Tools, and look for the ‘body’ tag. It will contain a specific class unique to that page. You can then use this class in your CSS to apply styles only to that page. For example, you could change the background color to gray using a hexadecimal color code. The change will apply only to that specific page because you’re targeting its unique class.If you want to change the background of all single portfolio pages, you don’t need to modify them individually. Just find a shared class, like ‘.single-portfolio,’ and apply your styles to that class. This will change the design for all portfolio pages simultaneously.
When styling all elements on a page, you can use the universal selector (‘*’). However, be careful with this because it will affect everything. If certain elements don’t change, it might be due to more specific styles already in place. You can override this by adding ‘!important’ to your CSS rule, which tells the browser to prioritize this style.
What if the element you want to target doesn’t have a class? If you’re using a page builder like Gutenberg, you can add your own custom class. In the block settings, under the ‘Advanced’ section, you can assign a custom class name. Then, you can style it with your custom CSS.
Lastly, always check that your changes look good on both desktop and mobile. The Developer Tools have a feature that lets you preview how your site will appear on mobile devices.