Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] Full Width Layout with "Reddle"-themen


  • 1a-spielwiese
    Participant

    @1a-spielwiese

    I tried to apply the section ‘B. Full Width Layout’-description for my page, where I use the ‘Reddle’-theme.

    1st:

    I created a new folder wp-content/themes/reddle-child.

    2nd:

    I created a new file buddypress.php with that content:

    <?php
    /**
     * BuddyPress: Full-width Page Template, No Sidebar
     *
     * A full-width template for all BuddyPress pages.
     *
     * @ since Reddle 1.0 and BuddyPress 2.0.3
     */
    
    get_header(); ?>
    
    		<div id="primary">
    			<div id="content" role="main">
    
    				<?php while ( have_posts() ) : the_post(); ?>
    
    					<?php get_template_part( 'content', 'page' ); ?>
    
    					<?php comments_template(); ?>
    
    				<?php endwhile; // end of the loop. ?>
    
    			</div><!-- #content -->
    		</div><!-- #primary -->
    
    <?php get_footer(); ?>

    I.e.: I deleted the line

    <?php get_sidebar(); ?>

    from the page.php of the ‘Reddle’-theme.

    3rd:

    I created a new file functions.php with that content:

    ?php
    // Remove sidebar body class in BuddyPress pages
    function mme_remove_sidebar_body_class($wp_classes) {
        if( function_exists ( 'bp_loaded' ) && !bp_is_blog_page() && is_active_sidebar( 'sidebar-2' ) ) :
            foreach($wp_classes as $key => $value) {
                 if ($value == 'sidebar') unset($wp_classes[$key]);
            }
        endif;
        return $wp_classes;
    }
    add_filter('body_class', 'mme_remove_sidebar_body_class', 20, 2);

    4th:

    I created a new style.ccs with that content:

    /*
    Theme Name: Reddle
    Theme URI: http://theme.wordpress.com/themes/reddle/
    Author: Automattic
    Author URI: http://automattic.com/
    Description: Everything about Reddle's minimal design elegantly adapts to how you want to use your blog and what you want to use it for. Want to use your blog for a simple one-column link blog? A two-column business site with a custom header and no posts? Reddle can do that too &mdash; and look good doing it too.
    Version: 1.3.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: red, white, one-column, right-sidebar, two-columns, fixed-width, flexible-width, custom-background, custom-header, custom-menu, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
    
    Reddle, Copyright 2014 Automattic, Inc.
    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned with others.
    */
    
    @import url("../reddle/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    .buddypress .entry-header,
    .buddypress .entry-content,
    .buddypress .entry-summary,
    .buddypress .entry-meta {
        max-width: 1040px;
        width: 100%;
    }
     
    @media (max-width: 1069px) {
        .buddypress .entry-header,
        .buddypress .entry-content,
        .buddypress .entry-summary,
        .buddypress .entry-meta {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    5th:

    I uploaded all three files to the ‘reddle-child’-folder; but the sidebar is still displayed.

    Vague suspection: The ‘Reddle’-equivalent for the ‘sidebar body class’ in the ‘Twenty Thirdteen’-theme is called different. – But how can I recognise, what is in the ‘Reddele’-theme the equivalent for the ‘sidebar body class’ in the ‘Twenty Thirdteen’-theme?

Viewing 18 replies - 1 through 18 (of 18 total)

  • @mercime
    Keymaster

    @mercime

    @1a-spielwiese The better guide to use in making a full-width page for the theme you’re using, https://wordpress.org/themes/reddle, is the one for Twenty Twelve at https://codex.buddypress.org/themes/bp-theme-compatibility-and-the-wordpress-default-themes/twenty-twelve-theme/

    HTML structure for Reddle and Twenty Twelve are almost identical. However. for Step 4 of the Full-Width instructions, instead of using body.buddypress .site-content in media query, add the following to your child theme’s stylesheet:

    @media screen and (min-width: 600px) {
           body.buddypress #primary {
                  width: 100%;
           }
    }

    1a-spielwiese
    Participant

    @1a-spielwiese

    Thank you.

    1st:

    Besides the different “HTML structure for Reddle and Twenty” Thirdteen I made earlier two fundamental mistakes:

    a) I did not recognise, that the comment at the beginning of a child theme must be different, than the comment at the beginning of the parent theme.

    ‘The only required lines are the Theme Name, the Template.

    The Template is the directory name of the parent theme.’

    https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

    So, within my earlier attempt, step 4th it should have been not:

    Theme Name: Reddle

    Rather:

    Theme Name: Reddle Child

    And it was missing there the line:

    Template: reddle

    Isn’t it?

    b) I did not recognise the instruction:

    Activate the child theme.

    2nd:

    However, now the content of the style.css within my reddle-child folder is:

    /*
     Theme Name:   reddle-child
     Template:     reddle
    */
    
    @import url("../reddle/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    @media screen and (min-width: 600px) {
           body.buddypress #primary {
                  width: 100%;
           }
    }

    Is it correct?

    Besides I activated the reddle-child theme, and deactiviated the reddle-theme. – Nevertheless it still not works.

    3rd:

    ‘Copy over the content of Twenty Twelve’s full-width.php file into the new buddypress.php file.’

    https://codex.buddypress.org/themes/bp-theme-compatibility-and-the-wordpress-default-themes/twenty-twelve-theme/

    The ‘Reddle’-theme does not have any full-width.php

    Therefore I took directly the code, which is mentioned there.

    Therefore content of my buddypress.php within my reddle-child-folder is now:

    <?php
    /**
     * BuddyPress: Full-width Page Template, No Sidebar
     *
     * A full-width template for all BuddyPress pages.
     *
     * @ since Reddle 1.0 and BuddyPress 2.1
     */
    
    get_header(); ?>
     
        <div id="primary" class="site-content">
            <div id="content" class="full-width" role="main">
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php get_template_part( 'content', 'page' ); ?>
                <?php endwhile; // end of the loop. ?>
            </div><!-- #content -->
        </div><!-- #primary -->
     
    <?php get_footer(); ?>

    4th:

    But nevertheless it does not work.


    @mercime
    Keymaster

    @mercime

    @1a-spielwiese posted a simple walk through specifically for the Reddle theme full-width layout at http://wp.me/p1I84P-6y


    1a-spielwiese
    Participant

    @1a-spielwiese

    Thank you very much.

    It works with the code for the buddypress.php + inserting the other code:

    .buddypress #main #primary {
        margin: 0;
    }
    
    .buddypress #main #content {
        margin: 0 9.46429%;
    }

    via Dashboard / ‘Simple Custom CSS’-plugin.

    But there still must be a mistake within the style.css for my child theme folder. It’s content is right now:

    /*
     Theme Name:   Reddle Child
     Template:     reddle
    */
    
    @import url("../reddle/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    .buddypress #main #primary {
        margin: 0;
    }
    
    .buddypress #main #content {
        margin: 0 9.46429%;
    }

    But it does not work without using ‘Simple Custom CSS’…


    @mercime
    Keymaster

    @mercime

    @1a-spielwiese My bad, no need for the simple css plugin, updated http://wp.me/p1I84P-6y to add code that enqueues child theme’s stylesheet via functions.php file.


    1a-spielwiese
    Participant

    @1a-spielwiese

    I have created within my child-theme-folder a functions.php with that code; but it still not works.


    @mercime
    Keymaster

    @mercime

    @1a-spielwiese Sorry it’s not working out for you. I just installed a reddle child theme with all the code provided in above link in my server and it’s working fine without the simple css plugin. Let’s double-check that you have all the necessary materials:

    – theme folder e.g. reddle-child
    style.css file in reddle-child theme folder
    functions.phpfile in reddle-child theme folder
    buddypress.php file in reddle-child theme folder


    1a-spielwiese
    Participant

    @1a-spielwiese

    Yes, I have

    • a folder wp-content/themes/reddle-child

    and inside that folder:

    • a style.css. It’s content is:
    /*
     Theme Name:   Reddle Child
     Template:     reddle
    */
    
    @import url("../reddle/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    .buddypress #main #primary {
        margin: 0;
    }
    
    .buddypress #main #content {
        margin: 0 9.46429%;
    }
    • a functions.php. It’s content is:
    <?php
    
    /**
     * Enqueue stylesheet
     */
    function reddle_child_theme_stylesheet() {
    	wp_enqueue_style( 'reddle-child-themestyle', get_stylesheet_uri() );
    }
    add_action( 'wp_enqueue_scripts', 'reddle_child_theme_stylesheet' );
    • and a buddypress.php. It’s content is:
    <?php
    /**
     * BuddyPress: Full-width template
     *
     * A custom page template without sidebar.
     *
     * @ since Reddlle 1.3.1 and BuddyPress 2.1
     */
    
    get_header(); ?>
     
    	<div id="primary">
    		<div id="content" role="main">
    			<?php while ( have_posts() ) : the_post(); ?>
    				<?php get_template_part( 'content', 'page' ); ?>
    			<?php endwhile; // end of the loop. ?>
    		</div><!-- #content -->
    	</div><!-- #primary -->
     
    <?php get_footer(); ?>

    1a-spielwiese
    Participant

    @1a-spielwiese

    PS.:

    margin: 0 9.46429%;

    I guess, it’s not the reason for the misfuncting; but however – due to other theme modifications (https://wordpress.org/support/topic/making-a-better-usage-of-my-blog-space?replies=2#post-6034077) – I should choose 2.5% (instead of 9.46429), isn’t it?


    1a-spielwiese
    Participant

    @1a-spielwiese


    @mercime
    :

    Let’s double-check that you have all the necessary materials:
    – theme folder e.g. reddle-child
    style.css file in reddle-child theme folder
    function<strong>s</strong>.php file in reddle-child theme folder
    buddypress.php file in reddle-child theme folder

    Should it be ‘function.php’ [singular] or ‘functions.php’ [plural]?

    Cfr. https://buddypress.org/support/topic/buddypress-2-1-bp-language/page/2/#post-199810:

    ‘You need to put this code in function.php in your child theme.’


    danbp
    Moderator

    @danbp

    Please, make an effort to read more carefully the answers you receive and avoid asking for the same thing in multiple topics ! 👿


    @mercime
    : functions

    The file name is functions.php


    1a-spielwiese
    Participant

    @1a-spielwiese

    Please, make an effort to read more carefully the answers you receive and avoid asking for the same thing in multiple topics ! 👿


    @mercime
    : functions

    1st:

    The file name is functions.php


    @mercime
    wrote ‘functions‘!

    It was @shpitzyl (https://buddypress.org/support/topic/buddypress-2-1-bp-language/page/2/#post-199810), who wrote ‘function’ (without ‘s’).

    ‘Please, make an effort to read more carefully’ 😉

    2nd:

    I guess, different users follow different topics. 🙂


    danbp
    Moderator

    @danbp

    I answered to this question:
    Should it be ‘function.php’ [singular] or ‘functions.php’ [plural]?


    1a-spielwiese
    Participant

    @1a-spielwiese

    Thank you for answering. And I understood the answer.

    And my file name is with “s”.

    Best

    🙂


    danbp
    Moderator

    @danbp

    Glad you got it !


    1a-spielwiese
    Participant

    @1a-spielwiese

    But nevertheless it does not work.


    @mercime
    Keymaster

    @mercime

    @1a-spielwiese Even if you changed the margin to 2.5%, the code should work. What precisely is not working? Screenshot/s or site url?


    1a-spielwiese
    Participant

    @1a-spielwiese


    @mercime
    :

    It’s resolved now; the child-theme was activated only for the network-level, but not for the root-blog-level. Activating it for the root-blog-level as well, it works:

    https://buddypress.org/support/topic/buddypress-2-1-bp-language/page/2/#post-200308

    Thank you, @shpitzyl (https://buddypress.org/support/topic/buddypress-2-1-bp-language/page/2/#post-200062).

Viewing 18 replies - 1 through 18 (of 18 total)
  • The topic ‘[Resolved] Full Width Layout with "Reddle"-themen’ is closed to new replies.
Skip to toolbar