Return to previous page

How to find theme wrapper div class - by totchers

This topic has 13 replies, 3 voices, and was last updated 8 years, 11 months ago ago by Eva Kemp

  • Avatar: totchers
    totchers
    Participant
    June 20, 2016 at 21:37

    Hello I am new at this but have googled for hours on this problem and still can’t get it quite right.

    I need to make WooPress compatible with Sensei and to do so I simply plug in the start and end wrappers in the child theme’s functions.php: https://docs.woothemes.com/document/sensei-and-theme-compatibility/

    Can someone show me really quick where that is? I am trying to make it have a sidebar on the right, also. The code from the page.php didn’t work:

    <div class=”container content-page”>
    <div class=”page-content sidebar-position-<?php esc_attr_e( $l[‘sidebar’] ); ?> sidebar-mobile-<?php esc_attr_e( $l[‘sidebar-mobile’] ); ?>”>
    <div class=”row”>

    <div class=”content <?php esc_attr_e( $l[‘content-class’] ); ?>”>

    Thank you!

    Please, contact administrator
    for this information.
    #130326 Copied
    12 Answers
    Avatar: Eva
    Eva Kemp
    Participant
    June 21, 2016 at 10:35

    Hello,

    Please show a direct page where you have issue with template and provide FTP credentials.

    Regards,
    Eva Kemp.

    #130392 Copied
    Avatar: totchers
    totchers
    Participant
    June 21, 2016 at 15:57

    An example page is http://carlasonheim.com/2016/lesson/lesson-1-mini-drawing-blast/.

    Here the sidebar is not showing and part of the content is outside of the wrapper on smaller screens.

    Thank you!

    Please, contact administrator
    for this information.
    #130482 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 21, 2016 at 19:37

    Hello,

    Sidebar doesn’t work due to absence of the file courses_sidebar.php you included here:

    function my_theme_wrapper_end() {
  echo '</div><!--end of content-->';
  include 'courses_sidebar.php';
  echo  '</div><!--end of row-->';
}

    As for the problem with content displaying on small screens try to use the following css code in your child style.css:

    @media only screen and (max-width: 768px) {
  .single-lesson .fix {
      padding-left: 60px;
      padding-right: 60px;
}}

    Best regards,
    Jack Richardson.

    #130527 Copied
    Avatar: totchers
    totchers
    Participant
    June 21, 2016 at 19:57

    The sidebar is now showing at the bottom (thanks for pointing out the wrong file). I used this code:

    function my_theme_wrapper_end() {
  echo '</div><!--end of content-->';
  echo  '</div><!--end of row-->';
  get_sidebar();
}

    The padding fix for the content works pretty well but doesn’t apply to the title (which I am going to take out anyway). Also, the content on large screens is wider than the wrapper by about 60px. I am hoping getting the correct my_theme_wrapper_start code will fix all this.

    Here is what I currently have (taken from another site).

    function my_theme_wrapper_start() {
  echo '<div class="row"><div class="content col-xs-12 col-sm-12 col-md-8 col-lg-8">';
}

    I just need to know what div class to put it I think. Thank you!

    #130531 Copied
    Avatar: totchers
    totchers
    Participant
    June 21, 2016 at 20:00 
    function my_theme_wrapper_end() {
  echo '</div><!--end of content-->';
  get_sidebar();  
  echo  '</div><!--end of row-->';

}

    The sidebar is now showing to the right. As soon as I find the correct div class I think I’m done. 🙂

    #130532 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 22, 2016 at 11:54

    Hello,

    Is your problem fixed? Do you need our help?

    Best regards,
    Jack Richardson.

    #130618 Copied
    Avatar: totchers
    totchers
    Participant
    June 22, 2016 at 16:00

    Hello!

    It is not fixed quite yet. I think I just need to know what to put in the blanks for it to work properly:

    function my_theme_wrapper_start() {
  echo '<div class="_____________"><div class="______________">';
}

    Thanks!

    #130668 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 22, 2016 at 16:52

    Hello,

    You used correct code:

    function my_theme_wrapper_start() {
  echo '<div class="row"><div class="content col-xs-12 col-sm-12 col-md-8 col-lg-8">';
}

    Please clarify what was wrong with display?

    Best regards,
    Jack Richardson.

    #130690 Copied
    Avatar: totchers
    totchers
    Participant
    June 22, 2016 at 17:53

    Big Screen View
    Small Screen View

    The columns are both too small and too far left. The div class=”content col-xs-12 col-sm-12 col-md-8 col-lg-8″ was from a different site and theme because I couldn’t find the correct div class in this theme.

    #130708 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 23, 2016 at 15:17

    Hello,

    I’ve edited the code to this one:

    function my_theme_wrapper_start() {
  echo '<div class="st-pusher" style="background-color:#fff;">
	<div class="st-content">
	<div class="st-content-inner">
	<div class="page-wrapper">
<div class="container"><div class="row"><div class="content col-xs-12 col-sm-12 col-md-9 col-lg-9">';
}

function my_theme_wrapper_end() {
  echo '</div><!--end of content-->';
  get_sidebar();  
  echo  '</div><!--end of row--></div></div></div></div></div>';

}

    Please check the page now and clear browser cache before.

    Best regards,
    Jack Richardson.

    #130867 Copied
    Avatar: totchers
    totchers
    Participant
    June 23, 2016 at 19:41

    That did it, thank you so much for all your help!

    #130900 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    June 23, 2016 at 20:59

    Hello,

    You are welcome.

    Regards,
    Eva Kemp.

    #130903 Copied
  • Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘How to find theme wrapper div class’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Boxed Store – WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Tea Store – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Sunglasses – WordPress WooCommerce Theme
lazy-placeholder
Grocery Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Sport Store – WordPress WooCommerce Theme
lazy-placeholder
Sidebar Boxed Store – WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.