Announcement

Collapse
No announcement yet.

Possible to have no sidebars?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Possible to have no sidebars?

    Hi,

    I was just wondering if it's possible to remove both sidebars properly?
    I've put everything into the Mega Menu that would otherwise be displayed in a side menu, yet the spacing for this sidebar stays there.

    If I specify for two sidebars in site options, then a similar effect appears on the right side. I would ideally want the entire central section (in my eyes defined by the border going down the page) to be filled with whatever is in the page body, but this doesn't seem to be possible.

    Using Chrome's Inspect Element, it's easy to see why this is caused. The content-area class is shifting all of what is essentially the main body content across to the right and causing the gap I'm trying to get rid of.

    ".content-area {
    float: right;
    width: 80%;
    margin: 0;
    padding: 0;
    }"

    I guess I'm asking where to find this class to change the width property. But also if there is a technique that doesn't require going in and changing code. I would have thought that if the sidebars were removed, the main content would have just simply taken the space freed up by these, rather than leaving large clumps of whitespace.

    Edit: The left-sidebar is commented out of the code. So it's just the .content-area class that is causing the gap to appear.
    Attached Files

    #2
    You will need to get dirty in the actinic.css stylesheet but it shouldn't be a big job.

    Click on design tab and open the stylesheet (there is a link on the top bar above the preview / code areas) .. search for content-area ... it may appear several times under different media queries so search until all are found.... you can then remove the float instruction and set the width to 100%

    Ensure you take a full working backup before changing anything


    Bikster
    SellerDeck Designs and Responsive Themes

    Comment


      #3
      I had a look in the CSS and couldn't find an instance for 'content-area' with these properties.

      Comment


        #4
        If you have a look at the top of the stylesheet there are pink layouts which effectively drag in the content of other stylesheets ... the responsive code is in these.

        Depending on your theme look in Design > Library > Layouts > Theme Stylesheets ... Responsive CSS and Responsive CSS Part 2 ... the code you are seeking should be in Resposnsive CSS


        Bikster
        SellerDeck Designs and Responsive Themes

        Comment


          #5
          I have not delved around too deeply in the murky waters on the responsive stylesheets but I could only fine the single instance but worth searching to see if more occurrences appear.

          note there are child selectors I spotted such as

          .content-area .marketing-lists {}

          it is just the selector .content-area {} you are seeking out


          Bikster
          SellerDeck Designs and Responsive Themes

          Comment


            #6
            Hi Jont,

            I managed to fix this by adding in a new content-area class. Knowing CSS it just adds it in to the current styling for this class. I couldn't find a way to get into the top 3 included CSS styles (quite new to SellerDeck). I can just see them listed there, like links, but clicking these doesn't let me see them.

            Anyway, problem was fixed by adding in a new content-area class into the main style sheet. Knowing CSS, it just adds it in to the current styling for this class anyway. But it would have been nicer to keep it with the rest of the CSS styles for this class.

            Comment


              #7
              This can be achieved as follows:

              1) Remove the following from Responsive Outer Layout on lines 74 - 78:

              <actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz3%5fSidebars%22%20%2f%3e%20%21%3d%20%22One%20Sidebar%22">
              <div id="right-sidebar">
              <actinic:variable value="Regular Right Sidebar" name="SideBar" />
              </div>
              </actinic:block>
              2) Remove the following from Responsive Outer Layout on lines 67 - 71:

              <actinic:block if="%3cactinic%3avariable%20name%3d%22MobileLeftColumn%22%20%2f%3e%20%3d%3d%20%22After%20Main%20Content%22" >
              <div id="left-sidebar">
              <actinic:variable name="SideBar" value="Regular Left Sidebar" >
              </div>
              </actinic:block>
              NB be very careful not to remove the </div> statement between these two blocks

              3) Remove the following from Responsive Outer Layout on lines 46 - 50

              <actinic:block if="%3cactinic%3avariable%20name%3d%22MobileLeftColumn%22%20%2f%3e%20%3d%3d%20%22Before%20Main%20Content%22" >
              <div id="left-sidebar">
              <actinic:variable value="Regular Left Sidebar" name="SideBar" />
              </div>
              </actinic:block>
              4) In the Design tab, click 'Current Stylesheet'

              If you are using the Smart theme, add the following onto line 372 above .content-area .fragment-list .fullWidthSection.
              If you are using the Classic theme, and the following line at line 292 above .sidebar .marketing-list-entry ul li ul li:

              .content-area, .bulk-area, #left-area {width:100%;}
              Last edited by brucet; 08-Mar-2016, 10:07 AM.
              Bruce Townsend
              Ecommerce Product Manager
              Sellerdeck Ecommerce Solutions

              Comment


                #8
                H Sam,

                Once you have got it working would be good to see the result, thanks M
                Mash

                Comment


                  #9
                  Hi Mash,

                  I've attached an image of it now.

                  I just dropped this into the main style sheet. I figured it would just add to any pre-existing CSS for the content area. I couldn't work out how to access those purple underlined CSS sheets listed at the top of the main one, so I just used this as an easy workaround.

                  Code:
                  .content-area{
                  width:100%;
                  float:left;
                  }
                  Edit: Looking back, it appears from the screenshot as through the gap has just shifted to the right side, but it hasn't. It's just a rather empty page.
                  Attached Files

                  Comment


                    #10
                    Sorry, there was an error in the workaround. In the final code change, "#bulk-area' should have been ".bulk-area". Now corrected.
                    Last edited by brucet; 08-Mar-2016, 11:24 AM.
                    Bruce Townsend
                    Ecommerce Product Manager
                    Sellerdeck Ecommerce Solutions

                    Comment


                      #11
                      That was scary finding a post jumping up by Jonty, he is probably still trying to make sense of Sellerdeck (Actinic) up above.

                      RIP mate
                      Chris Ashdown

                      Comment


                        #12
                        Originally posted by chris ashdown View Post
                        That was scary finding a post jumping up by Jonty, he is probably still trying to make sense of Sellerdeck (Actinic) up above.

                        RIP mate
                        Yes - I still can't believe he's no longer with us.

                        Comment

                        Working...
                        X