CSS, themes, and @imports
42 views
Skip to first unread message
Russel Winder
Sep 6, 2016, 4:09:49 AM9/6/16
to nikola-discuss
I am trying to correct long-standing apparent problems I found with CSS handling in a Nikola generated site. I am hoping this is just me not understanding, or if there is a problem it is easy to fix.
I have a site that uses Bootstrap3 and local a theme with bootstrap3 as parent.However:
1. There seemed no way to add an @import to get webfonts without copying the bootstrap.css file into the theme and editing it. Relying on the bootstrap3 parent appears to mean that there is no way of getting the @import statement as the first one, which apparently is required for it to work. I am beginning to wonder if relying on the default bundling and use of custom for the overides is not feasible with webfonts.
2. Having a custom.css file of overrides of Bootstrap values seems to not work. I know that in CSS it should, but it appears not to. Always the Bootstrap values win over my values. Clearly there is something wrong with what I am doing here since the CSS and Nikola documentation say this is the way to do things. For example in my custom.css I have:
body {
color: #eeeeee;
background-color: #222222;
}
and yet the rendering remains resolutely Boostrap default. Given I eventually have to have bootstrap.css in the theme to get the @import statement as first statement, I am able to just edit the values in that file to get the effect. Remove the copy and rely on the Nikola copy and the custom.css values are ignored even though they come later. This just seems totally "broken", but I am clearly a CSS beginner not understanding why it is going wrong.
Any constructive help most welcome.
Chris Warrick
Sep 6, 2016, 10:59:27 AM9/6/16
to Nikola—Discuss
On 6 September 2016 at 10:09, Russel Winder <russel...@gmail.com> wrote:
> I am trying to correct long-standing apparent problems I found with CSS
> handling in a Nikola generated site. I am hoping this is just me not
> understanding, or if there is a problem it is easy to fix.
>
> I have a site that uses Bootstrap3 and local a theme with bootstrap3 as
> parent.However:
>
> 1. There seemed no way to add an @import to get webfonts without copying the
> bootstrap.css file into the theme and editing it. Relying on the bootstrap3
> parent appears to mean that there is no way of getting the @import statement
> as the first one, which apparently is required for it to work. I am
> beginning to wonder if relying on the default bundling and use of custom for
> the overides is not feasible with webfonts.
Do you really need @import at the very top? If this is necessary, you
> I am trying to correct long-standing apparent problems I found with CSS
> handling in a Nikola generated site. I am hoping this is just me not
> understanding, or if there is a problem it is easy to fix.
>
> I have a site that uses Bootstrap3 and local a theme with bootstrap3 as
> parent.However:
>
> 1. There seemed no way to add an @import to get webfonts without copying the
> bootstrap.css file into the theme and editing it. Relying on the bootstrap3
> parent appears to mean that there is no way of getting the @import statement
> as the first one, which apparently is required for it to work. I am
> beginning to wonder if relying on the default bundling and use of custom for
> the overides is not feasible with webfonts.
can always put your custom CSS first, use inline CSS, or change
bundling order (by editing templates or bundles, respectively)
> 2. Having a custom.css file of overrides of Bootstrap values seems to not
> work. I know that in CSS it should, but it appears not to. Always the
> Bootstrap values win over my values. Clearly there is something wrong with
> what I am doing here since the CSS and Nikola documentation say this is the
> way to do things. For example in my custom.css I have:
>
> body {
> color: #eeeeee;
> background-color: #222222;
> }
>
> and yet the rendering remains resolutely Boostrap default. Given I
> eventually have to have bootstrap.css in the theme to get the @import
> statement as first statement, I am able to just edit the values in that file
> to get the effect. Remove the copy and rely on the Nikola copy and the
> custom.css values are ignored even though they come later. This just seems
> totally "broken", but I am clearly a CSS beginner not understanding why it
> is going wrong.
2. Check page source to make sure if your CSS file is included (if not
using bundles), or check the result all.css file to see if your custom
CSS is there.
3. Open your browser’s Web Inspector, click on the <body> element and
see what styles apply to it. Perhaps Bootstrap uses a selector that is
more important than just `body`?
--
Chris Warrick <https://chriswarrick.com/>
PGP: 5EAAEA16
Russel Winder
Sep 6, 2016, 12:53:35 PM9/6/16
to nikola-...@googlegroups.com
On Tue, 2016-09-06 at 16:59 +0200, Chris Warrick wrote:
> […]
actually tried it without in an active sense.
I created a separate imports.css file with the import in it and a
bundle file that prefixed it to the rest and it all seemed to work. I
am not sure how this would work without bundling.
Bizarrely Firefox found the font without the @import (and hence the
@font-face definitions), but Chrome and Epiphany needed them. Weird
that Firefox didn't.
> > […]
the replication of values, so I acted, and replaced the custom CSS with
a custom LESS file and the bits to ensure Nikola does the right thing.
One I had twigged you have to run "nikola build" twice to get the
generated CSS code in the bundle. It all just worked. I am sure one of
your checks would have failed, I must have been doing something wrong.
However now I have things working in the way they should work, I am not
sure I can face going back to chase this one down. I suspect a missing
; or something equally annoying.
Thanks for taking time to help me on this one, the support has been
much appreciated.
--
Russel.
=============================================================================
Dr Russel Winder t: +44 20 7585 2200 voip: sip:russel...@ekiga.net
41 Buckmaster Road m: +44 7770 465 077 xmpp: rus...@winder.org.uk
London SW11 1EN, UK w: www.russel.org.uk skype: russel_winder
> […]
>
> Do you really need @import at the very top? If this is necessary, you
> can always put your custom CSS first, use inline CSS, or change
> bundling order (by editing templates or bundles, respectively)
I read somewhere that it had to be, and I believed them – I haven't
> Do you really need @import at the very top? If this is necessary, you
> can always put your custom CSS first, use inline CSS, or change
> bundling order (by editing templates or bundles, respectively)
actually tried it without in an active sense.
I created a separate imports.css file with the import in it and a
bundle file that prefixed it to the rest and it all seemed to work. I
am not sure how this would work without bundling.
Bizarrely Firefox found the font without the @import (and hence the
@font-face definitions), but Chrome and Epiphany needed them. Weird
that Firefox didn't.
> > […]
>
> 1. Reload the site ignoring cache (Ctrl+Shift+R)
> 2. Check page source to make sure if your CSS file is included (if
> not
> using bundles), or check the result all.css file to see if your
> custom
> CSS is there.
> 3. Open your browser’s Web Inspector, click on the <body> element and
> see what styles apply to it. Perhaps Bootstrap uses a selector that
> is
> more important than just `body`?
I was going to use LESS (or Sass, but I plumped for LESS) to avoid all
> 1. Reload the site ignoring cache (Ctrl+Shift+R)
> 2. Check page source to make sure if your CSS file is included (if
> not
> using bundles), or check the result all.css file to see if your
> custom
> CSS is there.
> 3. Open your browser’s Web Inspector, click on the <body> element and
> see what styles apply to it. Perhaps Bootstrap uses a selector that
> is
> more important than just `body`?
the replication of values, so I acted, and replaced the custom CSS with
a custom LESS file and the bits to ensure Nikola does the right thing.
One I had twigged you have to run "nikola build" twice to get the
generated CSS code in the bundle. It all just worked. I am sure one of
your checks would have failed, I must have been doing something wrong.
However now I have things working in the way they should work, I am not
sure I can face going back to chase this one down. I suspect a missing
; or something equally annoying.
Thanks for taking time to help me on this one, the support has been
much appreciated.
--
Russel.
=============================================================================
Dr Russel Winder t: +44 20 7585 2200 voip: sip:russel...@ekiga.net
41 Buckmaster Road m: +44 7770 465 077 xmpp: rus...@winder.org.uk
London SW11 1EN, UK w: www.russel.org.uk skype: russel_winder
Roberto Alsina
Sep 6, 2016, 12:55:23 PM9/6/16
to nikola-...@googlegroups.com
Can you file a bug about that "having to run nikola twice" thing?
--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Russel Winder
Sep 7, 2016, 5:35:56 AM9/7/16
to nikola-...@googlegroups.com
On Tue, 2016-09-06 at 16:55 +0000, Roberto Alsina wrote:
> Can you file a bug about that "having to run nikola twice" thing?
>
Done. Issue 2495.
> Can you file a bug about that "having to run nikola twice" thing?
>
https://github.com/getnikola/nikola/issues/2495
Reply all
Reply to author
Forward
0 new messages