Translate Front-End Site Interface in Drupal 7 - drupal-7

I am working on a multi-lingual website in Drupal 7. I installed the i18n module to translate the content on the website. However, I also have other site interface elements on the front-end part of the website like button texts, navigation links, etc that I would like to translate.
Is it really necessary to develop different themes per language? Or is there a more elegant solution to do this?
Thanks!

"Is it really necessary to develop different themes per language?"
No, it isn't. Every visual text can be translated, via the Translate interface-entry in the admin menu. If you write your own modules, templates and stuff, use the t-function to make the terms available in Translate interface or write your own po-files.
There is one issue of course: if the length of the terms in language A is too different to language B you can get in trouble with your layout. So test everything in depth and load different css styles if necessary.

Related

DNN MultiSite with multiple layouts and skins

I have 100+ sites I need to create in a CMS. I'm researching different CMSs and have spent some time looking into DNN. It looks pretty promising, however I see two issues:
DNN doesnt seem to support MVC (this is more of annoyance than anything else but I can work around this issue)
DNN development looks like it is expecting 1 skin/layout per VS project
My goal is to have 1 single instance (for now) of DNN running all 100 sites. I know DNN supports multitenancy so that shouldnt be an issue. Each site should be customizable based on layout and css. What I'm not seeing how to do is be able to select different layouts and skins per site. So for example, Site A would have Skin A and Layout A. Site B -> Skin B / Layout B, etc.
How would I go about doing this? Also, is it possible to create all skins/layouts in a single VS project - it seems like I should be able to do this.
I think DNN is a perfect choice :-)
DNN supports MVC. Even if it runs under web forms, there is a control called MVC Panel that allows modules that use this pattern. The routing is a bit different, but it works. See MVC Module Development for more information.
A skin/theme can be applied to any page (even if that does not make too much sense in my eyes). There are three layers: Host (System), Portal (site) and Page (aka Tab), if a skin is not applied to the page, the portal skin is used, if this is not applied, the host skin is used.
To apply a skin to a portal, just set the skin at the portal level (Manage :: Themes). On the page level, you may change that in the page settings (Advanced :: Appearance). The host skin is always the default skin delivered with DNN (called "Xcillion" atm).
You don't need a VS project to create a skin, a good editor is all you need, most people I know who do skinning use Notepad++ or VS Code. For further information read Creating Themes.
Same for Containers (which are the "skin" for the modules placed on a page). Here you have one more layer, you can define the container in the module settings. If not, the one from the page settings is used etc.
I would recommend to have a look at the source code of the Xcillion skin to understand the mechanisms. And maybe download one of the more advanced free stuff and have a look at this code (eg DNN Bootster V2). A first step is always to copy a skin you like and changing the code as you need it.

How to make React app that support multilanguage?

I have reacted app and there are many components, and I want that the text will support multiple languages,
I mean if the user wants English then all content of the component translates into English.
I try to add multilanguage in my react app using the i18next library but I found that I need to write all text in every language and store somewhere then use that.
But I want it when the user selects language and then it translates into the desired language without hard code.
like when we write anything in google translator then it translates all the page with the desired language.
If you want the content of your site to be machine translated on the go, then some browsers (if not all of them) have this built-in functions. Just right click and "translate" the page. So maybe you should just mention about this function somewhere on the page?)
But if you want the content of your site to be professionally translated, then you've got to store it in the db. And depending on the global language state (which could be managed with redux), the content in selected language will be rendered.
Live translation on your website is not a good idea.
Alternatively, checkout translate.i18next.com
like google translate but for i18next.

How to make style library configurable

