Change background in Reason Theme Nick Cates?

Hey guys,

I am sure thats an easy question for you: How can I change the background image in the Reason Theme by Nick Cates. Thx!!

This was covered about a week ago:

So here is another possible hack for the Reason theme that lets you leave the built in theme file structure alone.

It doesn’t show in preview in RW though, you have to preview in browser or publish to see the change.

Put the image you want to use as the banner image into resources and reference it in the code below (replace the a1.jpg with the correct image name).

It is a little odd because the same static CSS on the elements mentioned below doesn’t seem to work at all, but using this little snippet, it does (well, at least for me).

Put this in the page or global JS container.

jQuery(document).ready(function(){ 
var t = $("#feature,#bgblur");
t.css("background-image","url(%resource(a1.jpg)%"); 
});

Then preview in the browser or publish.

The advantage of this technique is that you don’t get involved in messing with theme files. The disadvantage is that you can’t see your new banner image in RW preview.

Where I have to insert this code??

Just go to theme “explorer” in RW (where you select the active theme) and copy the theme to a new one.
Then select “show content”. There, replace the original background pictures with your own ones. Take care that you use the same file name.

Banner image or background texture?

In nickcatesdesign.com > Manuals > Reason Pro I read


Custom Banner
Add your own custom banner by dragging a 1200px by 600px image into the “Resources” panel, then paste the code below into your custom css box (Page Info > Header > CSS).

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

Replace “my-image” with the exact name of your resource image. * For long image titles with mixed letter casing, dashes, and spaces, matching titles can be tricky. Before sending a support ticket about the banner image not working, try using short, lower case, dash only, image name, like “tall-tree.jpg” to make things easier.


Custom Background Texture
Add your own background texture by dragging an image into the “Resources” panel, then paste the code below into your custom css box (Page Info > Header > CSS).

body{ background-image: url(%resource(my-image.jpg)%); }

Whatever image you add will automatically be tiled (repeated) across your entire site background.


I just tried, the two codes work perfectly in both Reason and Reason Pro themes

3 Likes

I followed the css code guideline in the manual and sure enough it referenced my first .jpg file in resources. However, if I change the file name to another .jpg file it still references the first .jpg file (the one I first added to the css code area). Further changes to the file name are still referenced to that original file. It doesn’t seem to matter which .jpg file in resources I change it to it still references the original file, even though I’ve deleted it in resources. What am I doing wrong here?

Did you change the CSS to reference the new JPG filename?

Yes. I put in the proper code to reference the new image, but it’s still referencing the previous image, which I’ve taken out of resources. So, I’m referencing the new jpg file in the css code and it’s still showing the old one I deleted. Any ideas here?

I’m using Reason Pro 1.2.2 and RW7.1.4 in Sierra 10.12.

I got RW to reference the proper jpg file by consolidating css in health check. Hoping this continues to work.

Newbie alert. Can’t find any way to “copy” the theme or a “show content” option.