Rapidweaver theme appending "%22" to images on hover of links

(Spencer Davis) #1

Hello, I’m using the theme Capture By Micheal David Design and have contacted regarding this issue, but received unhelpful advice about things I’d already tried. My problem is that said Capture theme applies a different image per link on hover. I’m not utilizing different images, but am following code correctly( @ http://michaeldaviddesign.com/themes/capture/tutorial/index.html ) for the number of links I’m using. What happens on hover is my background images all disappear(from the section they previously occupied and inspecting the page with the developer tools in chrome through the console I get a 404, everything about the destination is right - except somewhere a %22 (also known as double qoutes) is appended to the end of the destination, after the .jpg extension of my image.
I’ve done everything I can think of and nothing seems to remedy the issue. Thanks in Advance!

(Brad Halstead) #2


Don’t know if this is a Theme issue or not or what you have tried and not…

Have you tried disabling consolidated CSS for your project as per the instructions?

Can you copy/paste your code into a reply so we can verify the proper use of your custom CSS and the resource file in question? Sometimes if you forget a closing % the resource will do odd things, does all your CSS for the Nav have the closing and/or opening % symbol?


(Spencer Davis) #3
#feature {background-image:url(%resource(DCBackground.jpg)%);}
#feature1 {background-image:url(%resource(DCBackground.jpg)%);}
#feature2 {background-image:url(%resource(DCBackground.jpg)%);}
#feature3 {background-image:url(%resource(DCBackground.jpg)%);}

Is what I have for the nav css. turning off the consolidated css now, never had an issue with it before though : P

Still broken… I have no idea what is causing this

(Brad Halstead) #4


According to the tutorial page (I do not have the theme)…

(Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site). This will display a banner image for the first main navigation link of your page.

your images reference images with capital letters, perhaps they need to be lowercase as per the instructions?

With that being said, what do you use under site preferences for “relative to” (Wrench Icon -> Advanced), try relative to page and see if that makes a difference after publishing? You will of course have to refresh your browser…

Keep us posted

(Stuart) #5

I can reproduce this. There is an issue with the theme navigation hover effects which (at this precise moment) I’m uncertain whether RW or the theme is causing. I offer here a workaround however which you can choose to implement or not at your own risk (until MDD or RMS come through with a proper fix).

You stated that you are not using the nav hover image transitions effects. Good, the workaround is based on that use case.

[1] Duplicate your copy of Capture. Call it something like ‘Capture_mod’ or something like that.
[2] Select the duplicated theme for your project. Make sure you are using the duped theme from this point on.
[3] In the theme drawer control/right click on the duped theme and choose ‘show contents’. Now Finder will open.
[4]. In the finder window look inside the scripts folder and you will see the ‘function.js’ file. Open ‘function.js’ using a text editor. Pages or other word processors will NOT do… use a code editor.
[5] In that file place an opening multiline comment sequence /* on line 92. Place a closing multiline comment sequence */ on line 125. For clarity the opening is a forward slash then an asterisk. The closing is an asterisk then a forward slash.

Opening : /*

Closing: */

That block should now look like this:-

[6] Save that file. Close Finder. Close theme drawer. Back to RW…

[7] Now on each page just use the

#feature {background-image:url(%resource(DCBackground2.jpg)%);}

Snippet in the CSS panel to control the banner image which that unique page displays.

The problem here is not entirely trivial… I’m still looking at it myself… I’m sure MDD will get to the bottom of it.
Perhaps this will get you up and going in the meantime.

(Stuart) #7

Upgrading the version of jQuery ref’d by the theme to 1.11.3 does appear to help the problem…but it also causes a browser ID error elsewhere in the function.js. …

(Nik Fletcher) #8

You need to surround the resource macro with “” to ensure the images are rendered correctly.

#feature {background-image:url("%resource(DCBackground.jpg)%");}
#feature1 {background-image:url("%resource(DCBackground.jpg)%");}
#feature2 {background-image:url("%resource(DCBackground.jpg)%");}
#feature3 {background-image:url("%resource(DCBackground.jpg)%");}


(Brad Halstead) #9

@nikf, does that make it a RapidWeaver related with the Theme due to enhancements in RW with resources?

Just asking because the demo site doesn’t enclose the resources with quotes and it works… maybe made with RW 5?


(Nik Fletcher) #10

In that case, it’s likely due to Smart Quotes…

If you select the code, go to Format menu, hold Option and choose “Remove Smart Quotes” you’ll be all set.

(Spencer Davis) #11

Smart qoutes not turned on, added the double qoutes to code, nothing, changed resource to lower case, tried with and without qoutes. nothing. :frowning: cleared cache and tried again. nothing :stuck_out_tongue:

(Stuart) #12

Sadly, adding the double quotes to the resources path does not change/fix the problem for me either. I could have sworn that I tried this approach last night - hence me posting a (possible) workaround. When I read Nik’s response this morning (while at work), I immediately capitulated and withdrew the post containing the workaround - believing that I must have been very silly not to have first tried Nik’s method.

I have a (possible) workaround for this problem. It requires you to comment out a little bit of Javascript in the theme. It is listed above somewhere