Change color and logo

[corentincharron]

Hello, I'm new to Grav, and feeling a bit lost.

What would be the simple way to customize the theme main color and the logo image?

Thanks a lot.

[matchavez]

This is the most basic consideration for a theme. It may not do much else, but a theme is by its definition something that should be adaptable.

It would be appropriate to make it simple to upload a logo and change the search text.

[CallMeKlep]

Same here...

At this point I'm considering at attempt at creating a theme from scratch. Adapting existing themes seems nearly as tedious as WordPress :(

[rhukster]

This is not platform specific stuff guys. You are asking about basic web development skills. HTML, CSS, image editing etc. Grav is not trying to replace the web developer, it's just making the job of building sites easier. This also goes for themes, it makes building the frontend stuff easier, it enables and empowers web developers to get stuff done quicker, but you still have to have the basic understanding.

I strongly suggest that if you don't know where to start, take a free course to give you the basics of HTML and CSS:

• https://www.codecademy.com/learn/learn-html
• https://learn.shayhowe.com/html-css/
• https://www.learn-html.org/

This knowledge will save you time in the long run.

Combine this HTML/CSS skill with some basics about Grav (https://learn.getgrav.org) and you would quickly be able to find the relevant file in Learn2 /user/themes/learn2/templates/partials/base.html.twig and then see where the logo is added:

https://github.com/getgrav/grav-theme-learn2/blob/develop/templates/partials/base.html.twig#L48

Then you can replace this with some text, like: <h1>Site name</h1>.

The color can be set via CSS in a custom css file which you can create here: user/themes/learn2/css/custom.css

Then you can set the color using this CSS:

.logo h1 {
  color: #c0392b;
}

Where that color is a hex value for an orange/red.

NOTE: Updated to reference Learn2 rather than Quark as I originally linked.

[matchavez]

Now hang on a second... that's quite pedantic. No one is saying they don't understand HTML. But just consider how many things the Learn2 theme does for you, but it doesn't variable-ise the logo and the colour. Fortunately, someone else felt it was annoying and difficult, and did the Learn2-git-sync (Hibbitts). It at least changes the logo to the title, and adds a few colour options.

The reason that's important isn't because it's HTML-impossible. The reason is that each time you update the theme, you'd have to re-construct the changes you've hardcoded, or eschew the theme update. Each time Grav rolls another version, each theme has to consider updating. You know this. That's why it's incredibly surprising that you are throwing out Code Academy.

I came on here to ask that the Grav team Learn2 version of the theme should offer those basic options specifically because it's better when you can make those changes and not then have to choose in 3-6 months whether to repeat those steps with a new version of the theme (assuming they're also the same), or to decline the new theme update and stay out of date and more subject to the foibles of old code.

If you want to treat your free themes as second-class, that's your choice. But at least don't treat those of us who were digging into Grav and trying to figure out where this sits, as if we're incompetent. Truly a shame, given how much you know.

[matchavez]

This is not platform specific stuff guys. You are asking about basic web development skills. HTML, CSS, image editing etc. Grav is not trying to replace the web developer, it's just making the job of building sites easier. This also goes for themes, it makes building the frontend stuff easier, it enables and empowers web developer to get stuff done quicker, but you still have to have the basic understanding.

I strongly suggest that if you don't know where to start, take a free course to give you the basics of HTML and CSS:

https://www.codecademy.com/learn/learn-html

This one is free, and only 4 hours of your time. This knowledge will save you time in the long run.

Thank you for editing your original comment.

[matchavez]

Hello everyone,

This is a follow-on to Andy's instructions, with the appropriate corrections.

To change the "logo" GRAV image in the Learn2 theme, you need to do the following steps:

1. In user/themes/learn2/templates/partials/logo.html.twig, you'll need to comment out or remove the text that exists. Be aware that this is a vector-based SVG file, and not an image to be swapped out. Comments in twig are done with {# thisisallcommentedout #} or you can remove ALL of the text without harm. In the example, you may want to put in something like <h1>Example</h1> to insert some text.

2. Create a new file called user/themes/learn2/css/custom.css and add the following to it:

a#logo h1 {
  color: #ff0000;
}

#header {
  background: #000000;
}

!! Please note that the prior instructions weren't using a css Class ID. Use the #, not the ..

Edit: Using a#logo above allows you to use any H; 1-6.

