Reason Theme - responsive banner size

I’m starting work on a new site which will be the first one I’ve attempted to make responsive. I’m using the Reason theme, however the banner image is not responsive. It doesn’t resize for an iPhone screen, it just crops the image. I’d like to use this theme but can’t have the image crop. Is there a way to get it to resize?

If you go to the author’s website and find the Reason Pro theme, then click Manual you’ll get a pop up which talks about the responsive nature of the banner.

Rob

2 Likes

Thanks Rob. I guess this should work with the theme that comes in RW7 too?
Also I’m not quite sure what it means where it says to paste the code into the “main content area”. Do I have to paste that into each page?

I don’t know but it’d be easy to try. Don’t see why not.

Yes, it looks like you’d need to paste both the HTML and CSS into every page. Remember to highlight the HTML and choose Ignore Formatting from the Format menu.

Rob

It says that the CSS can go into Page Info > Header > CSS but I wonder if that can go into the site-wide code?
Then I’m wondering if the HTML can also go somewhere in there too, perhaps the Body section?

I won’t know this all for sure until I get the hosting set up, then I can test it. I’m waiting for my client to open her account.

Both should work in preview I would have thought. Worth giving it a go, rather than waiting.

Rob

But how can I set up the link properly if I can’t upload the banner? It has to be set up as a resource, and then the HTML code has to point to it. I don’t think it can be done locally.

You should just be able to drag the new banner into the Resources area in the left hand column in RW and then change the HTML that Nick supplies to reflect the name of the new banner. That code ‘points’ to the Resources area in RW.

Rob

Thanks. I didn’t understand that the “%resource” code referred directly to the resource and didn’t depend on it being published. I learned something new!

Anyway, it doesn’t work when placed in site wide code:
Code > Head (it gets placed outside the page)
Code > Body (results in “missing image” icon)

It also doesn’t work when pasted right into the page. It just loads into the middle of the page. So I read the instructions again and came to realize they are not very clear.

1. Paste this code into the main content area. But what is the main content area? This isn’t clear.
div id=“myExtraContent1”>edge</div

2. Then paste the code below into your custom css box (Page Info > Header > CSS). Also not clear. There is no Page Info > Header > CSS. There is only Site Wide Code > CSS, or Inspector > HTML Code > CSS
#myExtraContent1 img{ float:left; }

Sounds like you need to put in a support request to @nickcates.

Rob

Thanks @robbeattie for helping out!

Sir @jabohn, sorry for any confusion on banner use within Reason.

  1. “Reason” is owned by Realmac, it shares the same design as Reason Pro, but not the same features. That said, the Reason Pro manual does not apply for built in Reason theme. You can’t (with ease) change the banners in Reason, for example.

  2. Reason Pro, however is much easier to work with, and I can activly update this theme at any time. Here’s a short video on how to add a banner with RW7 drag and drop: https://cl.ly/0I3N0A3G2f1h

  3. I just now today, made the banner method “Scaling Responsive Banner” into a style option toggle, and that’s available in Reason Pro 1.2.4. This cuts out all the tutorial instructions and steps you posted above :smiley:

Thanks for clearing that up Nick. I’ve figured out how to change the banner in the stock Reason theme. Do you know if there’s a way to make it responsive or do I need to ask RealMac?

There is not a scaling responsive banner method in the RW Reason verison.