Sparkling Header, Bootstrap Slider and Margin/Padding Changes

Hi,

I’d like some help to make some modifications to my child Sparkling theme for a site I’m working on please. http://www.birdmanelectrical.com.au/

  1. Header, I’d like to add a thick blue line with 1px black line underneath the logo so that all the pages have a blue divider similar to the footer mirrored. The homepage already looks nice, but once the call to action section is gone on the other pages, the header/navigation page is quite dull. Making the background blue is not an option as the logo background is white. I’m struggling to find where in the CSS to do this.

  2. I would like my Bootstrap slider to be placed on the homepage under the call to action section, but above the page content section to maximise the page width, like in the feature image. I cannot use the feature image and homepage slider as I want different images than what is already used in the site.

  3. I’d like to remove some of the left and right margins or padding from the site’s CSS. I found the top and bottom to reduce it, but can’t seem to locate the left and right.

Thank-you in advance!

And now for some reason the regular font in IE11 now shows as Times New Roman. All other browsers are okay. It was working fine until I changed the regular font from 14px to 16px. No idea what is going on as no other changes were made at the time. Please help!? :frowning:

Hi @nadz,

I hope you are well today and thank you for your questions.

1. Header, I’d like to add a thick blue line with 1px black line underneath the logo so that all the pages have a blue divider similar to the footer mirrored. The homepage already looks nice, but once the call to action section is gone on the other pages, the header/navigation page is quite dull. Making the background blue is not an option as the logo background is white. I’m struggling to find where in the CSS to do this.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

#content {
    border-top: 1px solid #000;
}
#masthead {
    border-bottom: 15px solid #0099cc;
}

body.home div#content {
    border-top: 0;
}
body.home header#masthead {
    border-bottom: 0;
}

2. I would like my Bootstrap slider to be placed on the homepage under the call to action section, but above the page content section to maximise the page width, like in the feature image. I cannot use the feature image and homepage slider as I want different images than what is already used in the site.

I visited your site and saw that the Bootstrap slider is displaying on the homepage under the call to action section as shown in the attached screenshot.

3. I’d like to remove some of the left and right margins or padding from the site’s CSS. I found the top and bottom to reduce it, but can’t seem to locate the left and right.

Could you please tell me a bit more in detail from what element on your site you want to remove it so that i can help you?

And now for some reason the regular font in IE11 now shows as Times New Roman. All other browsers are okay. It was working fine until I changed the regular font from 14px to 16px. No idea what is going on as no other changes were made at the time. Please help!

Could you please tell me what you have set on the following path in the theme settings by sharing the screenshot of it?

Admin Area -> Appearance -> Customize -> Sparkling Options -> Typography

Also try changing or resaving the settings on the above path.

To help us keep support thread separates could you please create new thread for your new question instead of asking all questions in one thread as it makes the thread messy and hard to read.

Best Regards,
Movin

Thank-you Movin for spending the time to answer my questions.

  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.

  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.

  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.

  4. I managed to find an IE workaround in the forums eventually which fixed the issue. I did not have a problem (it was working fine) until I changed the font pixel height from 14px to 16px in the customize section. Then it had a mind of it’s own. Admin Area -> Appearance -> Customize -> Sparkling Options -> Typography. See attached image as requested. The following code fixed it.

div.entry-content {
    font-family: 'Open Sans', sans-serif;
}

Thank you again for your time.

Sorry image updated didn’t load. Re-added!

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%;
}

Thank-you!

You are most welcome here :slight_smile: