Tesla use 3 different sizes (small, medium and (big 2000 x 1500 px)), but with one size it works fine too !
I use only a 2000 x 1500 px image in the resources.
Split use different sizes.
Tesla use 3 different sizes (small, medium and (big 2000 x 1500 px)), but with one size it works fine too !
I use only a 2000 x 1500 px image in the resources.
Split use different sizes.
ok Iâm using Tesla.
How do i find the theme and get package contents? I canât find it??
You must not change the pictures in the theme tesla.
(Tesla is in the content of the RapidWeaver.app)
Otherwise you have to put back the images with every RW update.
(For that, I make a copy of the theme in RapidWeaver, so I can keep the changes in the theme.)
You only must paste your image in the resources of RapidWeaver and all is ok with my CSS code.
Itâs the best way to change the banner image.
This does not work for me. Iâve tried everything I can think of with file names, graphic sizes and variations of the CSS code for both Split and Tesla in both the page CSS and project wide.
In Split the best I can get is a black bar in place of the graphic with the text âMY WEBSITEâ in white at the centre. In Tesla I just get a blank white box.
Iâm using RW 6.3.7
When you use Tesla Pro, you have also another way to use your own picture in the page headers/banners.
You can use the Custom Banner 1 to 10 (banner1.jpg) in the resources.
Look this video of the developer.
https://elixirgraphics.com/previews/tesla-pro/tutorials/
This must work! Yesterday, I have worked with this codes.
Can we have a new forum category titled: âChanging Tesla and Split theme bannersâ, please.
Oscar, your code works for me, and thanks a lot for postingâŚ
Similar question: In Tesla, is there a way to left align the header image? Thanks again
Put this additional code to CSS.
background-position: left;
now
header { background-image: url(%resource(name-of-your-image.jpg)%); background-position: left; }
Must work! But now, the picture isnât no longer âreallyâ responsive.
Understood. Please forgive me as Iâm quite rusty.
@Oscar Your tutorial was perfect. Iâm a first time RapidWeaver user, and I couldnât understand why it would be so easy everywhere else to change the settings, but completely nonintuitive to change the theme image. Your suggestions and directions did the trick!
Tesla banners are not fully responsive anyway. They do adjust to some degree but I wouldnât advise using banners where you need to see all or most of the image on all devices because that wonât happen. Abstracts work well. If you know any code to make them more responsive that would be great
No, I know, unfortunately, no code for this.
But, I am of the opinion, that the banner images is quite well responsive.
Only when the âbackground-positionâ stands to left or right, is responsive away.
I tried with âwidthâ and âheightâ 100%, but no effect.
As for Tesla â Teslaâs banner is responsive, it is just that it is responsive with its height, width and crop. The banner covers the entire browser window, so the image has to cover the whole thing. This means in addition to sizing up and down and keeping the imageâs proportions correct it also must crop the image to ensure that the whole of the window is covered.
As for custom banners in Tesla â there is a super simple way that doesnât involve all of this custom code. Tesla Pro offers a custom banner feature built-in to the theme.
âŚand with this code all is perfect, in Tesla too Super theme!
header { background-image: url(%resource(DSCN0820.jpg)%); }
Yes I appreciate the difficulty with this type of full screen image and no criticism intended - I love Tesla Pro. Just so long as people realise that limitation with this type of image
The multiple image sizes allowed me to provide lower resolution images for smaller devices. This wasnât something I could do with the custom images though, unfortunately. At least not without a good deal of confusion on the end userâs part.
I have tried that code in Split and it shows in preview but doesnât publish.
Thanks Oscar, but I am still having the same issue. Only my home page displays the header when published. Using Re-publish all files each time. This is the code Rapid Weaver Support suggested.
Tried this code first:
#intro-background {
background: url(resources/homepagebandw.jpeg)
no-repeat center center!important;
}
Rapid Weaver support suggested this one:
#intro-background {
background: url(%resource(Hornupblackcoat.jpg)%) no-repeat center center !important;
}
neither works when published.