Sparkling Header, Bootstrap Slider and Margin/Padding Changes

1. The code for the blue bar worked perfectly. However, the client decided that the Call For Action banner on every page would be more beneficial.

You can achieve this by using the custom solution posted in the following reply.

https://colorlibsupport.com/t/call-to-action-bar/#post-27768

2. The slider is currently working fine, but I had wanted it above the heading where the featured image lives so I can utilise the entire page width without the left and right padding and margins. Below the call to action but above the page content box. See red text in image.

To achieve this you have to develop custom code in the child theme of sparkling theme.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5 http://freewptp.com/contact

3. All the body content is inside a white box with a light grey background. I wanted to reduce the left and right padding/margins so to use a little more of the page width. This is mainly because there is a lot of left and right padding in mobile and tablet view. See red lines in image.

Try using the below CSS code as described above to achieve this.

.container.main-content-area {
    width: 100%;
}