Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm new here. I've tried the WordPress forums and the actual theme forum for my theme with no luck and I heard that this is a good place to come ask questions. I'm hoping someone out there will take an interest in my dilemma. :)

I decided to use a static tiled background image on my self-hosted WordPress blog and have been successful to a point. My sidebars are hidden and "float" out when you click on the icons for the menu sidebar on the left and the regular sidebar on the right. If you click on them (on something other than a mobile device), there's a white gap between the background image and the gray sidebar color. After digging around in the style.css all of yesterday and today, I am exhausted. I would love some insight from some loving soul out there.

Here is my site: Dappled Things

Here is the part of my style sheet that I think may be relevant:

    /*-----------------------------------------------------------------------------------*/
/*  Off Canvas Layout
/*-----------------------------------------------------------------------------------*/

.content-wrap:before,
.content-wrap:after {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
}
.content-wrap:after {
    left: 100%;
}
#site-header,
.sidebar-left,
.content-wrap,
.sidebar-right {
    width: 100%;
    display: block;
    position: relative;
}
body.active-sidebar,
.sidebar-left,
.sidebar-right {
    background: #f2f2f2;
}
#site-header {
    overflow: hidden;
    text-align: center;
    z-index: 4;
    background-image:url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png');
        background-attachment: fixed;
}

/* JavaScript On */
.js .sidebar-left {
    height: 0;
    overflow: hidden;
    margin-left: -100%;
    margin-top: 0;
    float: left;
}
.js .content-wrap {
    position: relative;
    margin-left: 0;
    left: 0;
    right: 0;
    float: left;
    z-index: 2;
}
.js .sidebar-right {
    height: 0;
    overflow: hidden;
    margin-left: 100%;
    margin-top: 0;
    z-index: 1;
    float: left;
}

/* Active Left Sidebar */
.js body.active-nav {
    background: #f2f2f2;
}
.js .active-nav .off-canvas-nav {
    position: fixed;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    left: 81.25%;
    right: auto;
    top: 0;
    -webkit-transition: left 0.2s ease-out;
    -moz-transition: left 0.2s ease-out;
    -o-transition: left 0.2s ease-out;
    -ms-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out;
}
.active-nav .sidebar-left {
    position: relative;
    margin-left: 0;
    width: 81.25%;
    margin-top: 0;
    height: auto;
    float: left;
}
.js .active-nav .content-wrap {
    position: fixed;
    overflow: hidden;
    width: 100%;
    left: 81.25%;
    right: auto;
    top: 50px;
    background: #fff
    -webkit-transition: left .2s ease-out;
    -moz-transition: left .2s ease-out;
    -o-transition: left .2s ease-out;
    -ms-transition: left .2s ease-out;
    transition: left .2s ease-out;
}
.mask-left {
    visibility: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    z-index: 1002;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
    -moz-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
    box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
}
.active-nav .mask-left {
    visibility: visible;
    left: 81.25%;
    opacity: 0.8;
    background: #fff
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-transition: .01s opacity ease 0.2s;
    -moz-transition: .01s opacity ease 0.2s;
    -o-transition: .01s opacity ease 0.2s;
    -ms-transition: .01s opacity ease 0.2s;
    transition: .01s opacity ease 0.2s;
}
.active-nav .sidebar-right {
    position: absolute;
    overflow: hidden;
    left: 109.765625%;
}

/* Active Right Sidebar */
.js .active-sidebar .off-canvas-nav {
    position: fixed;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    right: 81.25%;
    left: auto;
    top: 0;
    -webkit-transition: right 0.2s ease-out;
    -moz-transition: right 0.2s ease-out;
    -o-transition: right 0.2s ease-out;
    -ms-transition: right 0.2s ease-out;
    transition: right 0.2s ease-out;
}
.active-sidebar .sidebar-left {
    position: absolute;
    overflow: hidden;
    right: 109.765625%;
}
.js .active-sidebar .content-wrap {
    position: fixed;
    overflow: hidden;
    width: 100%;
    right: 81.25%;
    left:auto;
    top: 50px;
    background: #fff
    -webkit-transition: .2s right ease-out;
    -moz-transition: .2s right ease-out;
    -o-transition: .2s right ease-out;
    -ms-transition: .2s right ease-out;
    transition: .2s right ease-out;
}
.mask-right {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    visibility: hidden;
    z-index: 1002;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
    -moz-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
    box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
}
.active-sidebar .mask-right {
    right: 81.25%;
    visibility: visible;
    opacity: 0.8;
    background: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -webkit-transition: .01s opacity ease 0.2s;
    -moz-transition: .01s opacity ease 0.2s;
    -o-transition: .01s opacity ease 0.2s;
    -ms-transition: .01s opacity ease 0.2s;
    transition: .01s opacity ease 0.2s;
}
.active-sidebar .sidebar-right {
    position: relative;
    margin-left: 18.75%;
    width: 81.25%;
    margin-top:0;
    height:auto;
    float:left;
}

