Bootstrap styles are not overriden by child theme

Hi,

I have a site under construction using the sparkling theme and I’m having 2 issues, although the second issue may be solved by a solution to the first.

  1. I’m using a plugin called ‘Sermon Manager’ (The problem only shows up when i sue the sparkling theme though) which allows me to post sermon recordings and to categorize them into series’s

The strange thing is that the bootsrap css has css styles with the same name as 2 of our recent series…!

mark and progress. (Mark is only exhibiting problem 2 below.)

With the progress series, when I add a sermon (basically a custom post) to the series, it allocates the css style “progress” to the post which has:

.progress {
height: 20px;
}

in the bootstrap css, which obviously hides most of the post/article.

If I remove the sermon from the series. It renders fine as it doesn’t allocate the style to the post.

Not sure how to go about fixing that. I can try contact the plugin manufacturer, but since it doesn’t do this on other themes (see screenshots attached) I thought i’d check with you first…

2.The second problem is that if I try to override the css style in my child theme it doesn’t work on bootstrap styles (My child css is working to override the other theme styles)
It also seems like when I edit the bootstrap css file in the parent theme (which ofcourse will get removed when updating i know) the page is still rendering wrong and seems to be using a different version of the bootstrap css file not on my server!?
Also strangely this problem only happens in chrome and not firefox?

Obviously i don’t really want to override a style in bootstrap that isn’t really related to my post so ideally I want to solve problem 1!!!

Any help would really be appreciated!!!

Hi @jaimelopes,

I hope you are well today and thanks for posting here.

Could you please share me the page URL from your site where it’s not displaying correctly so that i can troubleshoot it?

If your site is under construction then would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

Kind Regards,
Movin

Hi,

Thanks for getting back to me.

The URL is http://g1fourways.co.za/wp-admin

Iver created a user: Movin
password is: D#2&OAxlIz8RDp4qvyk0isvN

I visited your shared site but couldn’t confirm the issue.

Could you please share me the pages URLs from your site where it’s not displaying correctly so that i can troubleshoot it?

Also please tell me in simple words what you are trying to achieve and what is happening on your site and don’t tell me code level details which makes description complex to understand.

Hi,

Thanks again for responding.

On this page: http://g1fourways.co.za/sermons/series/progress/

The list of sermons displays only 20px of the images.

It should display like this list:

http://g1fourways.co.za/sermons/series/man_on_a_mission/

Thanks for making it clear.

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

#main article {
    height: auto;
}

Thanks this is working!!!

You are most welcome here :slight_smile:

I am having the same problem with the Blaskan theme. As soon as I activate my child theme, some of the css styling that I see in the browser changes, although I haven’t added anything new to the style.css file in the child theme. Adding the custom css under Additional CSS works to change the styles, but I want to override other things that will require using a child theme (I need to change the templates themselves). Is it possible to use a child theme with this theme? Thanks.

@scanner77 This topic is for Sparkling theme so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/blaskan/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.