Hi,

My new Backdrop website will be bilingual (Dutch/English). The default language switch block is huge and doesn't look nice:language switcher It is not so obvious to me how to tweak the appearance. I guess I have to use the configuration dialogue box for the Language switcher:

Language switcher configuration

First question: whereas Block title type is "none" the Block title is displayed. How to get rid of the title?

Second question: How do I get a simple NL / EN switch like this one:

language switcher

I guess the answer will be that I need to add some CSS style definitions, but how?

Thanks for any help or suggestions.

Accepted answer

@

I can at least answer part of your question. I don't usually use the multilingual features in Backdrop CMS, but I just did an experiment and was able to get rid of the "Language" label on the block pretty easy. 

Setting the "Block Title Type" to "None" should do it. It appears that you tried this, but I wonder if you remembered to save your layout afterwards. 

After you make configuration changes on a block, you must also save those changes to the layout. After you have made your changes to the block, you should land on the layout page. Scroll to the bottom of the layout to save any changes that you made to your block. In my test, this worked. 

I guess the answer will be that I need to add some CSS style definitions, but how?

Yes, I think that you will need to style that block using CSS. Telling you how is a fairly big task and it's not clear how much help that you need. It would be helpful to know the following two things:

1) How much experience you have with CSS and theming Drupal or Backdrop CMS sites

2) Are you able to create a sub-theme?

Normally, you would have to create a sub-theme and edit the css stylesheets to fix this with CSS. One option would be to add the CSS Injector module to your site, which allows you to add some CSS through the user interface. 

Most helpful answers

Quick note: We are planning a Virtual User Group meeting to talk about multilingual features in Backdrop CMS in a few weeks (Feb 16, 2021). Hope to see you there:

https://backdropcms.org/news/events/virtual-user-group-multilingual-back...

@zilvervos

You can easily change the language names from English / Nederlands to en / nl by editing the language names - I show this for English, but your site should have a similar link for any other language installed:

admin/config/regional/language/edit/en

Just change 'English' to 'en'.

You can change the name in the same way for any other installed language.

The parent page is:

admin/config/regional/language

There just click CONFIGURE for a language to change it's name.

The Language Switcher Dropdown module can also be useful:

https://backdropcms.org/project/language_switcher_dropdown

You can also try the Language Icons module:

https://backdropcms.org/project/languageicons

For precise graphic layout of the language switcher it is necessary to use a sub-theme or a new custom theme in which this can be done by editing CSS files in this theme.

Example from one of my custom themes (with standard language switcher):

.block-locale-language {
    position: absolute;
    top: 15px;
    right: 10px;
}
.block-locale-language .block-content ul {
    margin: 0px;
    padding: 0px;
}
.block-locale-language .block-content li {
    margin: 0px;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    list-style-type: none;
    font-size: 90%;
}
.block-locale-language .block-content a {
    color: #CFDE56;
    text-decoration: none;
}
.block-locale-language .block-content a:hover {
    color: #fff;
    padding-bottom: 1px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
.block-locale-language .block-content a.active {
    border:none;    
    color: #fff;
}

Container block should be for example:

.your-container-block {
     position: relative;
}

This is necessary so that you can position the language switcher block absolutely inside the container block.

But this is only one technique, others are possible, for example with floats.

If you do not want to develop a custom or sub-theme, you can try the CSS Injector module within an existing theme:

https://backdropcms.org/project/css_injector

Good luck and success with Backdrop CMS!

Hey  👋

I've added a feature request, to allow easier customization of the language switcher block: https://github.com/backdrop/backdrop-issues/issues/4924

It may take a while for this to be implemented though, since any new features are scheduled for the next minor release of Backdrop (1.19.0), which will be released in May 15, 2021.

Comments

@

I can at least answer part of your question. I don't usually use the multilingual features in Backdrop CMS, but I just did an experiment and was able to get rid of the "Language" label on the block pretty easy. 

Setting the "Block Title Type" to "None" should do it. It appears that you tried this, but I wonder if you remembered to save your layout afterwards. 

After you make configuration changes on a block, you must also save those changes to the layout. After you have made your changes to the block, you should land on the layout page. Scroll to the bottom of the layout to save any changes that you made to your block. In my test, this worked. 

I guess the answer will be that I need to add some CSS style definitions, but how?

Yes, I think that you will need to style that block using CSS. Telling you how is a fairly big task and it's not clear how much help that you need. It would be helpful to know the following two things:

1) How much experience you have with CSS and theming Drupal or Backdrop CMS sites

2) Are you able to create a sub-theme?

Normally, you would have to create a sub-theme and edit the css stylesheets to fix this with CSS. One option would be to add the CSS Injector module to your site, which allows you to add some CSS through the user interface. 

Hi @stpaultim, Thanks for your answer. Following your instructions did indeed result in the disappearance of the block title.The second step (saving the layout) seemed a bit counter intuitive to me, but thinking about it I suddenly understand how this works quite differently than in Drupal, and that the way it works in Backdrop gives a lot of flexibility.

As regards the second part of your answer: I do have some knowledge of CSS, but I have never done actual theming of a Drupal site: at the organisation where I worked this was done by professional developers. I have always been attracted to Drupal (and now BackdropCMS) by the DIY philosophy behind it and now that I am building my own website, if I need to acquire some theming skills I consider that a nice challenge. So I will set about to play around a bit and create a sub-theme.

Thanks @klonos. Such a feature would be quite useful, especially for novices. In the meantime I will follow @stpaultim's suggestion to create a sub-theme to do the styling job.

@zilvervos

You can easily change the language names from English / Nederlands to en / nl by editing the language names - I show this for English, but your site should have a similar link for any other language installed:

admin/config/regional/language/edit/en

Just change 'English' to 'en'.

You can change the name in the same way for any other installed language.

The parent page is:

admin/config/regional/language

There just click CONFIGURE for a language to change it's name.

The Language Switcher Dropdown module can also be useful:

https://backdropcms.org/project/language_switcher_dropdown

You can also try the Language Icons module:

https://backdropcms.org/project/languageicons

For precise graphic layout of the language switcher it is necessary to use a sub-theme or a new custom theme in which this can be done by editing CSS files in this theme.

Example from one of my custom themes (with standard language switcher):

.block-locale-language {
    position: absolute;
    top: 15px;
    right: 10px;
}
.block-locale-language .block-content ul {
    margin: 0px;
    padding: 0px;
}
.block-locale-language .block-content li {
    margin: 0px;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    list-style-type: none;
    font-size: 90%;
}
.block-locale-language .block-content a {
    color: #CFDE56;
    text-decoration: none;
}
.block-locale-language .block-content a:hover {
    color: #fff;
    padding-bottom: 1px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
.block-locale-language .block-content a.active {
    border:none;    
    color: #fff;
}

Container block should be for example:

.your-container-block {
     position: relative;
}

This is necessary so that you can position the language switcher block absolutely inside the container block.

But this is only one technique, others are possible, for example with floats.

If you do not want to develop a custom or sub-theme, you can try the CSS Injector module within an existing theme:

https://backdropcms.org/project/css_injector

Good luck and success with Backdrop CMS!

Great. Will put it in my agenda!