Custom Images and CSS

Ready to take your theme to the next level? Let's explore how to use custom images and CSS to create truly unique designs.

Custom Images

Custom images allow you to add distinctive visual elements to your theme, such as backgrounds, icons, gifs, or decorative touches.

How to Use Custom Images:

1. In the Theme Creator, find the "Custom Images" section.

2. Click "Add image" and choose an image file from your computer.

3. Once uploaded, the image is assigned a CSS variable name (e.g., --custom-image-0).

4. Feel free to rename this variable to something more descriptive if you'd like.

Using Custom Images in CSS:

To incorporate your custom image into your theme, use the var() function in your CSS. Here's an example:

.element {
  background-image: var(--custom-image-0);
  background-size: cover;
  background-repeat: no-repeat;
}

This sets the background of .element to your custom image.

Tip: You can upload multiple images and use them in different parts of your theme for a cohesive design.

Custom CSS

Custom CSS is where you can really flex your creative muscles. It allows you to fine-tune every aspect of your theme's appearance, from colours to layouts and beyond.

Overriding Theme Colours:

To change the default theme colours, you can modify CSS variables. Here are some key variables you might want to adjust:

:root {
  --better-main: #4a90e2;
  --better-sub: #161616;
  --better-alert-highlight: #c61851;
  --text-color: #333333;
  --background-primary: #ffffff;
  --background-secondary: #e5e7eb;
  --theme-primary: #ffffff;
  --theme-secondary: #e5e7eb;
  --text-primary: #000000;
}

If your styles aren't taking effect, try adding !important:

:root {
  --better-main: #4a90e2 !important;
}

Custom Fonts

Want to give your theme a truly unique look? Custom fonts are a great way to do that! Here's how you can add and use custom fonts in your BetterSEQTA+ theme:

Using Google Fonts

Google Fonts is a popular, free service that provides a wide variety of web fonts. Here's how to use it:

1. Visit Google Fonts and choose a font you like.

2. Copy the @import URL provided by Google Fonts.

3. Add the import statement at the top of your CSS:

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

1. Apply the font to your elements:

body {
  font-family: 'Orbitron', sans-serif !important;
}

Example: The "Hacker" theme uses the Orbitron font for a futuristic look:

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif !important;
}

Using Fontsource

Fontsource is another great option for adding custom fonts. It provides npm packages for open source fonts, which can be helpful for local development. For BetterSEQTA+ themes, we'll use their CSS import method:

1. Visit Fontsource and search for a font you like.

2. On the font's page, look for the "CDN" button.

3. Scroll down and copy the CSS in:

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

For example (above) the inter font selected from fontsource.

1. Apply the font to your elements:

code, pre {
  font-family: 'Inter Variable', sans-serif !important;
}

Advanced Setup

If you are making a complex theme, it can be nice to have some tools at your fingertips to help you write reusable code. I have put together a repository that automatically copies to clipboard the compiled css that can be pasted straight into the theme creator. It also has a couple of nifty features to help with using CSS frameworks https://github.com/BetterSEQTA/BetterSEQTA-theme-generator.

The theme generator also includes all the themes that I have built if you are interested at finding some examples.

Tips for Custom CSS:

1. Use browser developer tools (Inspect Element) to find CSS selectors for specific elements you want to modify.

2. Start with small changes and build up your theme gradually.

3. Add comments to your CSS to make it easier to understand and maintain later.

In the next section, we'll provide some specific CSS examples and techniques to help you create amazing themes for BetterSEQTA+. Let's keep exploring!