Css/custom.css for modify the font

Support Themes & Styling
1

Hello, maybe I dont understand correctly, but is it with the file css/custom.css which is presented in the notice “customization”, can be used to modify the font and how to fill it to ask for example to replace the default font, by another?
Capture du 2021-09-30 18-42-19

i’am very sory but the grav notice, not made for beginners, be tolerant please.
thank you in advance.jef

2

@jefrey, To be honest, Grav itself and its documentation have not been created with beginners in mind… And if struggling with the English docs comes on top of that, there will be a steep learning curve ahead.

Have said that…

  • Do NOT change any file below /user/themes/<theme>/.
    You will first have to inherit the theme and then make changes in your own inheriting theme. If you don’t, all your changes will be lost when the theme gets updated.
  • Not all themes provide a /css/custom.css file like Quark does. For other themes you might need other solutions to add your own css.
3

Hello, I started the theme inheritance method, and I would like to know if there are any bugs or incompatibilities with php that are known.
I can’t open grav.localhost/admin/ in the browser, I have a blank page!?
I tried the manual legacy method, and I went to step 5 and then I tried
to open " grav.localhost/admin/ " in the browser, to see what it gave concretely, but I have a blank page !?
I join you the last line of the file error.grav.log of apache2, and if you have suggestions, I thank you in advance.jef

Capture du 2021-10-01 19-23-59
Capture du 2021-10-01 19-23-59972×247 63.6 KB

I specify that the site is called “jeudi”, I just replaced by grav for a better comprehension.

4

@jefrey, I suspect you have a Yaml compatibility issue in /user/themes/mytheme/mytheme.yaml

Maybe a typo, maybe incorrect spacing.

Have you created the inherited theme using $ bin/plugin devtools new-theme ?

5

Hello Pamtbaau, I chose the manual method, and yes the error came from the yaml file, but not from the one of “mytheme”, I had to make a bad manipulation when copying and pasting, and the yaml file of quark had been modified.
It’s fixed, and I thank you, have a nice day. jef

6

It’s on purpose that I didn’t put the topic in “solved”, because I thought that if I had other problems for the continuation, I could add them, then finally I will put the topic in “solved” when all is well.
Here for example, I have a problem in the creation of a css file to modify the font, here is :

I created a “css” folder in /user/themes/mytheme, then I created a “custom. css” in /mytheme, and I wrote a test of font modification inside, see screenshot, then, I opened the site, and reloaded the page with “ctrl+shift+r”, to see the change, but it did not work, the font remains the same, I specify that the active theme is well “mytheme”, on the other hand I modified the rights for “custom.css” (-rwxrwx—), do you have a suggestion? Thank you in advance.jef

Capture du 2021-10-02 10-44-25

7

@jefrey, I cannot reproduce the font issue.

Using a fresh Grav 1.7.22 installation (on Windows using WSL2/Ubuntu 20.04), I used the following steps:

  • Ran $ bin/plugin devtools new-theme
    Chose option ‘inheritance’ and theme ‘Quark’
  • In VSCode:
    • Set option pages:theme to ‘mytheme’ in system.yaml
    • In folder /user/themes/mytheme/css (which has been generated by above command), created file custom.css and added:
      body {
  font-family: Georgia, serif;
}
  • Opened browser and most elements (except eg. <h1>–<h6>) showed the new font.

Questions:

  • I created a “css” folder in /user/themes/mytheme, then I created a “custom. css” in /mytheme

    Uhh, did you create file custom.css inside folder /mytheme or inside folder /mytheme/css?

  • Considering you mentioned issues with faulty yaml files and have setup inheritance manually instead of the less error prone CLI option, are you sure inheritance has been setup correctly?

  • Does the page show at least a ‘serif’ font?

8 
I don't understand everything, but it seems to me that you indicate the procedure to follow with CLI in the upper part of your text.

I’ll take a closer look at this method, and it’s possible that I’ll uninstall everything and start the procedure all over again, including reinstalling the site.
the answer to your question is :
the custom.css file is in mytheme/css
and the font rendered on the site is “ubuntu”, it is easily recognizable.

9

Hello, not being able to modify the font through custom.css with a new theme installation in manual, I followed the advice and installed devtools then wrote in console :

bin/plugin devtools new-theme
but here is the message back:

Capture du 2021-10-06 10-18-57
Capture du 2021-10-06 10-18-57725×398 38.9 KB

what to do about it?

10

@jefrey, Well something is definitely wrong with your environment…

There has been one issue logged in 2016 related to security.yaml.
You also might want to take a look at the Troubleshooting docs.

I’m afraid I cannot help you any further.

11

Hello, in fact my problem was mainly a problem of comprehension of the functioning of the css, I worked since and quite slowly I learn in these domains, that goes much better. thank you