By www.richardsprojects.co.uk on

I want the language switcher block that comes with the i18n module to look different.

I would like it to be a list and not include the pictures of flags.

Is there a way of theming it such as with a block-i18n.tpl.php file.

Thanks.

Richard.

⋅ Categories: Drupal 5.x

Comments

www.richardsprojects.co.uk’s picture

www.richardsprojects.co.uk commented

Right I managed to figure it out and I thought I'd share.

You can theme the outside of the language switcher block using block-i18n-0.tpl.php

To change how the links were displayed I added the following function to template.php

/**
 * Theme my language switcher links
 */
function phptemplate_i18n_link($text, $target, $lang, $separator=' ') {
  $attributes = ($lang == i18n_get_lang()) ? array('class' => 'active') : NULL;
  $output .= l($text, $target, $attributes, NULL, NULL, FALSE, TRUE);
  return $output;
}

I found this post very helpful:
www.drupal.org/node/117201

Richard Garside
www.richardsprojects.co.uk

goye2cz’s picture

goye2cz commented

What I'm wanting to do is have my language options appear side by side instead of one option, return, second option, and so on. I don't mind that the options appear as flags, infact I know how to change that if I want.

Do you know how to do what I'm trying to accomplish? I don't know code but I'm handy with cut and paste. :)

AvescoDude-dupe’s picture

AvescoDude-dupe commented

I've done this and the easiest way was to use some CSS styling.

Essentially the langauge block is displayed as a bulleted list so in my stylesheet I simply added this line:

#block-translation-0 ul li {float:left;}

A good place to understand making lists horizontal with CSS is: http://css.maxdesign.com.au/floatutorial/tutorial0601.htm

digitalwisdom’s picture

digitalwisdom commented

Heya,
Just wondering which css file you put that code in to work? Ive tried adding it to links.css, typography.css, graphics.css and layout.css. I also whacked it in style.css and dropdown.css but none of these changed my translation block and i cant find any divs by that name either.

I really want to get rid of the bullet points - just cant find the css for it!

Any ideas?

Ta

drahman’s picture

drahman commented

I am using drupal 6.14

For me, I had to insert this line

#block-locale-0 ul li {float:left;}

It will need to be tweaked some to get the look but that above should get it side by side

AvescoDude-dupe’s picture

AvescoDude-dupe commented

Anyone know how I can disable / grey out the language options on a page that is only available in one of 3 languages?

Eg I have a press release in english, but not German or Dutch - so I want only English to be clickable.

Can it be done, if so how?

whirl’s picture

whirl commented

Just in case anyone else is looking for this, I managed to get my language switcher with a horizontal layout at the top-right of the page with a margin of 5px between them and without the bullet points by adding the following CSS code to my style.css file:

#block-locale-0 ul li {
  margin: 5px;
  float: right;
  display: inline;
}

For me, the display: inline got rid of the bullet points, the float: right (or left, or anything I think) puts them horizontally. But there are no doubt other ways to do this.

Ratmir’s picture

Ratmir commented

It's really funny... :-) The question is where to put the code in WHICH css file but everyone gives as answer the code that has to be put :-).

The css file you've to edit is in your theme --> css folder --> blocks.css. Well at least in my case ;-)