Tailoring background colors for individual pages

support
1

Hi,
I want diffrent body background-colors on every site of my website. For example home, logos and sketches all other colors.

What would be the best way?

2

Add an id attribute based on .Page.Path to the body element.

3

Thanks.. will test it in a few days.
Do you have got may be an example?

Here is my baseof html:

<!DOCTYPE html>
<html lang="de">

<head>
    {{ partial "head.html" . }}
</head>

<body>

    {{ "<!-- CONTAINER START -->" | safeHTML }}
    <div class="container">


        {{ "<!-- PRELOADER START -->" | safeHTML }}
            {{ partialCached "preloader.html" . }}
        


        {{ "<!-- NAVBAR START -->" | safeHTML }}
            {{ partialCached "navbar.html" . }}
        


        {{ "<!-- HEADER START -->" | safeHTML }}
            <header>
                {{ block "header" . }}{{ end }}
            </header>
        


        {{ "<!-- MAIN START -->" | safeHTML }}
            <main>
                {{ block "main" . }}{{ end }}
            </main>
        


        {{ "<!-- FOOTER START -->" | safeHTML }}
            {{ partialCached "footer.html" . }}
        
    </div>
</body>
</html>

my single html:

{{ define "header" }}
<h1 class="main-headline">{{ .Title }}</h1> 
{{ end }}

{{ define "main" }}
    <div class="main-template image-template">    
        {{ .Content }}
    </div>    
{{ end }}

Shall I change the background-color of my main tag?

4

You can do something like this:

{{ $id := or (replace (strings.TrimLeft "/" .Path) "/" "_") "home" }}
<body id="{{ $id }}">
file path id
content/_index.md home
content/posts/post-1.md posts_post-1

Then target the id in your CSS.

#posts_post-1 {
  background-color: #f00;
}
2 Likes
5

Thanks for your help. :+1:
Your solution works fine, but I want to change more then one thing. I expressed myself wrong. I would like to change header, main and footer for example.

6

Adjust the selector:

#posts_post-1 header {
  background-color: #f00;
}
7

It is not working some how..
If i do this:

<!DOCTYPE html>
<html lang="de">

<head>
    {{ partial "head.html" . }}
</head>

<body>

    {{ "<!-- CONTAINER START -->" | safeHTML }}
    <div class="container">


        {{ "<!-- PRELOADER START -->" | safeHTML }}
            {{ partialCached "preloader.html" . }}
        


        {{ "<!-- NAVBAR START -->" | safeHTML }}
            {{ partialCached "navbar.html" . }}
        


        {{ "<!-- HEADER START -->" | safeHTML }}
            {{ $id := or (replace (strings.TrimLeft "/" .Path) "/" "_") "home" }}
            <header id="{{ $id }}">
                {{ block "header" . }}{{ end }}
            </header>
        


        {{ "<!-- MAIN START -->" | safeHTML }}
            {{ $id := or (replace (strings.TrimLeft "/" .Path) "/" "_") "home" }}
            <main id="{{ $id }}">
                {{ block "main" . }}{{ end }}
            </main>
        


        {{ "<!-- FOOTER START -->" | safeHTML }}
            {{ partialCached "footer.html" . }}
        
    </div>
</body>
</html>

My CSS:

#logos header {
  background: #151515;
}

#logos main {
  background: #151515;
  background: linear-gradient(325deg, rgba(21, 21, 21, 1) 0%, rgba(154, 205, 50, 1) 69%, rgba(21, 21, 21, 1) 87%);  
}

May be this it, because I have got two ID’s with the same name, or multi-lang? I do not know. My MD-File is called logos.md

8

This is really basic CSS stuff, which is out-of-scope for this forum.

The generated id attribute is for the entire page, and should be applied to the body element per my example. Add class and/or id attributes to other elements as needed. And yes, you should never duplicate id attributes on a page.

9

OK thanks, I got it now.
Every day a bit more :slight_smile:

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.