CSS Help - Bootstrap breaking my theme ;-(

RapidWeaver Classic Themes
1

Hi Everyone,

I’ve been struggling to get a page on my site working correctly.

My site uses the old D-SCRIBE2 theme and you can see it broken here :- Broken Theme

If I remove the offending css from bootstrap.css then the theme looks okay but the weather bit breaks :- http://www.leavening.org/forecast/ewn/index2.php

The offending bit of bootstrap.css would appear to be :-1:

  • , :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }

Adding it in breaks the theme, removing it breaks the weather forecast and vice versa.

Having spent many hours staring at it I think it’s time I asked for some help. I’m completely stumped on this.

Any advice would be very much appreciated.

Kind regards, Simon

2

Missing ; on last line ?
…

2 Likes
3

Try scoping the CSS to only take effect on the weather container. Something like this:

.ewn *, .ewn:after, .ewn:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

or if you want content box sizing:

.ewn *, .ewn:after, .ewn:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Either will only take effect on the weather container. Other elements in the page will be left alone unchanged.

The reason for the weather container being indented from the left is because you have pasted the markup into an HTML list item. If using HTML stacks, clear the default ‘your text goes here’ content first and paste your markup as plain text.

I am expert on all things Twitter Boostrap, so let me know if you have any other questions. :slightly_smiling_face:

1 Like
4

Hi Will,

Thank you for this reply. Very useful.

I’ve edited the bootstrap.css file to reflect the suggestions which you recommended but it’s still mis-behaving.

When the units button is clicked it shows the mph/kmh settings - this has the wrong text colour. It should look like this :-

Screen Shot 2017-07-15 at 20.25.12.png1028×296 31.2 KB

And the container with the time/temp is way too low for some reason. Again, it should look like the image above.

Have I mis-understood your reply and don’t something wrong ?

Many thanks again, Simon

5

Thanks Scott. I wish it was that simple :wink:

6

Hi Will,

Any thoughts on my broken css ?

Kind regards, Simon

7

Not my theme, not my problem! :wink:

In all seriousness though, I’ve helped you resolve the box sizing problem. If there are other, separate, more complicated issues you need help with, I think it would be best to email me with your contact details, and I can get a quote generated for you. Perhaps within a few hours, I can then look at your whole setup in detail and run all the normal diagnostics / testing. It also ensures I’m fairly compensated for my time too. You can get in touch here.

7 Likes