Home Forums Porto Template FAQ’s How to activate the RTL compatibility

This topic contains 0 replies, has 1 voice, and was last updated by  Support 3 years, 11 months ago. This post has been viewed 5038 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #10005868

    Support
    Keymaster

    To activate the RTL mode please follow the steps:

    1) Add the “dir” attribute in the HTML tag:

    2) Add the Bootstrap RTL version after the default Bootstrap file in the HTML:

    3) Copy all the files from the folder: HTML/master/rtl/css to the default css folder HTML/css.

    4) Add the “rtl-” prefix in the files:

    <html dit="rtl">
    	<head>
    
    		<!-- Basic -->
    		<meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">	
    
    		<title>Porto - Responsive HTML5 Template</title>	
    
    		<meta name="keywords" content="HTML5 Template" />
    		<meta name="description" content="Porto - Responsive HTML5 Template">
    		<meta name="author" content="okler.net">
    
    		<!-- Favicon -->
    		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    
    		<!-- Mobile Metas -->
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    		<!-- Web Fonts  -->
    		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
    
    		<!-- Vendor CSS -->
    		<link rel="stylesheet" href="vendor/bootstrap/bootstrap.css">
    		<link rel="stylesheet" href="vendor/bootstrap/bootstrap-rtl.css">
    		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    		<link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.min.css" media="screen">
    		<link rel="stylesheet" href="vendor/owlcarousel/owl.theme.default.min.css" media="screen">
    		<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
    
    		<!-- Theme CSS -->
    		<link rel="stylesheet" href="css/rtl-theme.css">
    		<link rel="stylesheet" href="css/rtl-theme-elements.css">
    		<link rel="stylesheet" href="css/rtl-theme-blog.css">
    		<link rel="stylesheet" href="css/rtl-theme-shop.css">
    		<link rel="stylesheet" href="css/theme-animate.css">
    
    		<!-- Skin CSS -->
    		<link rel="stylesheet" href="css/skins/default.css">
    
    		<!-- Theme Custom CSS -->
    		<link rel="stylesheet" href="css/custom.css">
    
    		<!-- Head Libs -->
    		<script src="vendor/modernizr/modernizr.js"></script>
    
    		<!--[if IE]>
    			<link rel="stylesheet" href="css/rtl-ie.css">
    		<![endif]-->
    
    		<!--[if lte IE 8]>
    			<script src="vendor/respond/respond.js"></script>
    			<script src="vendor/excanvas/excanvas.js"></script>
    		<![endif]-->
    
    	</head>

    Porto version 3.6 and 3.7

    To activate the RTL mode please follow the steps:

    1) Add the “dir” attribute in the HTML tag:

    2) Add the Bootstrap RTL version after the default Bootstrap file in the HTML:

    3) Move and Replace all the files from the folder: HTML/master/rtl/css to the default css folder HTML/css.


Viewing 1 post (of 1 total)