[Resolved] GP child-theme and RTL

[themedleb]

Hi, I’ve got the GeneratePress child-theme from GeneratePress documentation website, and the function file has this inside:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

Then when I had an issue, Tom had a look at my website and found out that it doesn’t include the GP rtl.css file, so he referred me here to add the code so the RTL will be included, now after pasting the code to the child-theme’s function file, it looked like it has almost the same codes.

1- Does the two codes provide the same job? Or should I keep both of them?

2- The child-theme has a PHP starting tag <?php but doesn’t have an ending tag (as I know, it should), so, is it okay to just use it without the ending tag and paste my PHP code anywhere I want, or should I include an ending tag and insert my PHP codes inside the starting and ending tags?

Thank you.

[themedleb]

I also have a question related to this issue:

You already gave me a CSS code to make GP RTL compatible with some stuff:

.header-aligned-left .site-header,
caption,
td,
th {
    text-align: right;
}
.main-navigation ul ul {
    float: right;
    left: auto;
    right: 0;
    text-align: right;
}
.main-navigation ul ul ul {
    left: auto;
    right: 100%;
}

.menu-item-has-children .dropdown-menu-toggle {
	float: left !important;
}
.alignleft {
    float: right;
    margin-left: 1.5em;
}
.alignright {
    float: left;
    margin-right: 1.5em;
}
.main-navigation li {
    float: right;
}
.main-navigation li.search-item {
    float: left;
}
.nav-left-sidebar .main-navigation li.search-item.current-menu-item,
.nav-right-sidebar .main-navigation li.search-item.current-menu-item {
    float: left;
}
.sidebar .menu-item-has-children .dropdown-menu-toggle,
nav ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
}
.comment-meta .avatar {
    float: right;
    margin-left: 10px;
}
.page-header .avatar {
    float: right;
    margin-left: 1.5em;
}
.header-widget {
    float: left;
}
.sf-menu>li.menu-item-float-right {
    float: left!important;
}
.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    float: left;
}
.dropdown-click #generate-slideout-menu .slideout-menu .menu-item-has-children>a:first-child,
.slideout-desktop.dropdown-hover #generate-slideout-menu .slideout-menu .menu-item-has-children>a:first-child {
    padding-left: 0;
}
.comment .children {
    padding-right: 30px;
    border-right: 1px solid rgba(0, 0, 0, .05);
}
.main-navigation .main-nav ul li.menu-item-has-children>a,
.secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-left: 0;
}
nav:not(.toggled) ul ul .menu-item-has-children .dropdown-menu-toggle {
    padding-left: 15px;
}
nav:not(.toggled) .menu-item-has-children .dropdown-menu-toggle {
    padding-right: 10px;
}
.main-navigation ul,
.menu-toggle li.search-item {
    padding-right: 0;
}
ol,
ul {
    margin: 0 3em 1.5em 0;
}
li>ol,
li>ul {
    margin-right: 1.5em;
}
.menu-toggle .mobile-menu {
    margin-right: 5px;
	margin-left: 0;
}
.widget_categories .children {
    margin-right: 1.5em;
}
.right-sidebar .site-main {
    margin: 30px 0 30px 30px;
}
.left-sidebar .site-main {
    margin: 30px 30px 30px 0;
}
.both-right.separate-containers .site-main {
    margin: 30px 0 30px 30px;
}
.both-left.separate-containers .site-main {
    margin: 30px 30px 30px 0;
}
.both-left .inside-left-sidebar,
.both-right .inside-left-sidebar {
    margin-left: 15px;
}
.both-left .inside-right-sidebar,
.both-right .inside-right-sidebar {
    margin-right: 15px;
}
.one-container.both-right .site-main,
.one-container.right-sidebar .site-main {
    margin-left: 60px;
}
.one-container.both-left .site-main,
.one-container.left-sidebar .site-main {
    margin-right: 60px;
}
.widget_nav_menu ul ul,
.widget_pages ul ul {
    margin-right: 1em;
}
.cat-links:before,
.comments-link:before,
.nav-next .next:before,
.nav-previous .prev:before,
.tags-links:before,
footer.entry-meta .author:before,
footer.entry-meta .posted-on:before {
    margin-left: 5px;
}

.menu-toggle,
.nav-search-enabled .main-navigation .menu-toggle {
	text-align: right;
}

.main-navigation .mobile-bar-items {
	float: left;
	left: 0;
	right: auto;
}

@media (max-width: 768px) {
	.main-navigation .main-nav li {
		text-align: right !important;
	}
	.rtl .mobile-bar-items {
        float: left !important;
        position: relative;
    }
}

@media (min-width: 768px) {
	.inside-footer-widgets > div {
		float: right;
	}
	.menu-item-has-children ul .dropdown-menu-toggle {
		transform: rotate(180deg);
	}
}

Is this code is still needed If I just used the function given above?

[Tom]

That’s correct – those two functions do the same thing.

That code looks like the rtl.css file in the parent theme.

[themedleb]

Thank you.
So I don’t need to use the above CSS code if I’m already using the function?

[Tom]

Correct 🙂

[themedleb]

Thanks 🙂

[Author]

Posts