rtl.css

  • Resolved pgDarkness

    (@pgdarkness)


    8 years, 9 months ago

    Hi everybody,
    I’m trying to use this theme in an rtl language website.
    I know how to write an rtl.css and yes I read the tutorial provided by WordPress. But the problem is this theme has too many css files and looks scary to me. So I decided instead of translating the entire css to an rtl version, I just retouch this and that wherever I see fit. This is what I came with so far :
    rtl.css in my child theme :

    /*
Theme Name: Quest Child
Template: quest
*/
/*@media all and (min-width:768px) {
  .main-navigation .nav > li {
    float: right;
  }
  .main-navigation .nav > ul {
    float: left;
  }
}
/*@media all*/
.main-sidebar .sidebar-widget .widget-title {
    text-align: right;
}
/*@media all*/
.dropdown-menu {
    text-align: right;
}
/*@media all*/
#menu-item-search .fa-search {
    top: 2px;
}
/*@media all*/
form.search .fa-search {
    right: auto;
    left: 20px;
    top: 6px;
}
/*@media all*/
article.post-normal h1 {
    text-align: right;
}
/*@media all*/
.read-more {
    text-align: left;
}
/*@media all*/
.read-more a .fa-angle-double-right {
    left: auto;
    right: 108%;
}
/*@media all*/
.post-categories, .post-tags {
    text-align: left;
}
/*@media all*/
.fa-angle-double-right::before {
    content: "\f100";
}
.fa-clock-o::before {
    content: "\f017?";
}
.fa-comments::before {
    content: "\f086?";
}
.post-categories::before, .post-tags::before {
    content: "\f15b?";
}

    but still I have these problems that I cant figure out : (I’m new to css)
    1- Main Menu is floating in the wrong direction :
    Can’t find the correct selector to use “float: right” style for it.
    2- In smaller devices, Objects from left to right goes vertical, instead now it should do right to left go vertical.
    I can only imagine how much work the second problem would take to fix.

    The website address is : pgdarkness.ir

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter pgDarkness

    (@pgdarkness)

    anyone care to comment?

    Thread Starter pgDarkness

    (@pgdarkness)

    OK, I spent some of my time today for this and I’ve got some results.

    The root of my two problems I mentioned before is the order of objects getting inserted into it.
    Something I think can not be fixed by CSS and I need to modify the PHP function responsible for creating that item. Hear the rest of story and correct me if I’m wrong.

    This is what I did :
    1. I’ve created a complete RTL version of main style.css.
    2. I’ve placed new style.css into root folder of my child theme.
    3. Modified my child theme functions.php so it won’t use the parent style.css.

    At this point there were broken things because of their order (like social icons and Copyright text in footer) and I figured I need to change PHP functions to fix them.

    4. So I modified footer.php and swapped those to functions.
    5. And finally removed previous rtl.css. This is my child theme directory now :

    fonts {a folder containing my own fonts}
style.css {RTL version of original style.css}
footer.php {modified to reorder items in footer}
functions.php
screenshot.png

    Wild journey. Now I need help to do the rest.
    My next problem is to modify the rest of php codes to reorder the rest of broken things (like navigation or quest_title_bar) and the problem is their code is located in a subdirectory.
    For example to fix quest_title_bar, I need to modify template-tags.php located in :

    .\inc\template-tags.php

    I’ve created the same directory with modified php file in my child theme but no luck. Then I find out there is a function in functions.php @line 385 that calls that file :

    /**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

    I tried to modify the function in my child theme functions.php but it broke the website.

    So what do I do now?

    Thread Starter pgDarkness

    (@pgdarkness)

    C’mon guys give me a hand here please.
    Thanks for your participation.

    can you give us any screenshot or a link for a live preview ??? so we can help.

    Thread Starter pgDarkness

    (@pgdarkness)

    Thank you for your reply.
    The website address is : pgdarkness.ir

    Thread Starter pgDarkness

    (@pgdarkness)

    Let me try to visualize it.

    quest_title_bar :
    1. Original CSS :
    [<-page title][empty space][breadcrumb->]
    2. RTL CSS :
    [empty space][page title->][<-breadcrumb][empty space]
    3. What I need it to be :
    [<-breadcrumb][empty space][page title->]

    The two objects’ placement needs to be switched.
    As I mentioned I fixed this problem in footer by switching PHP code order of two objects in footer.php.
    But I need to change a file named “template-tags.php” in “.\inc\template-tags.php” to be able to fix the quest_title_bar and I don’t know how to do that in a child theme.

    Any suggestion(s) would be apportiated.
    Is it possible or should I remake a new theme instead of working on a child version?

    Thread Starter pgDarkness

    (@pgdarkness)

    Ok guys, let’s hope I’m doing it right, with that being said, plain and simple :
    How can I use a modified version of a theme file in a child theme which is located in a subdirectory and is being called in theme’s function.php?

    File location :

    .\inc\template-tags.php

    Part of function.php :

    /**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

    Thread Starter pgDarkness

    (@pgdarkness)

    Thanks for nothing.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘rtl.css’ is closed to new replies.