RTL Portfolio items & RTL Menu

16 posts from 4 voices

• Started 10 months ago by RSL
• Latest reply from Nick
• This topic is not resolved

Tags:

• Arabic
• rtl
• wpml

1. 

   RSL
   Member

   Hi,

   Our site is in both English & Arabic language using WPML. All of the CSS seems to work fine for Arabic RTL but is there a way to resolve these remaining issues for the Arabic/RTL:

   1. In portfolios - how can we start items form the Right & not Left
   2. We are displaying the WPML language selector in the Main Menu which displays after the normal menus on the right for English/LTR thus becoming the last menu item but it also does the same for Arabic/RTL menu thus becoming the first menu item. Can the menu order be reversed for RTL so that the language selector as the last (right-most) menu item for RTL?

   Also, how can we change the Horizontal WPML language switcher that appears in the header on the top right with flags to show language names instead of flags?

   Posted 10 months ago #
2. 

   Nick
   Moderator

   Hi,

   Please:

   1) Add this code to Quick CSS in backend - Eunoia > Theme Options > Styling
   

   #js_sort_items{float: right}

   For your other questions, I must see the plugin inside Eunoia.

   Thanks,

   Nick

   Posted 10 months ago #
3. 

   RSL
   Member

   Hi,

   Thanks for your reply. That has made the sort menu right-aligned but the sort menu items are still LTR so ALL is on the left.

   But the actual portfolio items start from the left & so if we have less items than the available width e.g. 1 or 2 items - they are left aligned so this looks wrong with an RTL language. Any idea how to resolve that?

   Regarding the WPML problems that you need access to - I'm actually on local dev install but I'll upload it tonight so that you can have a look.

   Posted 10 months ago #
4. 

   Nick
   Moderator

   Hi,

   Ok, I understand now. Mistake was mine for not thinking it through more. The solution is below, yet there are several other places throughout the theme where you will run into similar issues, though this is the most obvious case.

   Please open loop-portfolio.php which is in the includes folder of the theme *after* you backed up and saved the original file.

   Find a block of code approximately between lines 67-83:
   

   $output .= "<div class='sort_by_cat $hide '>";
   $output .= "<a href='#' data-filter='all_sort' class='all_sort_button active_sort'>".__('All','avia_framework')."</a>";
   			foreach($categories as $category)
   			{
   				$output .= "<span class='text-sep ".$category->category_nicename."_sort_sep'>/</span>";
   				$output .= "<a href='#' data-filter='".$category->category_nicename."_sort' ";
   				$output .= "class='".$category->category_nicename."_sort_button' >".$category->cat_name."</a>";
   
   				$container_id .= $category->term_id;
   			}
   			$output .= "</div>";
   			$output .= "</div></div>";
   
   			//fake pagesplit

   and replace it with the code below
   

   $output .= "<div class='sort_by_cat $hide '>";
   
   			$categories = array_reverse($categories, true); //reverses categories for right-to-left languages
   			foreach($categories as $category)
   			{
   				$output .= "<span class='text-sep ".$category->category_nicename."_sort_sep'>/</span>";
   				$output .= "<a href='#' data-filter='".$category->category_nicename."_sort' ";
   				$output .= "class='".$category->category_nicename."_sort_button' >".$category->cat_name."</a>";
   
   				$container_id .= $category->term_id;
   			}
   			$output .= "<a href='#' data-filter='all_sort' class='all_sort_button active_sort'>".__('All','avia_framework')."</a>"; //All displayed last in right to left languages
   			$output .= "</div>";
   			$output .= "</div></div>";
   
   			//fake pagesplit

   Please let us know how it went.

   Thanks,

   Nick

   Posted 10 months ago #
5. 

   RSL
   Member

   Hi Nick,

   I actually had just worked out a simple CSS solution for reversing the Portfolio Sort Menu order:

   #js_sort_items {
   	float: right;
   	padding-left:5px;
   	padding-right: 0;
   }
   
   #js_sort_items a {
   	float:right;
   	margin-left:6px;
   	margin-right: auto;
   }

   But unfortunately the more important solution for actually starting the PORTFOLIO ITEMS from the right for RTL still hasn't been resolved - any ideas??

   Thanks

   Posted 10 months ago #
6. 

   Nick
   Moderator

   Hi,

   Unfortunately it's not feasible for the support team to redo significant areas of the theme as a mirror image. Besides, there are even more areas where you will run into the same issues. Your best bet is to hire a freelancer to further customize your theme and truly make your site fully right-to-left compatible.

   Thanks,

   Nick

   Posted 10 months ago #
7. 

   Nick
   Moderator

   Hi,

   Take a look here, there are some examples of how to go about doing this:

   http://isotope.metafizzy.co/docs/help.html#righttoleft_layouts
   http://isotope.metafizzy.co/tests/right-to-left.html

   Good luck,

   NIck

   Posted 10 months ago #
8. 

   RSL
   Member

   Hi Nick,

   I've managed to RTL everything else required in the theme so far. I think the only thing remaining is to start the Portfolio Items from the Right.

   I'll try & have a look - I presume it's the avia.js that contains the Isotype javascript that needs to be changed as per the help link you sent me. The only thing is I haven't got a clue how I can change it only for RTL & keep it the same for LTR.

   Thanks

   Posted 10 months ago #
9. 

   Nick
   Moderator

   Hi,

   Could you put up a demo with the plugin please? I was going to play around with it this weekend, but I forgot that you want two version to work depending on the plugin's language selection.

   Logically something like this needs to happen:

   1) Page starts loading
   2) jQuery checks selector of plugin to see what language is shown
   3) conditionally LTR or RTL sections of code are executed

   or possibly can also use PHP to conditionally enqueue avis.js or avis-rtl.js based on metadata from the plugin. Since I don't have it, I am not sure what method it uses to keep track of which language to display for visitors, cookies, meta data, etc...

   There are two or three locations where the categories are being displayed, did you change all of them?

   Thanks,

   Nick

   Posted 10 months ago #
10. 

    RSL
    Member

    Hi,

    Thanks for wanting to give it a go. I'll put up a demo site within an hour (it's local at present) - can you let me know how to send you the address & login details privately.

    Posted 10 months ago #
11. 

    RSL
    Member

    The demo site is up. Please email me @ rasheed_dot_laskar_at_gmail_dot_com & I'll send you the address & WP credentials.

    Thanks

    Posted 9 months ago #
12. 

    Nick
    Moderator

    Email sent.

    Posted 9 months ago #
13. 

    RSL
    Member

    WP & FTP credentials sent.

    Thanks

    Posted 9 months ago #
14. 

    Devin
    Moderator

    Hi RSL,

    The topic is tagged for Nick's personal Queue so he'll be able to get back onto your issue shortly.

    Regards,

    Devin

    Posted 9 months ago #
15. 

    ifikra
    Member

    I'm very interested in finding the solution for the RTL listing as we are using Arabic for our website. Please, and if possible, do share the finding with us :) thanks

    Posted 6 months ago #
16. 

    Nick
    Moderator

    Hi,

    Here is the page that gives the instructions for changing the portfolio code to RTL http://isotope.metafizzy.co/docs/help.html#righttoleft_layouts

    There is CSS above on this post, but your best bet is to contact RSL, his email is above since he worked it all out and is certain to help a fellow Arabic sites developer. But the code in this post will definitely get you going, and if you get stuck just post your url here and we will help you work it out.

    Thanks,

    Nick

    Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.