Adding Top Area Like 'Travel' Example

Hi,

You can add a background image to a row and stretch it – http://screencast.com/t/eXbpEs4O then you can play with the design option – css box – http://screencast.com/t/47x0TU2Yb and also for the bellow row(in demo block 5 row) – http://screencast.com/t/fleFsRa7f add negative top margin for example.
On our demo we use some extra classes to those row and we have added css code in style.css. So you could use the demo classes if you want:
*for background row td-travel-header – http://screencast.com/t/fUvEoIMwjXY
*for block row td-travel-features – http://screencast.com/t/oDcj0EY0

You can find the css in style.css file just search after those classes – http://screencast.com/t/t6ln5rgUpxx8 – http://screencast.com/t/eJN8kUOQVu

Hope this helps!

• This reply was modified 10 years by Alin [tagDiv].

Hi,

Please note that the theme doesn’t come with rtl support and you will need custom modifications for it and it is not an easy task. The parallax feature from Visual Composer use javascript and it is not an easy task to change it. I suggest to hire a professional developer for this as the time doesn’t allow us to provide custom work, sorry!

Thanks!

Hi,

The stretch row is a Visual Composer feature and the javascript code is used for it and it is not an easy task to change it. The theme doesn’t alter this css and it’s doesn’t support rtl, sorry!

Thanks!

Hi,

The travel homepage is custom, you can achieve this if you install the travel demo to check how the page is designed(there is a specific css, I have specified above about 2 extra-classes used on the rows). Also you can install the travel without content and add those 2 classes.
Another solution on this is to customize the page yourself using negative margin top on design options for row – http://screencast.com/t/umwciAYiMz

Thanks!

Hello,

This is the simplest solution of recreating the travel demo homepage on another demo. This cannot be done without the custom classes used by this demo.
Please follow these simple steps to recreate the travel demo homepage with another demo installed:

1) This is the shortcode of the page layout. You can simply paste it inside your page editor in classic mode and text mode: http://screencast.com/t/SUt9ItUc the code: http://pastebin.com/RAA6DkWp

2) The background image will not be found so you will need to add your own image in the row setting: http://screencast.com/t/yB2Bh0rbo

3) This is the final and most important step as the css for the travel homepage will not apply without this step. Please add this class: td-travel to the body of the website like so: http://screencast.com/t/fOt9sfquQtVy

This will be the result: http://screencast.com/t/vlZG4G8m1Xpy

I hope this helps!
Thank you!

Hi,

This guide only applies to pages using visual composer. If you want to add an image across the whole site, you will have to edit the post files or category files. Inside the header.php the image will be displayed above all content including the main menu and top menu.
For posts: http://screencast.com/t/ccJYqabD1Un and for categories: http://screencast.com/t/n7LuohrYq
I hope this helps.

Thanks.

Hi,

If you use newspaper 7, the css was changed and the demo css is no longer found in the main css file. Each demo now has it’s own css file so this method will require a further step to work in newspaper 7. Please copy the content of this file: http://screencast.com/t/yfy0U1VGfOm and paste it at the end of the main style.css from the main theme folder.

Thank you!