Adding CSS to listbox (language selector)

Hi,

I am trying to add a bit of css styling, a skin if you will, to a language switcher, and am having major difficulty. I am a bit unfamiliar with php, but stubborn, I just don’t know where to start. At the very least changing the stock arrow to another image (coherent to the style of my site) shouldn’t be too difficult ( I would have thought) but even this I can’t identify…

Dropdown boxes or Listboxes (I can’t work out what the true name is) seem to be the more difficult elements to control the style of, can anyone help with some sound advice here?

kind regards,

Luke

Hi lwlbar. Welcome to SitePoint. :slight_smile:

It’s hard to help without seeing the page/element you want to style. Please post a link or code sample and let us know how you want it styled. :slight_smile:

Hi Ralph,

Okay for background info, this is a) a joomla website and b) a novice at coding!!

the current css is as follows:

div.mod-languages ul {
margin: 0;
padding: 0;
list-style:none;
}
div.mod-languages li {
margin-left: 50px;
margin-right: 5px;
}

div.mod-languages ul.lang-inline li {
display:inline;
}

div.mod-languages ul.lang-block li {
display:block;
}

div.mod-languages img {
border:none;
}

div.mod-languages a {
text-decoration: none;
}

.mod-languages-select select {
background: transparent
width: 197px;
font-size: 12px;
height: 22px;
border: 2px solid #fff;

.mod-languages-select {
width:197px;
height: 15px;
overflow: hidden;
}

The result is a bog standard drop down list. However the width doesn’t seem to conform with whats here…ie: its less wide live:

So width of box aside, the desired end result is to add in a background image to the switcher and change the arrow using images in line with the rest of the site ( a bit like for the search box)…

(although I forgot to add in sample language txt!)

I have been played round with other elements in css and accomplished what I want, but this switcher is running me round in circles… thanks in advance for any advice!

kind regards

Luke

Hi Luke. Unfortunately, CSS without HTML is like cosmetics without a face. You need something to apply it to. So post the HTML as well. Although, context is everything, so we really need to see this in the context of the page.

Hi Ralph,

I hope you can bear with me!

I will try to provide everything with my limited knowledge…here we go.

Under media folder there is a folder mod_languages containing:

folder css:
template.css (above/below)
index.html

folder images:
(just flags icons)

index.html

Under modules folder there is mod_languages:
mod_languages_xml

<?xml version="1.0" encoding="utf-8"?>
<extension
	type="module"
	version="1.7"
	client="site"
	method="upgrade">
	<name>mod_languages</name>
	<author>Joomla! Project</author>
	<creationDate>February 2010</creationDate>
	<copyright>Copyright (C) 2005 - 2011 Open Source Matters. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<authorEmail>admin@joomla.org</authorEmail>
	<authorUrl>www.joomla.org</authorUrl>
	<version>1.7.0</version>
	<description>MOD_LANGUAGES_XML_DESCRIPTION</description>
	<files>
		<filename module="mod_languages">mod_languages.php</filename>
		<folder>tmpl</folder>
		<filename>helper.php</filename>
		<filename>index.html</filename>
		<filename>mod_languages.xml</filename>
	</files>
	<languages>
		<language tag="en-GB">en-GB.mod_languages.ini</language>
		<language tag="en-GB">en-GB.mod_languages.sys.ini</language>
	</languages>
	<help key="JHELP_EXTENSIONS_MODULE_MANAGER_LANGUAGE_SWITCHER" />
	<config>
		<fieldset>
			<field name="language"
				type="list"
				description="JFIELD_MODULE_LANGUAGE_DESC"
				label="JFIELD_LANGUAGE_LABEL">
				<option value="*">JALL</option>
			</field>
		</fieldset>
		<fields name="params">
			<fieldset name="basic">
				<field
					name="header_text"
					type="textarea"
					filter="safehtml"
					rows="3"
					cols="40"
					label="MOD_LANGUAGES_FIELD_HEADER_LABEL"
					description="MOD_LANGUAGES_FIELD_HEADER_DESC" />

				<field
					name="footer_text"
					type="textarea"
					filter="safehtml"
					rows="3"
					cols="40"
					label="MOD_LANGUAGES_FIELD_FOOTER_LABEL"
					description="MOD_LANGUAGES_FIELD_FOOTER_DESC" />

				<field
					name="dropdown"
					type="radio"
					default="0"
					label="MOD_LANGUAGES_FIELD_DROPDOWN_LABEL"
					description="MOD_LANGUAGES_FIELD_DROPDOWN_DESC" >
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>
				<field name="spacer1" type="spacer" class="text"
					label="MOD_LANGUAGES_SPACERDROP_LABEL"
				/>
				<field
					name="image"
					type="radio"
					default="1"
					label="MOD_LANGUAGES_FIELD_USEIMAGE_LABEL"
					description="MOD_LANGUAGES_FIELD_USEIMAGE_DESC" >
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>
				<field
					name="inline"
					type="radio"
					default="1"
					label="MOD_LANGUAGES_FIELD_INLINE_LABEL"
					description="MOD_LANGUAGES_FIELD_INLINE_DESC" >
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>
				<field
					name="show_active"
					type="radio"
					default="1"
					label="MOD_LANGUAGES_FIELD_ACTIVE_LABEL"
					description="MOD_LANGUAGES_FIELD_ACTIVE_DESC" >
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>
				<field name="spacer2" type="spacer" class="text"
					label="MOD_LANGUAGES_SPACERNAME_LABEL"
				/>
				<field
					name="full_name"
					type="radio"
					default="1"
					label="MOD_LANGUAGES_FIELD_FULL_NAME_LABEL"
					description="MOD_LANGUAGES_FIELD_FULL_NAME_DESC" >
					<option value="0">JNO</option>
					<option value="1">JYES</option>
				</field>
			</fieldset>
			<fieldset name="advanced">
				<field
					name="layout"
					type="modulelayout"
					label="JFIELD_ALT_LAYOUT_LABEL"
					description="MOD_LANGUAGES_FIELD_MODULE_LAYOUT_DESC" />

				<field
					name="moduleclass_sfx"
					type="text"
					label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
					description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC" />
				<field name="owncache" type="list" default="1"
					label="COM_MODULES_FIELD_CACHING_LABEL" description="COM_MODULES_FIELD_CACHING_DESC" >
					<option value="1">JGLOBAL_USE_GLOBAL</option>
					<option value="0">COM_MODULES_FIELD_VALUE_NOCACHING
					</option>
				</field>
				<field
					name="cache_time"
					type="text"
					default="900"
					label="COM_MODULES_FIELD_CACHE_TIME_LABEL"
					description="COM_MODULES_FIELD_CACHE_TIME_DESC" />
			</fieldset>
		</fields>
	</config>
</extension>

mod_langauges_php

<?php
/**
 * @version		$Id: mod_languages.php 20988 2011-03-18 08:13:24Z infograf768 $
 * @package		Joomla.Site
 * @subpackage	mod_languages
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;

// Include the syndicate functions only once
require_once dirname(__FILE__).'/helper.php';

$headerText	= JString::trim($params->get('header_text'));
$footerText	= JString::trim($params->get('footer_text'));

$cacheid = md5(JRequest::getVar('lang').$module->module);

$cacheparams = new stdClass;
$cacheparams->cachemode = 'id';
$cacheparams->class = 'modLanguagesHelper';
$cacheparams->method = 'getList';
$cacheparams->methodparams = $params;
$cacheparams->modeparams = $cacheid;

$list = JModuleHelper::moduleCache ($module, $params, $cacheparams);

$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));

require JModuleHelper::getLayoutPath('mod_languages', $params->get('layout', 'default'));

helper.php

<?php
/**
 * @version		$Id: helper.php 21744 2011-07-06 08:40:23Z chdemko $
 * @package		Joomla.Site
 * @subpackage	mod_languages
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;

jimport('joomla.language.helper');
jimport('joomla.utilities.utility');

JLoader::register('MenusHelper', JPATH_ADMINISTRATOR . '/components/com_menus/helpers/menus.php');

abstract class modLanguagesHelper
{
	public static function getList(&$params)
	{
		$lang = JFactory::getLanguage();
		$languages	= JLanguageHelper::getLanguages();
		$db			= JFactory::getDBO();
		$app		= JFactory::getApplication();
		$query		= $db->getQuery(true);

		$query->select('id');
		$query->select('language');
		$query->from($db->nameQuote('#__menu'));
		$query->where('home=1');
		$db->setQuery($query);
		$homes = $db->loadObjectList('language');

		if ($app->get('menu_associations', 0)) {
			$menu = $app->getMenu();
			$active = $menu->getActive();
			if ($active) {
				$associations = MenusHelper::getAssociations($active->id);
			}
		}
		foreach($languages as $i => &$language) {
			// Do not display language without frontend UI
			if (!JLanguage::exists($language->lang_code)) {
				unset($languages[$i]);
			}
			// Do not display language without specific home menu
			elseif (!isset($homes[$language->lang_code])) {
				unset($languages[$i]);
			}
			else {
				if ($app->getLanguageFilter()) {
					$language->active =  $language->lang_code == $lang->getTag();
					if (isset($associations[$language->lang_code]) && $menu->getItem($associations[$language->lang_code])) {
						$itemid = $associations[$language->lang_code];
						if ($app->getCfg('sef')=='1') {
							$language->link = JRoute::_('index.php?lang='.$language->sef.'&Itemid='.$itemid);
						}
						else {
							$language->link = 'index.php?lang='.$language->sef;
						}
					}
					else {
						if ($app->getCfg('sef')=='1') {
							$itemid = isset($homes[$language->lang_code]) ? $homes[$language->lang_code]->id : $homes['*']->id;
							$language->link = JRoute::_('index.php?lang='.$language->sef.'&Itemid='.$itemid);
						}
						else {
							$language->link = 'index.php?lang='.$language->sef;
						}
					}
				}
				else {
					$language->link = 'index.php';
				}
			}
		}
		return $languages;
	}
}

plus a folder tmpl:
default.php

<?php
/**
 * @version		$Id: default.php 21184 2011-04-23 05:44:08Z infograf768 $
 * @package		Joomla.Site
 * @subpackage	mod_languages
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die('Restricted access');
JHtml::_('stylesheet', 'mod_languages/template.css', array(), true);
?>
<div class="mod-languages<?php echo $moduleclass_sfx ?>">
<?php if ($headerText) : ?>
	<div class="pretext"><p><?php echo $headerText; ?></p></div>
<?php endif; ?>

<?php if ($params->get('dropdown',1)) : ?>
<div class="mod-languages-select">
   <form name="lang" method="submit">
   <select class="inputbox" onchange="document.location.replace(this.value);" >
   <?php foreach($list as $language):?>
      <option dir=<?php echo JLanguage::getInstance($language->lang_code)->isRTL() ? '"rtl"' : '"ltr"'?> value="<?php echo $language->link;?>" <?php echo $language->active ? 'selected="selected"' : ''?>>
      <?php echo $language->title_native;?></option>
   <?php endforeach; ?>
   </select>
   </form>
</div>
<?php else : ?>
	<ul class="<?php echo $params->get('inline', 1) ? 'lang-inline' : 'lang-block';?>">
	<?php foreach($list as $language):?>
		<?php if ($params->get('show_active', 0) || !$language->active):?>
			<li class="<?php echo $language->active ? 'lang-active' : '';?>">
			<a href="<?php echo $language->link;?>">
			<?php if ($params->get('image', 1)):?>
				<?php echo JHtml::_('image', 'mod_languages/'.$language->image.'.gif', $language->title_native, array('title'=>$language->title_native), true);?>
			<?php else : ?>
				<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef);?>
			<?php endif; ?>
			</a>
			</li>
		<?php endif;?>
	<?php endforeach;?>
	</ul>
<?php endif; ?>

<?php if ($footerText) : ?>
	<div class="posttext"><p><?php echo $footerText; ?></p></div>
<?php endif; ?>
</div>

and index.html - all these index.html contain: <!DOCTYPE html><title></title>

Sorry if I am barking up the wrong tree with info here am doing the best with limited knowledge!!
I have also included a screen shot from dev tools after having done an inspect element…I’m learning little stuff at least!

hope some of this makes sense to you and can lead us on the right track!

kind regards,

Luke

Ah, I see, it’s a select box. They are notoriously hard to style. Here are some discussions that may help you:

For more specific help, the ideal would be if we could see the rendered page. Generally to help with CSS, we need to see the age after all the PHP has been processed.

Hi Ralph,

Thanks for the advice, will go look into to it!

Do you sleep?? as an expat aussie, i just realised the time in Melbourne…no rest for the wicked eh?

kind regards,

Luke

Ha ha, well observed. I’m having a very rare sleepless night. I figured if I couldn’t sleep, might as well see what’s cooking at SitePoint. :smiley: