The Language Toggler:
Now that the toggler is functioning properly you may want, or in some cases need, to customize your toggler button location and the buttons themselves to better match your website's aesthetics.
To do this you will need to revisit the CSS customization section in the admin by going here:
[Settings] > "CSS customization"...
The Language Toggler's Position:
The default styling we added in Step 1 may have the buttons running into, behind, or above other items that already existed in your website's Header area so you'd need to move the button container somewhere else in the Header area to not interfere with these other elements.
To do so you will need to edit the "top" and/or "left" values within the #languageToggleContainer CSS rule-set. Look for the following CSS code and modify the "top" and/or "left" values to reposition the language toggler container...
Position the Language Toggler
#languageToggleContainer {
/* Change these values to reposition the toggler */
top: 54px; /* from the top of the Header area */
left: 675px; /* from the left of the Header area */
This may involve some trial and error as the Wild Apricot website preview (located on the right side of the CSS customization page) does not update automatically (or "on-the-fly") and needs your action of first clicking on the "Apply & Preview" button to view your changes. So make small incremental changes or only edit one of the declarations at a time then save your changes and view the new preview of the website to check the placement of the language toggle container. With a little patience you should be able to reposition the toggler to a precise location that is both easily seen and easily useable by your visitors.
The Language Toggler's Layer (or z-index):
If the button appears to be behind another element or is not visible at all then you may need to add a new declaration for the "z-index" to the container's rule-set. The "z-index" of an element determines the layer or level at which the element lives on within the rest of the page's layers. So adding a z-index value greater than the element it may be behind will bring it above or in front of that element...
Position the Language Toggler
#languageToggleContainer {
/* Change these values to reposition the toggler */
top: 54px; /* from the top of the Header area */
left: 675px; /* from the left of the Header area */
/* Set a new z-index value greater than any other element on the page */
}
Why the large number? Some Wild Apricot templates set the website's Login Container z-index value to 33003 (which in some templates gets positioned in the top right area of the website's Header) so in order for our language toggler to be above it we need to use a number greater than 33003, i.e., 55555. I'm using this nice, round, easy to remember number in an attempt to keep things simple but most importantly to hopefully have it remain greater than any Wild Apricot template's Login Container z-index value that already exists or that may be created and added to the Wild Apricot CMS by one of their developers in the future. I'm also assuming 55555 is greater than any other element on the page to avoid possible interference.
The Language Toggler's Buttons:
As for the buttons themselves-- the possibilities are virtually endless!
You'll need to look for the following CSS code and modify any of the values to restyle the language toggler buttons...
Style the Language Toggler buttons.
#languageToggleContainer a {
/* You can customize these rules or remove them and add your own */
color: #252525; /* text color */
font-weight: bold; /* change to 'normal' if 'bold' is not wanted */
background-color: #eeeeee;
padding: 2px 6px 3px 6px; /* top right bottom left */
border: 1px solid #999999;
text-decoration: none; /* no underline for text */
This will also involve some trial and error as well as a little more experience with CSS as you are updating more than just basic pixel amounts like you did for the toggler's position. You need to understand the various CSS properties and their values I've used as defaults if you are going to successfully update this rule-set. I would recommend searching for CSS properties and the values they take using Google, i.e., "CSS Properties and Values" for a generic catch all of CSS Property and Value tutorials.
With enough practice and tweaking you can transform the default buttons into some very nice togglers for your own website. Here are some other samples we've used or have created in the past:
The samples above would actually use these images as the backgrounds of the buttons and more CSS would be added to move the original language text out of view so only the image is visible. Some new declarations would need to be added and some removed from the CSS rule-set above in order for this technique to work properly. You'd also need to target each language toggler button individually in order to set the background of the english and spanish buttons independently. But you're in luck here, as we've already added specific IDs you can use to select/target the buttons with in your CSS...
Default Button = #language-toggle-default
2nd Button = #language-toggle-spanish
(Where "spanish" equals the custom language you chose for the JavaScript variable)
Therefore, styling each button individually is easily accomplished by adding a new CSS rule-set for each selector below the default button styling...
#languageToggleContainer a {
/* Default Styling */
...
}
#languageToggleContainer a#language-toggle-default {
background-color: FireBrick;
}
#languageToggleContainer a#language-toggle-spanish {
background-color: DarkGreen;
}
There have also been some major advancements in CSS recently with the more widely available use of CSS3 properties and values which allow developers more freedom in restyling elements without the need for background images to make complex button designs. With CSS3 you can make some really advanced and professional buttons without the need for additional images, such as... using rounded corners, drop shadows, text shadows, basic and advanced gradients, and the list goes on. This is beyond the scope of this tutorial though so if you are unable to reproduce stylish buttons using the more advanced CSS on your own you may want to consider hiring a professional.
If you've gotten this far but need some professional help updating the CSS for your own website
please give us a call and we'll provide a cost estimate to implement the final tweaks for you.
Adding More 2nd Language Pages:
Now that the site is in working order you'll want to add the rest of your 2nd language's pages to be toggled as well. To do so you'll simply need to revisit the [Web Pages] > [Page management] section in the admin and add the new pages using the same logic we used when creating the 2nd language's home page...
- Add a new page.
- Give it a custom title.
- Give it a custom URL slug and language variable.
- Set it to be visible to anyone.
And finally drag the new page down below the 2nd languages home page in a consistent order that would match the default language's page structure and repeat for every new page you need to create.
For example, if our page structure was the following for English:
- Home
- Getting Started
-
- Step 1: Adding the CSS
- Step 2: Adding the 2nd Home Page
- Step 3: Adding the JavaScript
- Step 4: Finalizing Your Site
- Helpful Resources
- Contact Us
The Spanish section of the menu would look similar to the following and would be placed after all the English pages:
- Inicio
- Para Empezar (or maybe Primeros Pasos)
-
- Paso 1: Agregar la CSS
- Paso 2: Adición de la página de inicio segundo (or simply Adición de la Home Page segundo)
- Paso 3: Agregar el código JavaScript
- Paso 4: Finalizando su sitio
- Recursos útiles
- Contacte con nosotros (or simply Contacto)
Once finished be sure to save your changes and have a look at your brand new website now complete with a 2nd language!
I hope you enjoyed our tutorial and also hope you were able to successfully implement all the functionality. If something went awry or you got stuck on any of the steps, and are interested in hiring a professional to help,
please give us a call.
Please visit the
Helpful Resources page for more Wild Apricot tutorials and other helpful CSS websites.
