Feature Request - Custom CSS

[flufftronix]

I made a few UI tweaks which I'm running client-side (put a tint on the background image, background blur on the content divs, tweaked some spacing and changed the font); would certainly be preferable if there was a call to a blank style.css in the config directory, where you could add in whatever overrides you'd like.

I poked around in the code to see if I'd be able to add that myself, and well.. not quite.

[benphelps]

It'd be easy to check and load a custom css file, but targeting elements would be hard.

The project uses Tailwind CSS so there are no element specific classes, only utility classes are used. For it to be really useful, I'd have to go through every part of the site and tag on "targeting" classes.

It's a nice idea, but I'll have to see what the best way of adding this would be.

[RichyHBM]

It'd be easy to check and load a custom css file, but targeting elements would be hard.

The project uses Tailwind CSS so there are no element specific classes, only utility classes are used. For it to be really useful, I'd have to go through every part of the site and tag on "targeting" classes.

It's a nice idea, but I'll have to see what the best way of adding this would be.

Could the targetting not be done further down the line? First allow custom CSS (I would also love for simple css to be defined in the settings.yaml that just gets loaded into the page) and then let users decide what they want to do with this feature. And then as time passes more elements can be fully targetted using the method you describe

As an example of what I use it for:
#page_container > .container > div:nth-child(1) > .self-center > .text-center { text-align: left; } which seems to work fine for making the labels on the resources elements to be left aligned

[flufftronix]

For reference, here are the overrides I'm using:

body {
   font-family: "Google Sans";
   opacity: .8;
   }

.border-theme-300, .border-theme-800 {
   border: 0;
   }

.border-theme-800 {
   margin: 30px 45px 0 35px;
   }

h2 {  
   margin-bottom: -10px;    
   }

.text-left > .flex div .opacity-50 {
   color: #fff !important;
   }

.items-start {
   padding-top: 0;
   }

.h-15 {
   border-radius: 12px;
   margin: 10px 10px 10px 0;
   opacity: .75;
   backdrop-filter: blur(8px) !important;
   background: rgba(255,255,255,.15) !important;    
   }

.text-left.cursor-pointer > .flex div:nth-child(2) {
   margin:5px 5px 5px 0;       
   padding-left: 0 !important;   
   }

img {
   width: 38px; 
   height: 38px;
   margin: 10px;
   position: relative;
   left: 10px !important;
   }

.px-2.flex-1 {
   margin-left: 15px;       
   }

.rounded-l-md {
   padding: 10px !important;       
   }

.grow .text-xl {
   margin-bottom: 10px;
}

#__next .fixed {
   background-image:
   linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)),
   url(https://source.unsplash.com/random/?dark+lush+forest&auto=format&fit=crop&w=2560&q=80)
   !important;
   }

Loading these browser-side automatically via the Magic CSS extension.

Might be able to include this by overriding a CSS file via docker-compose.yaml, just haven't had a chance to tinker with that yet.

[JesseWebDotCom]

@benphelps - any more thought to this? Maybe just to start, can you add and import a blank config/custom.css? That would at least allow us to have direct css access like mentioned above (ex. .text-left.cursor-pointer > .flex div:nth-child(2)). Thanks

[shamoon]

That does not work, css is compiled at build time.

[JesseWebDotCom]

That does not work, css is compiled at build time.

Sure but you do not need to mix custom css with tailwind. Just create an empty public/custom.css and add a link to the stylesheet in the head section (in index.jsx). Then people can map a volume of their own file to the empty file.

[shamoon]

https://nextjs.org/docs/messages/no-stylesheets-in-head-component

[JesseWebDotCom]

I got this working in a hacky way:

• download the compiled css and saved to your data directory (ex. f2c4a203e63efddc.css)
• add desired css to the top of the file
• volume map the file (so yours loads, not the one in the container)

    volumes:
      - ./data/homepage/f2c4a203e63efddc.css:/app/.next/static/css/f2c4a203e63efddc.css

• restart the container (and force refresh your browser window)

Here's a snippet of my css file:

/* START OF CUSTOM ----------------------------------------------------- */

/* fix padding between first cards */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-x-2.mt-3 li:first-child {
    padding-right: 10px;
}

/* spacing between cards */
.gap-x-2 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
}

/* drop shadow */
.shadow-md {
    --tw-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5) !important;
}

/* body */
body {
    font-family: Raleway,sans-serif;
    font-size: 18px;
}

/* service title */
.flex-1.px-2.py-2.text-sm.text-left {
    font-weight: bold;
    font-size: 17.6px;
}

    /* cards */
:is(.dark .dark\:bg-white\/5) {
    border-radius: 15px;
    background-color: rgba(24, 28, 58, 0.8) !important;
    padding: 10px;
}

:is(.dark .dark\:bg-white\/5):hover {
    top: -2px;
}

/* search box - inner text */
:is(.dark .dark\:text-white) {
    font-size: 18px;
}

/* search box - icon */
.w-3 {
    width: 1rem;
}
.h-3 {
    height: 1rem;
}

/* subtitle */
.text-theme-500 {
    font-size: .9em;
    font-weight: 500;
    padding-top: 5px;
}

/* error box */

:is(.dark .dark\:bg-rose-900) {
    display: none;
}

/* detail boxes */
:is(.dark .dark\:bg-theme-900\/20) {
    background-color: rgb(var(--color-900)/.5);
    border-radius: 10px;
}
 /* END OF CUSTOM ----------------------------------------------------- */
 
 /*
! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com
*/

/* etc, etc, etc.... */

[JesseWebDotCom]

Current front page with custom css:

[JesseWebDotCom]

Mobile view:

[shamoon]

Closed by #1950, great work 🚀

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns.