multi language support

pideja · 2020-05-14 05:53:42

Does multi-language support the menu items? And how about separate mastheads.

Just asking.

rod barbee · 2020-05-14 06:00:50

yes on menu items, no on masthead images (as far as I know--there may be a phplugins way of feeding an image based on user choice of language). But if you use text in the masthead (company name and tagline), then yes.

For menu items, you'll need to edit the menu set and add the multi language html.

I've not tested the language code in album and album set titles to know if those fields can take the code so that gallery submenu items will be translated.

pideja · 2020-05-14 06:32:53

This is a fairly straightforward site: the Home page shows thumbnails that are buttons that lead to video clips. All the data will be written in both languages using the method suggested earlier.
As for the menu items, I still have to discover where to edit these.
As for the button, I succeeded in placing on the left and changing the "Fr" by "Français". But now I'm wondering about that globe icon. Not sure everyone will "get it". Looking for another icon or a way to have some kind of indicator to switch language.
For the masthead, I'll just design a bilingual one, until I find a way to have separate Mastheads, switchable.

As Walter Cronkite used to say: "that's the way it is", for now.

rod barbee · 2020-05-14 07:13:10

Edit your main menu items in the Menu Set

Albums and albums sets that automatically appear beneath the Galleries item (descendants) cannot be edited. You could instead create the lower levels manually.

You can change the globe icon with custom css. Either swapping it for another icon or using text.

You could use a text based masthead with the tagline like I've done on my demo page. These can be styled separately with custom css.

aebolzan · 2020-05-14 07:46:27

rod barbee wrote:

You can change the globe icon with custom css. Either swapping it for another icon or using text.

it would be interesting to know how....I was thinking also that perhaps the globe is not directly understood by some people and inserting something like " EN | ES" for English/Spanish would be better....

Agustin

Daniel Leu · 2020-05-14 08:41:38

aebolzan wrote:

rod barbee wrote:
You can change the globe icon with custom css. Either swapping it for another icon or using text.
it would be interesting to know how....I was thinking also that perhaps the globe is not directly understood by some people and inserting something like " EN | ES" for English/Spanish would be better....
Agustin

Yes, a few lines of CSS code can do this. Please have a look at: http://lab.danielleu.com/blog/customizi … -selector/

rod barbee · 2020-05-14 10:05:04

Daniel Leu wrote:

aebolzan wrote:
rod barbee wrote:
You can change the globe icon with custom css. Either swapping it for another icon or using text.
it would be interesting to know how....I was thinking also that perhaps the globe is not directly understood by some people and inserting something like " EN | ES" for English/Spanish would be better....
Agustin
Yes, a few lines of CSS code can do this. Please have a look at: http://lab.danielleu.com/blog/customizi … -selector/

Nice!

Daniel Leu · 2020-05-14 10:10:14

rod barbee wrote:

Daniel Leu wrote:
aebolzan wrote:
it would be interesting to know how....I was thinking also that perhaps the globe is not directly understood by some people and inserting something like " EN | ES" for English/Spanish would be better....
Agustin
Yes, a few lines of CSS code can do this. Please have a look at: http://lab.danielleu.com/blog/customizi … -selector/

Nice!

aebolzan · 2020-05-14 10:16:55

Daniel,

I have no knowledge about CSS, but I copied and pasted your code into my custom.css file and nothing happened...the Home page shows as usual...maybe I did not understand what to do with your code...

Agustin

P.D. this is what my css file contains:

.nav.nav_h ul.primary-menu ul.sub-menu {
width: 400px;

/* Language switching */

html .fa-globe:before{
font-family: Arial;
font-weight: 700;
font-size: 0.875em;
}

html[lang="es"].fa-globe:before{
content: "ES";
}

html[lang="en"].fa-globe:before{
content: "EN";
}

#language-selector ul {
width: 75px;
}

Last edited by aebolzan (2020-05-14 10:18:34)

Ben · 2020-05-14 10:26:29

I’ll be moving this into Backlight 3 Customisation

Daniel Leu · 2020-05-14 10:58:35

aebolzan wrote:

Daniel,
I have no knowledge about CSS, but I copied and pasted your code into my custom.css file and nothing happened...the Home page shows as usual...maybe I did not understand what to do with your code...
Agustin
P.D. this is what my css file contains:
.nav.nav_h ul.primary-menu ul.sub-menu {
width: 400px;
/* Language switching */
html .fa-globe:before{
font-family: Arial;
font-weight: 700;
font-size: 0.875em;
}
html[lang="es"].fa-globe:before{
content: "ES";
}
html[lang="en"].fa-globe:before{
content: "EN";
}

#language-selector ul {
width: 75px;
}

Do you have a link to your page?

Daniel Leu · 2020-05-14 11:03:02

Your first statement is not closed. It should be

.nav.nav_h ul.primary-menu ul.sub-menu {
        width: 400px;
}

Do you notice the closing bracket?

aebolzan · 2020-05-14 21:27:52

No, I didn't notice!..thanks!...but...the result is the same...I still have the globe....not the letters...

Agustin

rod barbee · 2020-05-14 21:37:19

