Overriding CSS file in a layout

Help
1

Please bear with me. I’m really trying to wrap my head around all this.

I have a layout. This layout has an include for the header section of the HTML file. In the include file (where the header code is kept), a CSS stylesheet is defined. All of this works fine.

Now, I want to create a second layout. This second layout should be exactly the same as my first layout, but I want to change 2-3 values in the CSS file.

I thought the way to do this would be to inherit the first layout and just override/redefine the specific CSS that I wanted to change. This way, I could still make changes to the first layout and change both the first and second layouts. (Since they’re 95% identical).

However, I cannot figure out how to actually do this. My question is how can I go about doing this, or is this even possible?

It makes sense that this is possible so I don’t have two copies of the same code floating around. But I can’t get it to work.

Any guidance or advice is appreciated. Thank you.

Things I've tried

  • I’ve tried creating a second layout with layout1 in the front matter and the additional CSS in the body. However, the CSS in this second layout file is stuck inside the {content} tag of layout1.

  • I’ve tried adding the additional CSS in an include, but the CSS is not appended to the header, it gets appended right at the top of the {content}.

2

What is the reason to do it this way vs just putting all the various css into the one file?’

When you say you want to change 2-3 values in the css, do you mean you actually want that one css file to be different depending on the layout? I don’t think so, but the way you worded it makes it sound like it.

I obsess sometimes over not having too much css, a couple times I wanted to add a page that needed a semi complicated css file that I didn’t want to just add to the main css, so in my head include I added an if statement to check the url - if the url contained gallery then I added a second reference to the head to import the gallery.css file.

If you have an include that gives you all the head stuff, then I think that is where you want to do whatever you are trying to do, rather than in the layout files.

3

So you have 2 style sheets, some pages use one and some pages use the other? This is the same principal as having different titles on each page. For example, if you have styles1.css and styles2.css then in the front matter of each page define:

pagestyle: styles1
or
pagestyle: styles2

Then in the head include, put something like this:
<link rel=“stylesheet” href="/css/{{ pagestyle }}.css">

But really, like rdyar, I have to ask why? if there are only a couple of differences why can’t you use different class names for them. If, for example, it was different page widths, you might have:

.page-width: 40rem;

change this to:

.narrow-page: 40rem;
.wide-page: 60rem;

then you can use the relevant class on each layout.
HTH

4

How I would go about this issue is by using what I call layout-ids.

My base layout would contain body element tagged with the page’s layout-name which will then be referenced in the CSS.

<!-- _layouts/default.html -->

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body id="{{ page.layout }}">
    {{ content }}
  </body>
</html>

Now when a page uses a layout that inherits from this base layout, body element will be tagged accordingly.

e.g about.html generated with a layout called page will have the markup as:

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
  </head>
  <body id="page">
    <div class="box">
      Content from <code>about.md</code>
    </div>
  </body>
</html>

Now in my stylesheets, I can style with greater control

.box { width: 300px; padding: 15px; }
#page .box { font-weight: 700; background-color: #cdcdcd; }
#post .box { color: #454545; background-color: #eaeaea; }
1 Like
5

@ rdyar: I put all the CSS in one file, how would I specify which layout the specific page needed?

I want to have two CSS files. However, the second is exactly the same as the first except for 2-3 changed values.

I was hoping to ‘create’ the second CSS file by telling to take the first CSS file and just change A, B and C. In other words, (CSS file 2) = (CSS file 1) + (3 changes).

An if statement in an include sounds like it could work. I will see if I can get it working.

Thank you for your response.

@lenzjo:

So you have 2 style sheets, some pages use one and some pages use the other?

Yes.

in the front matter of each page define:

pagestyle: styles1
or
pagestyle: styles2

Then in the head include, put something like this:

I think this could work.

I’d still have to have duplicate CSS files (except for the 3 changes), but that’s not the worst situation.

Thanks for the response.

@ashmaroli: I think your idea will work and I also think it’s what I was trying to do.