---

This part is for Andy. I want to note a few assumptions that you made, and why it's difficult to use this kind of theme. Learn2 is just a "Read The Docs" knock-off, but it's very handy and I imagine it's your second-most commonly used theme behind Antimatter/Quark. The theme is actually quite amazing in that it has settings for things like Top Level Version and your Google Analytics code. Those are incredibly handy, survives updates, and avoids a lot of hand-coding.

Learn2 is a very handy theme. The surprising part is that in order to make these changes, you have to first dig through code -- something you'd assume wouldn't be hard given that the Top Level option and GA Code is an order of magnitude more difficult -- but you do. (There's even a difference in colour between Grav docs and the theme!) No problem, really. However in order to figure out how to do it, you have to know how Twig works with partials. You also have to see that within this .twig that you're just learning about, it's actually not putting out CSS, but it's an include of an SVG file that is highly unusual. I've seen a lot of websites, but this is the only one I've ever seen that uses vector maps to draw the main logo. And then, once you figure out that's an SVG, then you'd have to know that you can put straight HTML in. Fortunately, your link above got me past that hurdle, after reading up specifically on Twig (and not HTML nor CSS).

All of this is to make the point that I hope that you update the theme someday to just take these two values... either have an image upload or text, and a background colour. I know you were probably venting out some Friday afternoon frustrations, but you made some of the same mistakes we made in finding these things. I hope you don't underestimate the people that engage you about your excellent product. I know you're in the business of selling themes, and I don't want to say that you owe us anything. I like your software, and I appreciate the fact that it's FOSS. That's amazing. I'm glad you took the time to edit your posts several times and add the information here that helped me eventually find what I was looking for. I only felt that it was very important to pass on the concept that as someone new to the theme, basic settings are, as of 1.7, not intuitive.

---

[https://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_svg](url https://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_svg)
Using this link and dumping this text will demonstrate the Grav SVG logo:

<!DOCTYPE html>
<html>
<body>

<svg id="logo-svg" viewBox="0 0 444 102" style="background-color:#ffffff00" version="1.1"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
	x="0px" y="0px" width="444px" height="80px"
>
	<path d="m87.503 53.977h-10.642c-1.616 0-2.93 1.315-2.93 2.936v20.418l-0.21 0.175c-6.263 5.278-14.182 8.18-22.297 8.18-19.144 0-34.719-15.559-34.719-34.685 0-19.128 15.575-34.684 34.719-34.684 7.444 0 14.562 2.353 20.587 6.811 1.169 0.865 2.792 0.746 3.822-0.28l7.588-7.58c0.592-0.588 0.901-1.406 0.853-2.24-0.046-0.834-0.448-1.607-1.104-2.127-9.016-7.1443-20.29-11.076-31.746-11.076-28.246 0.0001-51.228 22.958-51.228 51.176-0.0005 28.219 22.982 51.179 51.228 51.179 14.584 0 28.534-6.273 38.27-17.208 0.479-0.536 0.742-1.227 0.742-1.945v-26.114c0-1.621-1.314-2.936-2.933-2.936z"/>
	<path d="m443.52 4.529c-0.54-0.8206-1.47-1.3182-2.45-1.3182h-11.58c-1.17 0-2.23 0.6957-2.7 1.7704l-32.65 75.721-33.23-75.738c-0.47-1.0634-1.52-1.7532-2.68-1.7532h-11.62c-1 0-1.92 0.4976-2.46 1.3265-0.55 0.8288-0.64 1.8753-0.23 2.7832l40.25 91.732c0.47 1.068 1.53 1.758 2.69 1.758h14.66c1.17 0 2.23-0.71 2.7-1.775l39.54-91.734c0.39-0.9055 0.3-1.9466-0.24-2.772z"/>
	<path d="m291.34 4.9642c-0.47-1.0636-1.52-1.7534-2.69-1.7534h-14.65c-1.17 0-2.23 0.6957-2.7 1.7704l-39.54 91.735c-0.39 0.9-0.3 1.946 0.24 2.766 0.54 0.828 1.46 1.328 2.45 1.328h11.58c1.17 0 2.23-0.71 2.7-1.775l32.64-75.723 33.24 75.74c0.47 1.068 1.52 1.758 2.68 1.758h11.63c0.99 0 1.92-0.5 2.45-1.328 0.55-0.831 0.63-1.878 0.24-2.788l-40.27-91.73z"/>
	<path d="m185.34 67.248l0.64-0.306c11.56-5.583 19.04-17.434 19.04-30.196 0-18.491-15.06-33.535-33.58-33.535l-42.49-0.0002c-1.62 0-2.93 1.3153-2.93 2.933v91.726c0 1.624 1.31 2.94 2.93 2.94h10.64c1.62 0 2.94-1.316 2.94-2.94v-78.17h28.91c9.42 0 17.07 7.645 17.07 17.046 0 7.84-5.33 14.64-12.97 16.53-1.38 0.348-2.75 0.523-4.1 0.523h-10.64c-1.1 0-2.11 0.622-2.61 1.607-0.5 0.984-0.4 2.164 0.25 3.057l30.17 41.143c0.55 0.754 1.43 1.204 2.36 1.204h13.22c1.11 0 2.12-0.63 2.62-1.611 0.5-0.989 0.4-2.172-0.25-3.06l-21.22-28.891z"/>
</svg>

 
</body>
</html>

Also, this shows how to use Twig comments:
[https://www.branchcms.com/learn/docs/developer/twig/comments](url
https://www.branchcms.com/learn/docs/developer/twig/comments)

[frumbert]

I don't work with Grav every day and by the time I need to come back it to i've forgotten how this all works again and have to figure it out all over again. Why can't the theme incorporate some setting somewhere with settings for this stuff? Surely this would take care of questions like this?

(mockup)

[matchavez]

That is precisely what I was thinking originally.

[ekrister]

Hi, I'm just getting to know Grav too and it seems to be pretty great! Anyway, here's what I did to change the logo of this theme to an image file:

1. As mentioned before, you need to replace the contents of the file themes\learn2\templates\partials\logo.html.twig.
   But to use an actual image, replace the contents with
   <img src="{{ url('theme://images/yourlogo.png') }}">
2. Then just put your logo file to themes\learn2\images\yourlogo.png and you're good to go!

I hope this helps someone.

[RCheesley]

Just adding my voice to the comments above, that it would be very helpful to users if there was a simple file upload feature for the logo and text box to change the text version. Maybe pushing the boat out to ask for a colour field to change the primary/secondary brand colours as well.

It's a pretty common feature in most templates I have come across and makes the entry point for users much easier. It's pretty much the very first thing you do with an off the shelf theme.

I know how to make the changes in the code now as well, so thanks for the guidance above which is also very helpful!

[chunyianliew]

I just started yesterday to play around with this theme in Grav and I am running in a logo sizing issue related to the original question.
What I have done so far is the following:

1. Created my own custom theme inheriting the learn2 theme by following the instructions I found here: https://learn.getgrav.org/16/themes/customization#theme-inheritance
2. Created a new file logo.html.twig in [grav-directory]/user/themes/[custom-theme]/templates/partials/. This file contains the svg code for the logo I want to use.

This all works fine, but I am running into a sizing issue.
The size/ratio of the logo is currently configured via the following two variables stored in [grav-directory]/user/themes/learn2/scss/theme/_configuration.scss

// Logo
$logo-width: 8rem;
$logo-height: 2rem;

But as the ratio of my logo is different, I would like to use a logo configuration width of 12rem and height of 6em.
What would be best/recommended practice to override these variables without changing the parent theme learn2?

[frumbert]

I updated grav and my customised logo, which I edited in /user/themes/learn2/templates/partials went back to being the grav logo. ARGH! I have to open SSH and get in an edit templates again. AARGH AARGH GRav WHYYYYY?????? 👎

Maybe if there was a

LOGO SETTING

this would not be a problem.

[soyermert]

Hi, I'm just getting to know Grav too and it seems to be pretty great! Anyway, here's what I did to change the logo of this theme to an image file:

1. As mentioned before, you need to replace the contents of the file themes\learn2\templates\partials\logo.html.twig.
   But to use an actual image, replace the contents with
   <img src="{{ url('theme://images/yourlogo.png') }}">
2. Then just put your logo file to themes\learn2\images\yourlogo.png and you're good to go!

I hope this helps someone.

Thanks. It works

[dafdafdafdaf]

Just wasted 30 minutes of my life to figure how to change that logo. Thanks for the help above.