Change the Banner Background in Tesla / Split theme


(Robert Roughton) #1

Had a very quick look. I want to replace the Banner Background in the Tesla theme. Cheers


RW 6 vs. RW7 Update or not?
(Oscar Schmid) #2

@rnr

You want to use your own image?


(Robert Roughton) #3

Hi Oscar,

Yes. An image I have relating to the subject


(Oscar Schmid) #4

@rnr
Put your picture in the resources and this code in the site inspector CSS or global for every page, for the whole site.

header { background-image: url(%resource(name-of-your-image.jpg)%); }




Customise Tesla theme background
(Marco Almeida) #5

I tried that code on Split Theme, but didn’t work, do you how I could do it for this particular theme?


(Oscar Schmid) #6

@marcoalmeida

Yes, for Split you need another code.
Put this code in inspector CSS

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


(Marco Almeida) #7

Thank you Oscar. I wonder how do you know that!!


(Oscar Schmid) #8

@marcoalmeida
I am working already 10 years with RapidWeaver and this brings some experience :wink:
…and you can inspect elements in RapidWeaver (mouse right click on the element)


Centre Copyright Footer in Tesla Theme?
(Marco Almeida) #9

Which version are you using? I am with the 6.3.5 beta and when I right click on the preview page it only shows me the ‘Back’ option.


(Oscar Schmid) #10

And when you set this option in the preferences? (restart RapidWeaver)


Problems with video size and plugin
(Marco Almeida) #11

Then I get the Inspect Element option. Thanks, but still I don’t know how to proceed from there, because now I get this element.


(Oscar Schmid) #12

@marcoalmeida
Then, you can inspect the whole website :wink:
But it’s a long story !

For CSS choose this.


(Oscar Schmid) #13

…and so, you can get the CSS code.
Click on the CSS file.



(Marco Almeida) #14

@Oscar This is music to my ears!!! Thank you so much Oscar!!!


(Oscar Schmid) #15

… my pleasure :wink:


(Lee Jones) #16

Hi Oscar, I’ve tried this and nothing happens.
Where it says url am i supposed to put ‘my’ url ? e.g www.joeblogs.com etc etc

Im a bit out of my depth here but i really want to use this theme, it suits my business. This is the last thing i need to do.
If you or anyone else can help me with this id be so very grateful.
Ive looked at the images with arrows after your post and really have no clue.

Many Thanks
Lee


(Oscar Schmid) #17

@CountryGent

Attention. In this thread, we talk about two themes, Tesla and Split.

This is the code for Tesla.

header { background-image: url(%resource(name-of-your-image.jpg)%); }

For Split you need this code.

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

Put the code in inspector CSS, the image in resources in RW.
No url of your site, only the exact name of the image in the resources.

That must work :wink:

The pictures in my last posts is a description for the function of the web developer tools.


(Lee Jones) #18

Thanks Oscar,
i will give it a go tonight…
Let you know
Lee


(Lee Jones) #19

Oscar, many many thanks it worked.
One last question, what size would i make the image for optimum results on desktop and mobile ?
If i knew where the original images were i could copy their size…

Really grateful
Lee


(Oscar Schmid) #20

It must work :wink:

You speak of Tesla or Split?