Background color of markdown pre formated text

Hello,

My theme is my_theme and it is inherited from quark theme.

I try in my custom.css file to change the background color of a pre formated texte but I didn't find out how to do.

I want to use markdown, I could do it with [code]<pre> </pre>[/code] html tags easily but I would like not to have to use [code]<pre> </pre>[/code] tags in my page. Is it possible ?

in my page I have a pre formated text
[code]
my texte
[/code]

in my css I tried this, but it doesn't change the background that stay white
[code]
pre
{
background:#AA8811;
}
[/code]

Thanks

@thgr, You probably have a conflict with existing css from Quark:

theme.min.css

pre code, pre.xdebug-var-dump {
  ...
  background: #fafafa;
}

and spectre.min.css

code {
  ...
  background: #fcf2f2;
}

@pamtbaau, Should I modify this files instead of using custom.css in my_theme ?

@thgr, If the theme is correctly setup, the custom.css file should be loaded last. This way, selectors with equal specificity in custom.css will override prior selectors.

In your case, the selector pre code from theme.min.css has a higher specificity then pre used in your custom.css. Hence, the background from theme.min.css wins.

Try using the same of higher specificity in your custom.css like:

pre code {
 background: red;
}

@pamtbaau:
If the theme is correctly setup, the custom.css file should be loaded last

So my_theme is not correctly setup and I don't know why.

I know that in css (Cascading Style Sheets) the last one override prior selectors.

I found this solution
[code]
pre code {
background: #CCBBBB !important;
}
[/code]

thank's

@thgr, That's not a solution, that's brute force and is considered a bad practice...

So my_theme is not correctly setup and I don’t know why.

If you followed Inheriting using the CLI when creating an inheriting theme from Quark, !important should not be needed.

Hello,

@pamtbaau

https://learn.getgrav.org/17/themes/customization#inheriting-using-the-cli

The first time I already did it this way but I tried again, and with the same result :

Point 2/

[code]
user@monpc~/public_html/grav$ bin/plugin devtools new-theme

Enter Theme Name:

mytheme2

Enter Theme Description:

mytheme2

Enter Developer Name:

user

Enter GitHub ID (can be blank):

Enter Developer Email:

@.net

Please choose an option:
[pure-blank ] Basic Theme using Pure.css
[tailwind ] Basic Theme using tailwind.css
[inheritance] Inherit from another theme
[copy ] Copy another theme

Inherit from another theme

Please choose a theme to extend:
[0] mytheme
[1] quark

1

SUCCESS theme mytheme2 -> Created Successfully

Path: /home/user/public_html/grav/user/themes/mytheme2
[/code]

Point 4/ It's strange because it is already done :

Copy the “form” section from /user/themes/quark/blueprints.yaml file into /user/themes/mytheme/blueprints.yaml in order to include the customizable elements of the theme in the admin. (Or simply replace the file and edit its content.)

My css grav/user/themes/mytheme2/custom.css is working but not for pre code tags

[code]
pre code {
background: #CCBBBB;
}
[/code]

@thgr,

My css grav/user/themes/mytheme2/custom.css is working but not for pre code tags

Maybe a typo, but the custom.css file should be in folder user/themes/mytheme2/css

I've again walked the steps again using a fresh Grav install, and it is working perfectly. Page Typography shows a block-quote on which it works fine.

• Would you mind copying the HTML section where the css files are being loaded?
• Can I access your site somewhere?

@pamtbaau:
Would you mind copying the HTML section where the css files are being loaded?

<link href="/user/plugins/markdown-notices/assets/notices.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/external_links/assets/css/external_links.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/login/css/login.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css-compiled/spectre.min.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css-compiled/theme.min.css" type="text/css" rel="stylesheet">
<link href="/user/themes/mytheme/css/custom.css" type="text/css" rel="stylesheet">
<link href="/user/themes/quark/css/line-awesome.min.css" type="text/css" rel="stylesheet">

I notice the last line is not
/user/themes/mytheme/css/custom.css
but
/user/themes/quark/css/line-awesome.min.css