Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Custom.css and theme inheritance (Clean Blog theme)

Solved by pamtbaau View solution

Started by colin avolve 8 years ago · 6 replies · 855 views
8 years ago

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):

<pre>
{% 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) %}

TWIG
{% if browser.getBrowser == 'msie' and browser.getVersion <= 8 %}
    {% do assets.addCss('theme://css/ie.css') %}
{% endif %}

{% endblock %}
</pre>

I may be missing something? Any suggestions appreciated.

👍 1
8 years ago

@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
last edited 11/18/18 by pamtbaau
8 years ago

appreciate the reply @pamtbaau

I moved the

TWIG
{% 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??

8 years ago

Can I look at it somewhere?

8 years ago

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.

8 years ago Solution

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

CSS
@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 ;-)

last edited 11/26/18 by pamtbaau
8 years ago

much appreciated @pamtbaau. It's always the little things we overlook after staring at code for hours 🙄

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 82 12 hours ago
General · by pamtbaau, 17 hours ago
1 55 16 hours ago
General · by Andy Miller, 1 day ago
0 45 1 day ago
General · by Marcel, 12 months ago
6 348 5 days ago
General · by Duc , 5 days ago
3 43 5 days ago