can you post a link to the site?

pideja · 2020-05-14 21:40:16

Rod suggested:

You could use a text-based masthead with the tagline as I've done on my demo page. These can be styled separately with custom css.

I am playing around with a graphic masthead + a tagline. Works fine. Just have to discover how to align them, probably with CSS.
There is a "twitch" when changing the language but it's no big deal, yet.

Last edited by pideja (2020-05-14 21:40:45)

pideja · 2020-05-14 21:47:29

I found in the Inspector that I can align the graphic masthead with the tagline with

div.masthead:nth-child(1) > div:nth-child(1) > a:nth-child(1) > h1:nth-child(1) > span:nth-child(1) > img:nth-child(1) {
padding-right: 0px;
margin-right: 0px;
right: 15px;
}

Is this usefull ? Is there a more CSS-like way to do this? If not, where do I put this code?

rod barbee · 2020-05-14 22:11:34

I’ve not probed it to see if there’s a better way.
But what you posted is css. So put it in your custom css file.

This is starting to get a bit off topic. If you need to go further with masthead customization, can you start a new topic?

aebolzan · 2020-05-14 22:21:02

rod barbee wrote:

can you post a link to the site?

www.agustinbolzan.com.ar

Agustin

pideja · 2020-05-14 22:21:13

Will do!

rod barbee · 2020-05-14 22:50:41

aebolzan wrote:

rod barbee wrote:
can you post a link to the site?

www.agustinbolzan.com.ar

Agustin

your custom css is not showing Daniel's code. Double check that you added it to your my-custom.css file and that you've uploaded it to the /backlight/custom/css/ folder

rod barbee · 2020-05-14 23:08:12

Agustin,

I see that you've uploaded the css. There's a syntax error. You have:

html[lang="es"].fa-globe:before{
   content: "ES";
}
 
html[lang="en"].fa-globe:before{
   content: "EN";
}

There needs to be a space before .fa-globe. Change the code so it looks like this:

html[lang="es"] .fa-globe:before{
   content: "ES";
}
 
html[lang="en"] .fa-globe:before{
   content: "EN";
}

pideja · 2020-05-14 23:23:42

aebolzan wrote:
rod barbee wrote:
You can change the globe icon with custom css. Either swapping it for another icon or using text.
it would be interesting to know how....I was thinking also that perhaps the globe is not directly understood by some people and inserting something like " EN | ES" for English/Spanish would be better....

and Daniel wrote:

Yes, a few lines of CSS code can do this. Please have a look at: http://lab.danielleu.com/blog/customizi … -selector/

Well, it works for me. Thanks, Daniel and Rod!

https://pideja.ca/marco

pideja · 2020-05-15 00:24:10

Although Daniel's CSS works fine on my site, the editor I am using warns me to not use "IDs in selectors" as in:

#language-selector ul {
   width: 75px;

Why is this?

rod barbee · 2020-05-15 00:27:08

ignore that, it's nonsense.

The selector for that element is #language-selector, so that's what you need to use.

aebolzan · 2020-05-15 00:48:57

rod barbee wrote:

Agustin,
I see that you've uploaded the css. There's a syntax error. You have:
html[lang="es"].fa-globe:before{
   content: "ES";
}
 
html[lang="en"].fa-globe:before{
   content: "EN";
}
There needs to be a space before .fa-globe. Change the code so it looks like this:
html[lang="es"] .fa-globe:before{
   content: "ES";
}
 
html[lang="en"] .fa-globe:before{
   content: "EN";
}

still not working....any ideas?

Agustin

Community @ The Turning Gate

#1 2020-05-14 05:53:42

multi language support

#2 2020-05-14 06:00:50

Re: multi language support

#3 2020-05-14 06:32:53

Re: multi language support

#4 2020-05-14 07:13:10

Re: multi language support

#5 2020-05-14 07:46:27

Re: multi language support

#6 2020-05-14 08:41:38

Re: multi language support

#7 2020-05-14 10:05:04

Re: multi language support

#8 2020-05-14 10:10:14

Re: multi language support

#9 2020-05-14 10:16:55

Re: multi language support

#10 2020-05-14 10:26:29

Re: multi language support

#11 2020-05-14 10:58:35

Re: multi language support

#12 2020-05-14 11:03:02

Re: multi language support

#13 2020-05-14 21:27:52

Re: multi language support

#14 2020-05-14 21:37:19

Re: multi language support

#15 2020-05-14 21:40:16

Re: multi language support

#16 2020-05-14 21:47:29

Re: multi language support

#17 2020-05-14 22:11:34

Re: multi language support

#18 2020-05-14 22:21:02

Re: multi language support

#19 2020-05-14 22:21:13

Re: multi language support

#20 2020-05-14 22:50:41

Re: multi language support

#21 2020-05-14 23:08:12

Re: multi language support

#22 2020-05-14 23:23:42

Re: multi language support

#23 2020-05-15 00:24:10

Re: multi language support

#24 2020-05-15 00:27:08

Re: multi language support

#25 2020-05-15 00:48:57

Re: multi language support

Board footer