nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Language specific CSS

nipper

OK, building a site TS/SP/LS 7.1

Using the DCR approach (index_fr-CA.xml) to get the French Canadian content. Easy enough.

The question is how do I get location specific CSS ? In the old days when I had different languages on different branches I could easily do that. Now with all languages in the same folders, I cannot do it.

Language specific images can be referenced in a DCR, should I do the same with CSS ? Create a CSS component that understands the language ?

Find more posts tagged with

Comments

ISCBorisB

OK, building a site TS/SP/LS 7.1

Using the DCR approach (index_fr-CA.xml) to get the French Canadian content. Easy enough.

The question is how do I get location specific CSS ? In the old days when I had different languages on different branches I could easily do that. Now with all languages in the same folders, I cannot do it.

Language specific images can be referenced in a DCR, should I do the same with CSS ? Create a CSS component that understands the language ?

What is your primary "Asset - CSS" association mechanism?
Do you use "cssurl" Attribute of the <viewoptions> Tag?

nipper

What is your primary "Asset - CSS" association mechanism?
Do you use "cssurl" Attribute of the Tag?

Well, the site is not build yet (on 7.1). It exists on 6.7.1 LS 3.0.2 and I cannot find the page types file.

The .page has the css in the XLS from the default skin, I will look into the cssurl attribute.

vpatel

OK, building a site TS/SP/LS 7.1

Using the DCR approach (index_fr-CA.xml) to get the French Canadian content. Easy enough.

The question is how do I get location specific CSS ? In the old days when I had different languages on different branches I could easily do that. Now with all languages in the same folders, I cannot do it.

Language specific images can be referenced in a DCR, should I do the same with CSS ? Create a CSS component that understands the language ?

Can you have your language specific CSS set in the header section via PAGE_SCOPE token? Will that suffice? I am not totally clear on your requirement but I think that would probably work as one option.

Birt.zip

nipper

Can you have your language specific CSS set in the header section via PAGE_SCOPE token? Will that suffice? I am not totally clear on your requirement but I think that would probably work as one option.

Not certain. Basically we have a bunch of pages, moving to 7.1. They all (will be) DCR driven components. So using the dcr_locale.xml method for translation will work great. All languages are in the same branch.

The desire is that *maybe* we will want a Chinese specific CSS for all pages. I really cannot put in in the .page (unless I can have a token that reads the locale and put that into the path before the main css).

Similar how the component reads dcr_es-MX.xml if the browser language is set to Mexican-Spanish, I would like it to use /iw/includes/es-MX/styles.css in addition to /iw/includes/en-US/styles.css

vpatel

Absolutely doable. Basically, you'll need following:

1. A page level controller (heck that is even a way that I can think of that you can do it without Java with straight up XSL -- may require a custom page type or customize the OOTB page XSL) that will figure out which site you are on right now..

2. Based on the site ( or other factors such as browser's locale settings), your page controller will inject the appropriate CSS in the header using the PAGE_SCOPE.

Note: naming your CSS files appropriately and consistently will help. For example, for site abc, name your CSS my-css-abc and for site xyz name your CSS my-css-xyz. All your controller has to do is include my-css-sitename in the page.

Also if this is something that is consistently done across the entire site then just set that controller at the site level instead of the page level. You can also do some tricks if it is in between somewhere as well.

HTH!

nipper

Hmmm interesting that I may be able to do this with an XSL only solution. Makes it easier than building a page level controller.

I figured naming was going to be critical. I was planning to follow the DCR mode or in the path, whichever was easier.

Thanks VP

vpatel

Hmmm interesting that I may be able to do this with an XSL only solution. Makes it easier than building a page level controller.

Here is my initial thought on the XSL route (NOTE: I haven't tested or tried it myself but it should work)...

Customize your page XSL and in that XSL, do a CSS include -- for example:.[HTML][/HTML]

Now tweak it and use the $CONTEXT token and using the same logic that I mentioned in the previous post (site name a prefix or suffix in your css file name).

so for your CSS href attribute instead of "my-site.css", you'll have something like this: "my-site-$CONTEXT{site.name}.css". You may have to mess around with the $CONTEXT token and assign it to a XSL variable perhaps or something but I believe it should work.

NOTE: I haven't tested this but I am pretty positive it should.

Book.rptdesign