Comments (6)
Currently, all custom CSS (--css
) is added to style.css
. Would it be enough to load that as the last CSS file?
from thumbsup.
Only downside is that it won't allow overriding LESS variables used by the different themes. Unless you can think of something? For example we could split into 2 options, one for overriding a theme (merged with the theme CSS), and ones for providing custom CSS (applied at the end).
from thumbsup.
@i saw the option after I made this issue. I didn't know where it got loaded. Moving the style.css would not work since when the site gets rebuilt it gets written over by the copy in repo's public/. I just added a "custom.css" line to the end of the list of css in your albums template. That works fine and never gets written over. <link rel="stylesheet" href="{{relative 'public/custom.css'}}" />
Then user just adds their own custom.css file to public/
I use Hugo and in my go templates for hugo I can conditionally add a custom.css load line if a parameter is set (like using custom css). Handlebars probably has something similar. Then --css could simply turn on/off that line.
As to your compiled less I couldn't find your processing code in src/ so no sure where you are putting the corresponding css (in the body?). I would dump the css file in public/ as theme.css and then add it just before custom.css in albums.hbs head.
Actually I do my preposcessing (sass/less/stylus) then use post-css and or vinyl-fs to combine all my css files into one. I can control the loading order. There is a then a single css file to load in the head, say thumbsup.css. You could even put that at a cdn.
from thumbsup.
This is the code in website.js that renders the CSS:
function renderStyles(callback) {
var themeFile = path.join(DIR_TEMPLATES, 'themes', opts.theme, 'theme.less');
var themeLess = fs.readFileSync(themeFile, 'utf-8');
if (opts.css) {
themeLess += '\n' + fs.readFileSync(opts.css, 'utf-8');
}
less.render(themeLess, function (err, output) {
if (err) return callback(err);
var dest = path.join(opts.output, 'public', 'style.css');
fs.writeFile(dest, output.css, callback);
});
}
This means any custom LESS gets appended to the theme's LESS, and built into style.css
. However you're right, it doesn't actually let you override theme variables since it's added at the end of the file (too late to change them).
With what you suggested, I can think of 4 options:
- keep
--css
that appends an external file to the theme, but move the resultingstyles.css
to be the last one in<head>
. This would solve the immediate problem: any custom CSS would be loaded at the end and have precedence over other code - change
--css
to write tocustom.css
instead ofstyle.css
, and load that new file at the end. In this case the user doesn't have to copy anything because the file is generated. Keepstyle.css
as it is, maybe renamed totheme.css
. - change
--css
to toggle an additional<link>
, and the user has to ensure that this file exists, either copying it manually in/public
or pointing to a CDN. This is similar to (2) but thumbsup doesn't actually read that file, it merely points to it. I'd rename that option to--external-css
. - if we choose options (2) or (3), we can also introduce
--theme-variables
that gets prepended tostyle.css
and let people override theme variables
Thoughts?
from thumbsup.
@dkebler latest master now loads any custom CSS at the end. Can you try adding --css path/to/custom.css
see if it fixes your problem? I did some testing and can easily override styles from both the theme and lightgallery for example.
from thumbsup.
@rprieto Since I have been manually incorporating your .html file this is no longer an issue for me.
If/when the data model export is working this will all be moot as well as I already have the html templates and css I need for my project.
So...I haven't had a chance to try this and confirm it's working.
from thumbsup.
Related Issues (20)
- Disable download of images via UI HOT 2
- New Theme: PhotoArchive
- npm install failing clean CentOS Stream release 9 build HOT 6
- Investigate the use of ESM modules
- Read XMP "sidecar" files for meta-data HOT 1
- Link to a specific image in album view
- ffmepg video conversion error HOT 3
- Emojis in folder names not supported on MS Windows HOT 3
- installation instructions don't work; better_sqlite3.node outdated
- Unexpected error Cannot read properties of undefined (reading 'FileModifyDate') HOT 6
- Gallery generated successfully! │ │ 1 albums, 0 photos, 0 videos HOT 1
- All video files are missing in the destination HOT 3
- database is locked HOT 2
- 2.16.0 and later give TypeError: value.split is not a function HOT 3
- link-prefix ignores '..' HOT 3
- Docker image: Please install `dcraw` HOT 5
- Add support for new Content Credentials C2PA standard HOT 3
- Consolidate directory scanning packages
- Docker image: Alpine or Debian HOT 4
- Flow Theme fail to redefine width and tile images HOT 1
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 thumbsup.