I'm working with jsps in my workplace. Pages were built using bootstrap2. Though new versions of bootstrap and other frameworks came out, I'm stuck with bootstrap2 as we have hundreds of pages using it.
How do I make the style configurable, in the sense, the configuration should give me the freedom to choose the framework, etc. So going forward I can choose what to be used for new pages
I can relate to your problem as this is the case with many "old" products in the market. They could be built with jQuery, plain js or other tools that considered "old" in today's market.
I assume you could not refactor your whole app as you are saying there hundreds of pages. Some options to consider and to set pros and cons for each with management and product teams.
First, you need to decide your technology you want to use and how.
You can use small bits of react/vue.js/other to inject into your existing pages
you can create full pages from newer technologies and slowly replace older pages in the app one by one
start a full rewrite of the app (hard to sell to management)
I did all three options in my projects but you need to decide with your own team.
Now I'll elaborate on what you can do for each of the options:
I use react so can't recommend other libraries, but this is what I used:
https://github.com/rstacruz/remount
You build react components and then you can use them as HTML snippets in your existing code.
You create another app in whatever new language you want and start building out exiting pages one by one. With each new page, you build you link the old app to them.
This is the easiest one to start but the longest one to achieve. But straightforward of what you need to do.
To make the styles configurable, you can add another stlye.css file underneath the bootstrap2 css file. In that style.css file(name it anything you want, can be bootstrap2_override.css) you can add any styles as well as override bootstrap2's framework styles.
The downside to this is that you are now adding another css file with more CSS just to override bootstrap2 styles.

how to add multiple languages to an English website

I am trying to add two additional languages to my website - Chinese, Japanese. User inputs could be in native language, in English or be mixed. E.g. search by product name. Likewise output can be all-English or be in mixed languages, depending on a user's preferences. I already have applicable translations so that is not a problem. It is a data intensive site. It uses web APIs to fetch JSON data objects, and uses angular and backbone, and jquery.
I will appreciate if you possibly refer me to some good books or pages that provide guidance for building multilingual sites. Are there any particular web standards that must be followed by websites and by browsers?
Googling yields a ton of links, but the discussion appears centered around specific packages such as wordpress, joomla, .net, drupal, etc. and appears more around automated translations. It still left me confused about the basics requirements of multilingual sites as I do not use any of these packages.
Thanks a lot.
ps: if you need to leave me a -1, np. But I would very much appreciate a comment as to why - so that it doesn't appear as if you just vented and offered me no opportunity for improvement.
Wells... when i need to build a bilingual website i just use a language selector menu and build the whole website in 2 languages (i think this way its more professional) cause usually translators doesnt 100% translate correctly and at the end you just get a bunch of stuff making no sense.
Maybe you could use Google Website Translator gadget for what you trying to do?? its paid service tho, you could use also the plugin for Wordpress http://wordpress.org/plugins/google-language-translator/
Or use the Google Ajax Language API https://code.google.com/p/jquery-translate/

Learning Drupal 7 and trying to understand themes and templates

I'm new to learning Drupal and I'm hoping someone can explain something to me. I'm trying to figure out how to change certain pages to have different template designs, for example one page can have a two column layout and one page can have a three column layout or one page can be a gallery.
Similar to this template from template monster.
http://www.templatemonster.com/drupal-themes/39996.html
So far all I have seen in terms of tutorials is just installing and setting up a theme and arranging the blocks around the site but nothing about changing templates.
I'm use to the way Wordpress does everything where with just one click in the dashboard you can change the template design of the page. If someone can explain how they differ and how they are similar that would be great!
Also if their is a good book on Drupal 7 please let me know.
Thanks!
Congratulations on beginning your trek into learning Drupal. It is, in my opinion, the best of the CMS's available today.
Drupal templates are controlled when logged in as a user with site administration in the 'Appearance' section. There, you can add a new theme or switch between those themes already installed on your site.
As for site themes displaying different page layouts depending on the which page you browse, as a general rule Drupal treats your home page differently than internal pages. Using modules such as the Pages module, you can control the appearance, layout and functionality of specific pages of your site.
There are a number of excellent books on Drupal 7 that cover basic as well as intermediate topics. My favorite is Drupal 7 Manual by David Ipswich.
Best of luck!

Resources