So you have a default layout that both your post layout and page layout build on. (Extend?)

I have a “layout1” that I was trying to build a “layout2” off of. What I should do is make a “default” layout and have “layout1” and “layout2” to start with the “default” and define their differences. I will see if I can get this working.

Thanks for the response.

7

this just sounds like a lot of duplication. Without understanding what it is you want to do exactly it is hard to give a good answer, but having 2 css files with only minor differences is not likely to be the best answer.

I really like @ashmaroli s idea, that could be pretty powerful.

1 Like
8

This just sounds like a lot of duplication. Without understanding what
it is you want to do exactly it is hard to give a good answer, but
having 2 css files with only minor differences is not likely to be the
best answer.

And that’s why I made this thread. I thought the same thing. Surely there’s some way to ‘import’ the first layout and simply add the simple CSS changes to it. It makes sense in theory, but I’m not skilled enough to actually do it.

I purposely kept my answer general because I thought it would be easer to respond to if you didn’t have to worry about the specifics of my situation.

My goal is to create a second layout that is virtually identical to a layout that exists. The only difference in the second and first layout is 3 values in a CSS file that the first layout uses.

My situation specifics:

I’m using the Jekyll Compass theme to create a basic personal website. The theme is designed to be a single page. I’d like to add 2-3 extra pages to my site. I want these pages to have more room for content. So I want these pages to be the same as the default layout, but adjust the left column spacing. By default, it’s close to 50-50 left column, right column split. I want the extra pages to have a 25-75 left column, right column split. All I want to do is create a second layout, that’s identical to the first, but has a few values in /assets/main.scss changed so I can get the spacing I want.

What confuses me is how I would actually do this. The CSS file I want to change is called in an include statement in the default layout. I need to override a few values in that CSS file, but don’t know how to do it since the CSS file is defined in a /_includes/ file.

Thanks for the response and I’d be happy to provide any extra info.

9

it sounds like you have in your css something like: .left-column {width:50%} in one and then you want to override that and make it .left-column {width:25%} in a different layout? obviously that is a simple example. Is that roughly in the ballpark?

why not just add to the css and make a new class? you could duplicate the one instead of editing it, then rename it and and change whatever values, then in your second layout change the class name of the container to whatever you named it when you duplicated it.

10

Is that roughly in the ballpark?

Yes, that’s essentially what’s going on.

why not just add to the css and make a new class? you could duplicate
the one instead of editing it, then rename it and and change whatever
values, then in your second layout change the class name of the
container to whatever you named it when you duplicated it.

This seems like it would work. I will give it a try in the morning.

Thanks.

11

Alriight, I got it working.

I apologize for this topic being confusing. I lack the understanding to accurately explain what I want to do. Thanks for working with me as I stumble through this. (I’m learning though!)

What confused me the most was how to make small changes in a file that is called by other files. What I mean is that I want to make changes in a CSS file. The CSS file is defined in a include file. And the include is defined in the layout file. (I hope that makes sense)

What I ended up doing was what @lenzjo described. I moved the layout styling away from the html header include and into the main layout html file. I now define the <head> and </head> elements in the layout html file. Then I added a line that defined an additional stylesheet. I used a liquid tag to determine which layout I wanted. So I had a front matter that said CSS-file: 1 or CSS-file: 2 and this would point to a file 1.scss or 2.scss.

Using other words, now I use one Jekyll layout. I have broken out the CSS that controls the layout into their own individual files. I use a front matter tag to call the layout stylesheet that I want. (The stylesheet that controls everything else is always called)

I hope that makes sense. What I learned is that there are multiple ways to create different layouts in a Jekyll site. I thought I had to create a new file in the _layouts folder. I also learned some other ways to create layouts, like how @ashmaroli described.

One improvement over the solution that I made is that I might be able to make is putting the liquid tags that call different layout CSS files in the html header includes file. A minor difference, but overall fewer changes compared to ‘stock’. I modified the html header includes file because I thought the liquid tags had to be used in the Jekyll layout file.

Thank you all for the help!