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.

Themes & Styling

Change css style of inline code

theme

Solved by pamtbaau View solution

Started by Tonda Fischer 5 years ago · 4 replies · 783 views
5 years ago

Hello. I have problem with change styling of inline code, typically example of inline code.
I'm using quark theme. I tried append this to the grav/user/themes/quark/css/custom.css:

CSS
code {
    font-size: 85%;
    line-height: 1.25;
    padding: .1rem .2rem;
    color: #e4e4e4;
    border-radius: .1rem;
    background: #414146;
}

I tried to changed css-compiled/spectre.css, and spectre.min.css
I tried to clean caches, restart nginx, restart server, but no success. The inline code has still red color, which is very different against standard code highlights for multilines.

Can you give me correct guide, how to change correctly inline code color and background? Thanks.

5 years ago

@raven2cz, I've tried to reproduce your issue, but can't...

  • I'm using a fresh install of Grav 1.1.18 + Admin.
  • Windows 10/WSL (Ubuntu 20.04, Apache, PHP 7.4.3), Chrome
  • Added the following css to '/user/themes/quark/css/custom.css':
    CSS
    code {
      color: blue;
    }
    

The <code> tags in '/typography' have changed into blue immediately.

By the way, this is not how it should be done... You should create an inherited theme and add '/css/custom.css' to your inherited theme. Any changes you make in Quarks folder will be overridden once Quark gets updated.

last edited 07/29/21 by pamtbaau
5 years ago

According to your description. I downloaded fresh install of grav+admin 1.7.18. I set custom.css and set your config.

But the 'inline code' is still red. Nothing change. I cannot agree with your result.

I tried to create my quark too, and configure it. But still it is red, not change.
If I tried to change shift+ctrl+i in firefox and find the element and change the css, it is changed, so element is called code.

Do you call some recompile of template? Or something else?
And what about php version, or some nginx settings, is it possible that it can have some influence to it?

grav-theme-quark-bug|556x500

last edited 07/28/21 by Tonda Fischer
5 years ago Solution

@raven2cz,

Do you call some recompile of template? Or something else?

If I had made any more changes or steps, I would have mentioned it...

And what about php version, or some nginx settings

I've added my config to my previous reply.

Questions:

  • Is 'user/themes/quark/css/custom.css' loaded in the browser?
  • Is your custom css visible in the devtools of the browser?
  • Are you sure the cache of the browser has been refreshed?
last edited 07/29/21 by pamtbaau
5 years ago

You have right, it was cached in the browser. Thanks, it's work now ;-)

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 222 2 months ago
Themes & Styling · by Ian, 2 months ago
3 118 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 481 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 72 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 132 3 months ago