Comments (3)
This is something I'm working on documenting better.
You can override any of the CSS custom properties in an /assets/custom.css
file or whatever file you set custom_css
to in params.toml
.
If you want to change your whole theme's primary color in one go, set a --color-primary
property to your chosen color.
Global property override:
/* Light AND dark theme override */
:root, [data-theme="dark"] {
--color-primary: green;
}
/* Separate overrides for light and dark */
:root {
--color-primary: green;
}
[data-theme="dark"] {
--color-primary: red;
}
For individual elements that don't have a property, find their class in the source code or browser and override that.
Those buttons in the image, for example, have classes .btn-primary
and .btn-secondary
and are children of .hero-info
.
.hero-info .btn-primary {
background-color: green;
border-color: green;
}
.hero-info .btn-secondary {
color: green;
border-color: green;
}
Because CSS is ubiquitous, I felt it was easier just using CSS for these types of changes rather than trying to support a million different style preferences via configs.
Something you just made me realize is that in development the custom CSS file was linked before the compiled source Sass, and therefore the cascade wasn't picking up some custom CSS changes. I just fixed that in the version I released a minute ago (v3.3.0). This only impacted custom CSS in development because in prod the custom CSS was bundled with the source CSS in the correct order.
Icons use --color-primary
for their fill
property (CSS color
won't change SVG color unfortunately so you'll have to override the SVG layout templates if you want them to differ from your --color-primary
property).
As for fonts, I didn't expose those as CSS properties yet, just the font sizes. This is because the theme uses local fonts and doesn't load them from a CDN which makes the process a little more difficult. You can however customize fonts by adding the files to <your_site>/static/fonts/<font_name>/*
for example, then creating @font-face
declarations for them (see themes/hugo-liftoff/assets/scss/base/_fonts.scss
to see how it's done for the default font.
Single font-face declaration, in practice you'd have 1 for each font style:
@font-face {
font-family: 'Montserrat';
src: local('Montserrat Thin'),
url('/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
Then in your custom.css
, add an override for the body font
:
body {
font: normal 125%/1.4 "Montserrat", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
Apologies for the long-winded answer. I'm going to work on documenting this better and improving some of these customization workflows.
from hugo-liftoff.
Okay thank you, I appreciate the detailed answer! I agree with your thoughts on allowing user to extend colors directly via CSS. Sounds good on changing fonts.
Feel free to close this out whenever you're ready
from hugo-liftoff.
My pleasure; it's helpful getting feedback like this
from hugo-liftoff.
Related Issues (20)
- Disqus embed color scheme breaks on toggle HOT 1
- Disable Projects HOT 1
- How do I change the home image to not be grayscale? HOT 4
- Enhancements for next major version - drop your suggestions here HOT 1
- Optionally disable projects section and allow custom posts/projects permalinks HOT 2
- Language Error HOT 6
- Insert image insie post HOT 2
- Not sure if this is a Bug, or problem with my Text Editor (VS Codium) HOT 2
- Add Mastodon to social links HOT 1
- Request: linking example site on https://themes.gohugo.io/themes/hugo-liftoff/ HOT 3
- Mastodon Link Verification HOT 2
- Bug - Feature image not working HOT 5
- Align the dropdown menu with header HOT 2
- layouts: image: Template renders wrong images due to glob matching.
- Location of security settings for 'newContentEditor'
- am i doing something wrong with netlify deployment? HOT 8
- ADD Social link
- Module "hugo-liftoff" is not compatible with hugo v0.111.3+extended linux/amd64
- Not compatible with hugo v0.123 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-liftoff.