How do I change i18n language switcher from list to...
Please excuse me if this question exists somewhere else. I have been searching for a few days and haven't found anything to answer this question:
I am using i18n (multilanguage) 6.x-1.1 and Pathauto 6.x-1.1 in Drupal 6.14 with the Deco theme. I am new to Drupal and CSS, so please excuse any confusion caused by my (bad) terminology.
I have the Language Switcher block showing in my header section. It is in a bulleted list format which does not look very appealing in this theme and placement. I have figured out how to remove the bullets by adding some CSS. What I can't do is change it from a list to something more appealing like menu buttons that are side by side. If I am correct, the list attribute is written by the i18n module? Is there anyway to modify the look? If I can avoid changing the code, that would be great.
Thank you in advance
Figured it out
I figured it out. It was my lack of CSS knowledge that was the obstacle. For those who may be trying to do the same, this is the CSS I added. I know this may be more of a hint about CSS than drupal or i18n but I think that any newbie like me looking to modify look of the Language Switcher, will be seeking this type of info.
The problem I was having was identifying the correct class and ID to target. Yes, simple for those experienced in CSS. So, the key part to all of this is ID "#block-locale-0" followed by the specific class you want to modify. If I worded this incorrectly, feel free to correct me.
What I would suggest is to create an html page aside from the whole drupal install. Copy the Language switcher html code from a page in your drupal site that has the Language switcher on it and paste it into the source of your new blank page. Then make an external CSS document and play with the CSS code below to get the look you want. Then apply it to your theme's CSS
I found this site to be very helpful. I had to adjust the code a little to suit my needs but it did help a lot.
http://css.maxdesign.com.au/floatutorial/tutorial0601.htm
#block-locale-0 ul{
padding: 0;
margin: 0;
list-style-type: none;
}
This next one is what changed them to be side by side. Yes, I know, very obvious to most. But some of us, it can be a break through.
#block-locale-0 ul li { display: inline; }And some more tweaking of the look of the linking text
#block-locale-0 ul li a{
float: left;
width: 3.5em;
color: #fff;
background-color: #252525;
padding: 0.2em 1em;
text-decoration: none;
font-size: 10pt;
/* I commmented this out because I didn't want the border. I left it here though to show you how to *separate the boxes.
*
*border-right: 1px solid #fff;
*/
}
And finally the look of the hover.
#block-locale-0 ul li a:hover{
background-color: #E6E2DA;
color: #292928;
}