Making custom images compatible with themes

I wanted to update my website to make it responsive. To do so, I purchased a third-party responsive theme that promised a lot of options, especially the ability to use my own images for the banners. It has more than ten custom image banner options available.

When I placed my custom image in the theme, I saw a couple of things that needed to be modified. For example, not all of my custom banner appeared on the preview. It was cut off at the top. Only by resizing the banner to a much greater height allowed my whole custom image to display. The problem is that I only want a banner that is about 250 pixels high.

Any advice about how to resize my original image for making it compatible (and scalable) with the theme?

The theme is Majestic by Elixir Graphics, and I use RW 6. I also have RWMulti-tool 2.2 Pro available.


Suggest contacting Elixir and have them talk you through the process.

I don’t know Majestic; but I’d be surprised if it couldn’t do what you want.

One standard way to make your graphics work in a theme is to make a copy of one of the header images inside the theme’s package and replace that - being careful to use exactly the same name as the original - with one of yours that’s the same size as those that already work inside the theme.

Have you gone thru @Elixir tutorial on banners for this theme?

I don’t have this theme so I have not but have gone thru there tutorials on other themes and products and found them most helpful.

Hi there @tiber3m!

You can set the banner height in two different areas for Majestic. You can set it for the desktop and for smaller mobile devices as well. This way you can get two different heights to make a better viewing experience.

The desktop setting offers fixed heights of 100, 200, 300, 400, 500, 600 and 700 px. It also offers a Flexible option, which means the banner’s height will grow depending on the content you’ve got in your banner area. If you’re using anything except the slogan (i.e.: ExtraContent area 8) then I recommend the Flexible setting.

The mobile setting for small devices allow you to set it as Flexible (so that all of the content, whether it be just a slogan or an ExtraContent area) can be seen on the small screen, or 76px, which provide just a backdrop for the site title bar and hides the banner content.

When it comes to banners I would not place any text specifically in your banner background image. I would use ExtraContent areas for placing content like that. This way the banner can act as a backdrop and your content can be nice an responsive using the Flexible setting.

@teefers is correct in that there is a great tutorial video on the product page for Majestic that walks you through using the banner settings and whatnot.

Thanks to all who responded. with you help I am starting to understand some principles that will help me resolve the issues. Thanks again.