LEO dictionary component
Written by kksou   
Sunday, 03 August 2008

This component allows you to add the LEO German dictionary / translator to your Joomla site.

The search results are displayed right inside your Joomla page!

No more popup page. No more diversion to other pages.

Available for both Joomla 1.0.x and native 1.5.x!

Add more power with LEO dictionary module

You might also want to complement this component with the LEO dictionary module: http://www.kksou.com/php-gtk2/Joomla/LEO-dictionary-module.php

The module allows you to add an additional LEO dictionary search box as a module. This means that you can place the search form in any module position you like. When the user clicks the search button, the search result will be displayed in your Joomla main body by the LEO dictionary component.


How to install

Set up is as easy as 1-2-3:

  1. Install the component
  2. Enter your desired width and height of the search result

That's all you need to get started! You'll now have LEO dictionary / translator right inside your Joomla page!

For advanced settings, please refer to Customizing the Component.


Download

Note: To upgrade to the newer version, simply uninstall the old version and install the new version of the plugin.

Customizing the Component

Log on as Administrator, from the Component Menu, select "LEO dictionary - configure", you will see the following config page.

Only the first two are required. The rest are optional settings that allow you to finetune the component to suit your needs.

Styling the Component and Module using CSS

You can set the style of every item within the LEO dictionary component/module to the exact format you want through CSS. For example, you can set the font family, font size, foreground and background color of the search field, radio label, search button, etc.

I've designed such that the css style for the component is independent of that of the module. So you can have different styles for the component and the module.

For example, if you're using the default Joomla 1.5 template, define the following style in <joomla root folder>/templates/rhuk_milkyway/css/template.css. If you're using the default Joomla 1.0 template, define the following style in <joomla root folder>/templates/rhuk_solarflare_ii/css/template_css.css.

  1. Search Box
  2. Component Module
    div.leodict input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_leodict input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
  3. Search Button
  4. Component Module
    div.leodict input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-left: 4px;
    }
    
    div.mod_leodict input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-top: 6px;
    }
    
  5. Search Button Image (if you're using your self-defined image as search button)
  6. Component Module
    div.leodict input.button_img {
    	margin-left: 4px;
    }
    
    div.mod_leodict input.button_img {
    	margin-left: 4px;
    }
    
  7. LEO Logo
  8. Component Module
    div.leodict .leodict_logo {
    	margin-right: 6px;
    }
    
    div.mod_leodict .leodict_logo {
    	margin-right: 6px;
    }
    
  9. Radio Label (the radio buttons to select between search for web or domain)
  10. Component Module
    div.leodict .radiolabel {
    	font-family: Verdana;
    	font-style: italic;
    }
    
    div.mod_leodict .radiolabel {
    	font-family: Verdana;
    	font-style: italic;
    }
    
  11. Radio Buttons (note: this only works on some of the browsers such as IE.)
  12. Component Module
    div.leodict input.radio {
    	background-color: #0000ff;
    }
    
    div.mod_leodict input.radio {
    	background-color: #0000ff;
    }
    
  13. Radio Group (use this if you want to set the background or draw a border around the entire radio buttons group)
  14. Component Module
    div.leodict .radiogrp {
    	border: 1px solid #ddd;
    }
    
    div.mod_leodict .radiogrp {
    	border: 1px solid #ddd;
    }
    
  15. The entire search form (use this if you want to set the background or draw a border around the entire search form)
  16. Component Module
    div.leodict {
    	background: #33FF66;
    }
    
    div.mod_leodict {
    	background: #33FF66;
    }
    
  17. The table within the search form (use this if you want to right align the search form)
  18. Component Module
    div.leodict table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
    div.mod_leodict table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
  19. Search Box (method #2)
  20. Component Module
    div.leodict input{
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_leodict input {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    

 

Comments  

 
# Joh 2012-08-16 06:32
I think it's a useful stuff!!
 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2012. kksou.com. All Rights Reserved