/* Off Canvas Nav Buttons */
.off-canvas-nav  {
    width: 100%;
    overflow: hidden;
    background: #fff
    left: 0;
    right: 0;
}
.off-canvas-nav .menu-item,
.off-canvas-nav .sidebar-item {
    width: 18.75%;
    display: block;
    float: left;
}
.off-canvas-nav .sidebar-item {
    float: right;
}
.off-canvas-nav .menu-button,
.off-canvas-nav .sidebar-button {
    display: block;
    width:100%;
    height:50px;
    text-indent: -99999px;
}
.off-canvas-nav .menu-button {
    background:#f2f2f2 url(images/menu-btn.png) 50% 0 no-repeat;
}
.off-canvas-nav .sidebar-button {
    background:#f2f2f2 url(images/sidebar-btn.png) 50% 0 no-repeat;
}

/* Position Fixed Iframe Bugfix */
.js .active-nav .entry-content iframe,
.js .active-sidebar .entry-content iframe {
    display: none;
}
.js .active-nav .entry-content .fluid-width-video-wrapper,
.js .active-sidebar .entry-content .fluid-width-video-wrapper {
    background: #fff
}

/* Equal Height Column Fix in Off-Canvas Mode */
.active-nav .column-wrap,
.active-sidebar .column-wrap {
    overflow: hidden;
    background: #fff
}
.active-nav #content-wrap,
.active-nav .sidebar-left,
.active-sidebar #content-wrap,
.active-sidebar .sidebar-right {
    padding-bottom: 99999px !important;
    margin-bottom: -99999px !important;
}
.active-nav #content-wrap,
.active-sidebar #content-wrap {
    background: #fff
}

Here is a screen capture of what I'm seeing:

Screen Capture

Any help would be greatly appreciated!

Gail

share|improve this question
    
By adding this bit of code in the theme's custom CSS area, I was able to make this work: BODY { background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png); } #site-header { background: none; } .off-canvas-nav { background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png) !important; } .js .active-nav .off-canvas-nav { background: transparent; } .js .active-nav .content-wrap, .js .active-sidebar .content-wrap { background: transparent url(http://dappledthings.me/wp-content/uploads/2013/07/bg4.png); } –  Gail Jul 23 '13 at 20:41

1 Answer 1

In your CSS you will need to add:

.js .active-nav .content-wrap,
.active-sidebar .mask-right{
  background-image: url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png') !important;
}

.off-canvas-nav {background: url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png')important;}
share|improve this answer
    
David, you are officially my hero! I kept dreaming that someone would come up with a bit of code to add to my custom CSS, but was becoming increasingly disillusioned. I still have a slight problem, though, that I hope you can help with. If you look at my site here: dfcb.github.io/Responsivator/… You can see my site starts showing a white area at the top of the page when you click on the sidebar icons in screens starting at "800 × 480 Small Tablet (landscape)" on up. Do you have a snippet of code to correct this? I am eternally grateful either way. :) –  Gail Jul 22 '13 at 3:45
    
This theme has some crazy javascript which is making it incredibly difficult to target that white area. –  David Kryzaniak Jul 22 '13 at 4:05
    
This will get you close, but the repeating image doesn't line up. (See the addition above) –  David Kryzaniak Jul 22 '13 at 4:12
    
I had some strange things happening with the extra code, so I went back to the original code you gave me and now I am having problems in the right sidebar. The white area seems to be gone now, but you can see the tiled background covering the main page area and the orange line in every device except the desktop here: dfcb.github.io/Responsivator/?site=dappledthings.me –  Gail Jul 22 '13 at 5:18
    
I'm looking at the CSS and noticing several typos. Mainly missing semicolons. How are you editing the CSS? Are you directly modifying the style.css in the theme directory? It's considered bad practice to modify a theme's style.css directly. You should find a plugin that allows you to add your own CSS (JetPack has a nice CSS editor), or create a child-theme. –  David Kryzaniak Jul 22 '13 at 21:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.