Poseidon support RTL layout

Post Reply
yalomoush
Posts: 4
Joined: 12 Feb 2017, 10:35

12 May 2017, 13:57

Hi,

Is there a way to make Poseidon support RTL layout?

btw I tried the solution proposed by aragorn to Ultimate theme :

Code: Select all

      <style type="text/css">
            .ui-ultima-rtl.layout-wrapper .layout-menu {
                right: 0;
                direction: rtl;
                margin-right: 0px;
                transition: margin-right 0.3s;
            }
            .ui-ultima-rtl.layout-wrapper .layout-main {
                transition: margin-right 0.3s;
            }
            .ui-ultima-rtl.layout-wrapper .topbar-items {
                float: left;
            }
            .ui-ultima-rtl.layout-wrapper .ultima-menu li a i:last-child {
               float: left;
            }
            .ui-ultima-rtl.layout-wrapper .ultima-menu li a i:first-child {
               padding-left: 8px;
               margin-right: 0px;
            }
            .ui-ultima-rtl.layout-wrapper .layout-menu > .nano > .nano-content.menu-scroll-content {
               margin-right: 0px !important;
               margin-left: -17px;
            }
            .ui-ultima-rtl .nano > .nano-pane {
               right: auto;
               left: 0;
            }
            .ui-ultima-rtl.layout-wrapper.menu-layout-static .layout-main {
               margin-left: 0;
               margin-right: 250px;
            }
            .ui-ultima-rtl.layout-wrapper .topbar .topbar-left{
               float: right;
            }
            .ui-ultima-rtl.layout-wrapper .topbar .topbar-right #menu-button {
               margin-right: 0px;
               left: 13px;
               float: right;
            }
            .ui-ultima-rtl.layout-wrapper .topbar-items {
                float: left;
           }
           .ui-ultima-rtl.layout-wrapper .ultima-menu li a i:last-child {
               float: left;
           }
           .ui-ultima-rtl.layout-wrapper .ultima-menu li a i:first-child {
               padding-left: 8px;
               margin-right: 0px;
           }
           .ui-ultima-rtl.layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu {
               margin-left: 0px;
               margin-right: -250px;
           }

           .ui-ultima-rtl.layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-main {
               margin-right: 0px;
           }
   
           .ui-ultima-rtl.layout-wrapper .topbar .topbar-right #menu-button i {
               transform: rotate(180deg);
           }

            .ui-ultima-rtl.layout-wrapper.layout-menu-static-inactive .topbar .topbar-right #menu-button i,
            .ui-ultima-rtl.layout-wrapper.layout-menu-overlay-active .topbar .topbar-right #menu-button i{
               transform: rotate(0deg);
           }

           .ui-ultima-rtl.layout-wrapper .topbar-items > li > a .topbar-badge,
           .ui-ultima-rtl.layout-wrapper .topbar-items > li > ul {
               right: auto;
           }
           .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items .search-item input {
               direction: rtl;
           }

           .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items .search-item label {
               left: auto;
               right: 43px;
           }
           body .ui-ultima-rtl.layout-wrapper .ultima-menu li a {
               direction: rtl;
           }

           body .ui-ultima-rtl.layout-wrapper .ultima-menu li a i:first-child,
           body .ui-ultima-rtl.layout-wrapper .ultima-menu li a img:first-child,
           .ui-ultima-rtl.layout-wrapper .ultima-menu li a span{
               float: right;
           }
           body .ui-ultima-rtl.layout-wrapper .ultima-menu li ul li a{
               padding: 8px 32px 8px 16px;
           }
           
           body .ui-ultima-rtl.layout-wrapper .ultima-menu li ul li ul li a {
               padding-left: 16px;
               padding-right: 48px;
           }
           
           body .ui-ultima-rtl.layout-wrapper .ultima-menu li ul li ul ul li a {
               padding-left: 16px;
               padding-right: 64px;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-overlay .layout-menu {
               margin-left: 0px;
               margin-right: -250px;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .layout-menu {
               margin-right: 0px;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-main {
               margin-right: 0px;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .ultima-menu li a i:last-child {
               margin-right: 3px;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-menu ul.ultima-menu > li {
               float: right;
           }
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-menu ul.ultima-menu > li > ul {
               left: auto;
           }
           
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-menu ul.ultima-menu > li > ul li ul li a {
               padding-left: 16px;
               padding-right: 32px;
           }
           .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-menu ul.ultima-menu > li > ul li ul ul li a {
               padding-left: 16px;
               padding-right: 48px;
           }
           
           @media (max-width: 1024px) {
               .ui-ultima-rtl.layout-wrapper.menu-layout-static .layout-main {
                   margin-right: 0px;
               }
               .ui-ultima-rtl.layout-wrapper.menu-layout-static .layout-menu {
                   margin-left: 0px;
                   margin-right: -265px;
               }
               .ui-ultima-rtl.layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button i {
                   transform: rotate(0deg);
               }
               .ui-ultima-rtl.layout-wrapper.menu-layout-static.layout-menu-static-active .topbar .topbar-right #menu-button i {
                   transform: rotate(180deg);
               }
               .ui-ultima-rtl.layout-wrapper.menu-layout-static.layout-menu-static-active .layout-menu{
                   margin-right: 0px;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right #topbar-menu-button {
                   right:auto;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items {
                   right: auto;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items.topbar-items-visible {
                   direction: rtl;
               }

               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items > li.search-item input {
                   padding-right: 30px;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items > li > a .topbar-badge {
                   left:auto;
                   right: 28px;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items > li > a i {
                   margin-left: 10px;
                   margin-right: 0px;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items > li.active-top-menu > ul {
                   padding-right: 32px;
               }
               .ui-ultima-rtl.layout-wrapper.menu-layout-horizontal .layout-menu ul.ultima-menu > li {
                   float: none;
               }
               .ui-ultima-rtl.layout-wrapper .topbar .topbar-right .topbar-items > li.profile-item .profile-image {
                   margin-left: 8px;
                   margin-right: -2px;
               }
           }
        </style>
The result was:
https://ibb.co/mJM1BQ

User avatar
aragorn
Posts: 3411
Joined: 29 Jun 2013, 12:38

14 May 2017, 22:08

Added RTL support to next version; https://github.com/primefaces/poseidon/issues/4

Post Reply

Return to “Poseidon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest