Custom.css and theme inheritance (Clean Blog theme)

1

I have been working with a few child themes, seeing which provides a good foundation for a site (rather than starting from scratch), or just some elements to borrow.

I have moved onto Clean Blog. I have customised some templates without issue.

However, I seem unable to have styles in a custom.css file apply to my test site (MAMP on OSX). I have created an entry in the Asset manager for the file (as I have with previous child themes):

{% block stylesheets %}
    {% do assets.addCss('theme://css/custom.css', 100) %}
    {% do assets.addCss('theme://vendor/bootstrap/css/bootstrap.min.css', 98) %}
    {% do assets.addCss('theme://css/clean-blog.min.css', 98) %}
    {% do assets.addCss('theme://vendor/font-awesome/css/font-awesome.min.css', 98) %}
    
    {% if browser.getBrowser == 'msie' and browser.getVersion <= 8 %}
        {% do assets.addCss('theme://css/ie.css') %}
    {% endif %}
{% endblock %}

I may be missing something? Any suggestions appreciated.

1 Like
2

@avolve Some questions/suggestions that come to mind:

  • If you want to override styles from other stylesheets, the custom.css file should be included as last and not as first stylesheet.
  • Are your sure that that custom.css is indeed loaded in the browser?
  • Are you sure the selector in custom.css is as, or is more specific as selectors in other stylesheets for the same element?
1 Like
3

appreciate the reply @pamtbaau

I moved the

{% do assets.addCss('theme://css/custom.css') %}

to the bottom of the list, and can confirm it is loaded (listed in head). Yet no custom css is applied to my child theme (or not listed as being overridden).

Clean Blog uses gulp to minify the css, and I am thinking this may be the issue??

4

Can I look at it somewhere?

5

I have a copy online at http://grav.avolvedesigns.net/the-urban-jungle

I added some custom elements to the template for the single post (item.html.twig) as well as a custom.css file (which is loaded). CSS for these custom elements are applied (not all on the above link, seems to be a caching issue or something else — as they are not applied on the local install, though not initially and only after coming back to work on the design a few days later. I have disabled cache and will investigate further).

Changes to the css for existing elements (i.e. .intro-header .page-heading) are not being implemented. Why, I am yet to ascertain.

6

@avolve I am afraid you seem to have overlooked the outer curly braces in the media queries. Try the following:

@media only screen and (min-width: 768px) {  <--- missing
  .intro-header .post-heading {
	  padding-top: 350px; /* adds 100px to move down, compensate for reduction below */
	  padding-bottom: 50px;
  }
} <--- missing

Hm… I wonder which IDE you’re using :wink:

7

much appreciated @pamtbaau. It’s always the little things we overlook after staring at code for hours :roll_eyes: