Attached CSS files language-specific?

Kirby 2 Solved ✅
,
1

Hi there, thanks for your support!

I added custom.de.css to my page and the CSS is loaded properly. How cool! But I also added custom.en.css to the page since the entire thing is build for multi-language use.

It seems, one css file overwrites the other for both languages. Is it possible to have language-specific CSS files added to one page?

Thanks and best, Martin

2

There is no built-in language specific CSS feature in Kirby as far as I know. Can you explain how you implemented this?

3

You can check for the site’s language:

<?php 

if($site->language()->code() == "de" {
  // include German file 
} else {
  // include English file
}
?>
1 Like
4

Thanks both of you. I implemented the custom css feature as explained in the help topic about art directed blog posts. This is great, but it does not serve my need for language specific styling. Ok, I will sth else. Thanks so far
Martin

5

The code @texnixe posted above should work to include language specific styles. But we still don’t understand what your use-case is. :slight_smile:

6

This is a completely different issue and somehow outdated anyway.

Why don’t you like the if-statement I proposed? What exactly do you want to achieve? If you only want to add the language specific files to a particular page, you could extend the if statement to include a second condition.

7

I am glad that you asked. I like your if suggestion but I have to experiment with it for a while. Honestly, php is the stuff that I am nor really familiar with.

I try to achieve the following:
I am developing a app landing page with a huge at atmospheric image in the background of the page header with background-size:cover. But this bg image need to change slightly depending on the language (there is the app visible that contains UI text).

Now I wonder how can I achieve this. Preferable easy to update via panel so that future languages are easy to add.

Thanks and best, Martin

8

If it’s just the background image, do you really need a different CSS file? Wouldn’t it be enough to select the background image in the site/page settings and then include it as inline style in your template? Then you could also easily add many different languages without having to add different CSS files all the time …

Alternatively, you could use some code like this which would then automatically choose the file with the language extension:

<?= css('assets/css/custom.' . $site->language()->code() . '.css'); ?>

You would have to make sure that file exists, though.

1 Like
9

Considering you should have your pages language code as an attribute to your <html> tag, you can use that as a selector in your CSS instead of loading another stylesheet. Example:

Page in English

<html lang="en-GB">
<!-- Rest of page -->

Page in German

<html lang="de-DE">
<!-- Rest of page -->

CSS Example

header.banner {
    width: 100%;
    height: 80vh;
    background: #000 no-repeat center center;
    background-size: cover;
}

html[lang=en-GB] header.banner {
    background-image: url('english.jpg');
}

html[lang=de-DE] header.banner {
    background-image: url('german.jpg');
}

I’ve used this technique before when I wanted to change colours and swap quotation marks between French and English pages.

2 Likes
10

@texnixe
Inline styles do not work, because I like to use media queries. But I understand the second approach and will definitely try this one tomorrow. Thanks a lot!

@PaulMorel This is a smart idea. I first have to investigate if I am “able” to get this working!

Kirby and Kirby forum <3 !