Change the Banner Background in Tesla / Split theme

One complication here is adding banner images to sub pages in Split theme (any page not on root). You need to ad ā€¦/ just before resources

So top level (root) should be: url(resources/

1 folder down should be: url(ā€¦/resources/

2 folders down should be: url(ā€¦/ā€¦/resources/

And when you do this, the banners wont show in preview - they will however when published!

Itā€™s not necessary to do this.
I see all banners in RW preview without this code.

ā€¦ and RapidWeaver does this itself, automatically.

Here in a sub page

ā€¦ and here in a main page

1 Like

Sorry I should have looked in more detailā€¦ your code is better than Yuzools on the ā€˜how toā€™ page. ! Wish Iā€™d seen this before - would have saved me some head-scratching and time! Thanks

1 Like

@Oscar @manofdogz

There really does seem to be a lot of confusion about how to manage custom banner images in the Split theme doesnā€™t there? I wonder how much of it stems from the use of a hard-coded path in the early snippets (rather than using the resource macro?) Not sure.

Thank you for pointing out that the Yuzool page isnā€™t as helpful as it might be. Thats something Iā€™m going to fix right now, as in tonight.

2 Likes

@Oscar @manofdogz

https://www.yuzoolthemes.com/support/article/view/themes/split-theme-banner-images-101

Any better?

Full credit to @Oscar for the snippet and @manofdogz for pointing out the gap in the knowledge base.

4 Likes

Thank you for the honor :wink: @manofdogz @kryten

Here another post on this subject.

1 Like

@Oscar
Awesomeā€¦ Now Iā€™m considering whether I should make a stack for Split just to simplify the myriad of possibilities. Weā€™ll see.

2 Likes

Hi Oscar
Thanks for your help in January.
Ive just put a new drive in my mac and cannot work out what files to copy over to get my ā€˜Tesla Copyā€™ theme to work.
Can you remind me please
Thanks
Lee

@CountryGent
Hi Lee,
do you have still access to your old hard drive? Do you have RW6 or RW7?
Cheers, Jannis

Thanks for getting back to me.
Ive RW 6 now and will likely upgrade in the near futureā€¦
Cheers
Lee

Again, do you have access to your old data on your old hard drive to copy the theme from?

Sorry dude yes i do, its plugged in on a cable right now

Well, the you have to navigate to the same folder on that hard drive, where the themes are placed.

http://cafe.yourhead.com/?qa=50/how-can-i-find-the-addons-folder-in-rapidweaver-6

Thanks, sorted and Iā€™m up and running.

Much appreciated Jannis

1 Like

Thanks for the advice here, allowed me to change the banner image!

One questionā€¦

Iā€™d like to banner to be smaller, really I mean thinner, as it is now someone visiting the site gets 60% of the picture and needs to start scrolling ASAP.

Is it possible to resize it?

Thanks

Hi there,
Using RapidWeaver 7 on a Macbook Pro with OSX El Capitan:

I copied the CSS code

#intro-background {
background: url(resources/newheader.jpg)
no-repeat center center!important;
}

and put it where it goes. The new header shows up in RapidWeaver but NOT online after I publish. It just shows grey.

When I upload the ā€œnewheaderā€ I can see the file called ā€œnewheaderā€ actually uploading. Yet, the finished product shows only a grey background.
See screen grabs.


Any advice?
Thanks.

So I tried adding the ā€œā€¦/ā€ just before the word ā€œresourcesā€ to no avail. What worked is the following, which is listed above by manofdogz.

#intro #intro-background { background: url(%resource(your-image.jpg)%) no-repeat center center; background-size: cover; }

Works like a charm. Thanks!

2 Likes

Thanks for the info guys. I changed my banner image. had to make it a bit darker to work out, but itā€™s there.

I know this isnā€™t official RW support - but for a drag-and-drop editor, having to insert CSS on every page just to change an image seems like such a kludge? or is this just a way to get you to purchase other themes, which might be more editableā€¦

Iā€™d love to find a way to make the overall banner a bit smaller as wellā€¦

Thanks @johnmcboston - in RapidWeaver 7 thatā€™s now possible with a new feature - banner replacement - which is added in any RapidWeaver 7 optimised themes, like Kiki or Voyager - which ship in RW7

2 Likes

How to make, what to write, to put on top of a banner picture PNG? If write a ::after, then nothing works.
The banner itself:

#intro #intro-background {
background: url(%resource(banner.jpg)%);
background-size: cover;
}

And with after:

#intro #intro-background::after {
background: url(%resource(dots.png)%) repeat;
}