I want to create a theme, but if possible, not use Bootstrap v4 at all. This will reduce the CSS file to a minimum. It’s easier for me to work without Bootstrap. :frog:

  • AgreeableLandscape
    3·
    5 years ago

    Lemmy uses Bootstrap as the base CSS framework, so you can just call bootstrap classes in your custom theme (you don’t have to include any Bootstrap source code a release of your theme). What happens at the browser level is that the base Bootstrap stylesheets get applied, then your theme CSS, which will overwrite any defaults with the custom rules you defined.

    For a WYSIWYG Bootstrap theme builder, check out https://bootstrap.build/app

    • EvgOP
      2·
      5 years ago

      Yes, this is what I want. It’s easier for me, and I think there will be less code. Thank you so much.

      • AgreeableLandscape
        3·
        5 years ago

        For the theme builder, remember to export the theme to a local file often as (AFAIK) the free version has no way of saving it online, so if your tab or browser is closed, all is lost.

        • EvgOP
          3·
          5 years ago

          I have some experience with CSS. Bootstrap is simply not very convenient for me, that is, as a rule, it is usually easier to write everything yourself. Cleaner and easier to control. I like Lemmy precisely because of its simplicity and ease, and I would not want to introduce something “heavy.”

  • Serge Tarkovski
    2·
    5 years ago

    For my own instance, I guess I’d end up hacking the Inferno code as well, to add as much custom stuff as I wanted. While I agree that, at this stage of Lemmy development, Bootstrap is a decent choice, I’d say for a distant future something more flexible should be considered one day. I was trying to make stylable with a theme the left vertical lines that come with each comment, but now I’d rather give up. Those lines are set in the style attribute, thus overriding the theme, and every single existing theme has a border style for those, so any comment border style in main.css will be overridden by any theme that already comes with Lemmy. So I should either modify all the themes or leave things as is. That’s just an example of current limitations in flexibility, but anyway, I’d say for my own instance I’d end up hacking everything, accepting the fact that I should resolve merge conflicts on each pull from Lemmy master branch, and maybe making some PRs with some improvements.

    • EvgOP
      2·
      5 years ago

      On some pages: /search, /community, etc. There is nothing that can be used to determine where I am.

      The only thing that can be used on all pages is .container, but this will make it possible to create only relatively simple layouts.

      It will be quite difficult for us to create something like this:

      If it were possible to do something to mark pages (sections), for example, this is done in the Discourse in the Body tag, for example. (<body class="search-page"> - for search page) it was possible to bring more possibilities for various design options.

      I don’t know how technically difficult it is until I get to this.

      Demonstration of this point: https://github.com/Toxu-ru/lemmy-css-theme-easy

      The amount of code can be significantly reduced if css properties exist, so you can “hook” to determine your location (page, section).

      • DessalinesMA
        2·
        5 years ago

        Please follow the instructions in the theming guide. This uses bootstrap v4, all the classes are very well defined already.

        • EvgOP
          1·
          5 years ago

          That’s why I asked if it is possible to refuse bootstrap v4.

          But I still have a question.

          On the central page, I can easily use these styles (in html) to highlight the central blog:

          But what to do here?

          https://lemmy.ml/communities

          On this page, I can only use the container class for the central blog, which cannot be used i.e. he is on other pages. If I set the background for him, then we will not be able to select the sidebar, for example, on the central one, as in my example.

          The question is no longer about Bootstrap, but about classes to which I cannot bind. You noticed that all topics are almost the same. The reason is this. If there was the class that I ask, it would be possible to diversify the design. And so, we can now only change the background and color of the text.

          Those. Our options are very limited with or without Bootstrap.

          • DessalinesMA
            2·
            5 years ago

            You have to use bootstrap v4 classes, I’m not going to re-write the whole thing to use custom classes. Its literally plug and play, build a bootstrap v4 theme, and it’ll work with lemmy.

            col-12 etc should not be styled, they’re part of bootstraps grid system. Neither should container.

            it would be possible to diversify the design.

            I don’t want to add a ton of custom classes, and thus force everyone in the future to use them.

            Those. Our options are very limited with or without Bootstrap.

            Please just use https://bootstrap.build/ or another site to build a theme.

            • EvgOP
              2·
              5 years ago

              I’m understood, thank you. I will watch what can be done with Bootstrap.

              • DessalinesMA
                2·
                5 years ago

                No probs, just let me know if you need any assistance. That bootstrap.build page does make it very easy to build a theme, but there are other bootstrap v4 theme creators out there.