Split theme banner images 101

Split Theme Banners - 101

Changing the banner image in the Split theme is extremely simple. It can be reliably accomplished using a simple CSS snippet inserted into the page level CSS container of each page you would like a custom banner image to be displayed. If you place the snippet into the RapidWeaver global CSS container then all relevant pages in your project will be affected.

Here is the snippet:

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

How to use the snippet:

Step one:

Drag your custom image into the RW project resources area.

Step two:

Paste the snippet into the CSS container (page level via inspector, or project level via project settings -> code). Whichever container makes the most sense for your intentions.

Step three:

Customise the snippet to use your image file from resources. This is simply a matter of changing the 'a5.jpg' from the snippet above to the name of your image file Eg: 'my_custom_banner.jpg' or whatever is the name of the image - exactly - that you dropped into the project resources.

You will know when you have correctly modified the snippet because the banner will update to show your image.

That should be all that is needed to update the banner. 

Example One - Home page in website root:

home

Example Two - SubPage in sub folder:

subpage

Example Three - Child page (second level, subfolder in a subfolder):

child of child

Finally, a huge thanks to @Oscar from the RMS forums for all the incredible work he has done helping the RW community get the most out of this amazing theme.

Still need help? Contact Us Contact Us