Gail

I’ve resolved my problem with YARPP. I think during an update maybe the match threshold was upped a bit or something changed and, with only five posts on my site, the one post that had a related post suddenly didn’t. ??

Sorry, I can’t get the apostrophe to show like it does in the message, so you’ll have to actually click on the tweet link in my post to see what’s going on. Thanks again.

Well, I’ve taken the above code out so that anyone else can actually see my menu and sidebar buttons. The problem still exists. The buttons are floating on top of a solid gray background that is evident when you look at them on most mobile devices. Any help would be gratefully appreciated. Thanks.

Click245,

I put the code you gave me into my custom css and it made my buttons disappear. They are still there, but they are invisible now. I’ll leave it like that for now, so you or someone else can take a look at it. If you move your mouse around the sides or top of the page, eventually you will get a hand pointer indicating that there is something to click on (the invisible buttons), but I’d really prefer them to be visible. ?? Thanks, again!

https://dappledthings.me

Thanks! ??

I spoke to my hosting service because of the problem and they just took the code out of the .htaccess file. ??

Jeremy,

Thanks for your response. I noticed you responded to a similar post earlier, but the error code was a little different. Can you tell me what the drawbacks would be to allowing XML-RPC access? Before I do anything, I would like to know if it would represent a security threat, etc. Thanks again!

Christine,

I am having a problem with the Custom CSS snippet I was given. If you can take a look at it, I’d appreciate it. When I look at my site in many of the mobile device views here, I can see the tiled background covering the entire page when I click on the right sidebar icon:

https://dfcb.github.io/Responsivator/…me&header=hide

Do you have any ideas how to prevent this? Thanks again!

Gail

Christine,

Thank you so much for your help, but I think I have fixed it with the aid of another patient soul out there. It was suggested that I add this snippet of code to my theme’s Custom CSS and, I’m happy to say, it worked! Thank you for sticking with me, though!

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

Christine,

I am looking at my page in Chrome, Firefox, and IE using Windows 8 on my laptop. I took a screen capture for you, but I just realized I have no way of attaching it here. Maybe I will upload it somewhere and send you a link to the image.

The white areas show up when I click on the sidebar left and sidebar right icons. There’s the sidebar in #F2F2F2 and then there’s the white (#FFFFFF). In the left sidebar you can actually see the white break between the sidebar color and the tiled image background. In the right sidebar, since it’s wider, you just see the gray sidebar and then the white band.

Here’s a link to my screen capture:

https://dappledthings.smugmug.com/photos/i-gJv2wfs/0/XL/i-gJv2wfs-XL.jpg

I’m really hoping you can help. Thanks!

Gail

I’m thinking that I need to change something in the “Off Canvas Layout” from

background: #fff

to

background-image:url('https://dappledthings.me/wp-content/uploads/2013/07/bg4.png');
        background-attachment: fixed;

Here’s the section of the style.css file that I’ve been looking at:

/*-----------------------------------------------------------------------------------*/
/*	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('https://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
}

Whoopsie! lol Here you go!

https://dappledthings.me

Well, I figured it out. Hopefully, I will be able to help someone else out with this in the future. ??

I have. This isn’t exactly theme specific, though. I thought someone might be able to help here. Thanks.

Well, do you have a better suggestion? I did edit the style.css and now I have the background image, but I can’t get it to not scroll along with the center column of text. Any suggestions for getting the background image to stay put instead of scrolling with the rest of the page? Thanks! ??