Code Monkey home page Code Monkey logo

Comments (6)

rprieto avatar rprieto commented on May 18, 2024

Currently, all custom CSS (--css) is added to style.css. Would it be enough to load that as the last CSS file?

from thumbsup.

rprieto avatar rprieto commented on May 18, 2024

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.

dkebler avatar dkebler commented on May 18, 2024

@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.

rprieto avatar rprieto commented on May 18, 2024

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:

  1. keep --css that appends an external file to the theme, but move the resulting styles.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
  2. change --css to write to custom.css instead of style.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. Keep style.css as it is, maybe renamed to theme.css.
  3. 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.
  4. if we choose options (2) or (3), we can also introduce --theme-variables that gets prepended to style.css and let people override theme variables

Thoughts?

from thumbsup.

rprieto avatar rprieto commented on May 18, 2024

@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.

dkebler avatar dkebler commented on May 18, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.