Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 09 Nov 2018, 05:44
ramm4 ramm4 is offline
 
Join Date: Nov 2018
Bootstrap CSS in header is causing alot of issues

Folks,
New to VBulletin, sort of to CSS, been scratching my head since September over this. I'd love some help. I am modifying the Default Skin, with the sole intent that it looks exactly like the other parts of my website.

To do this, I added some pretty basic Bootstrap CSS to the header template. Now, some odd things are occurring. I have a feeling it has to do with the Bootstrap CSS messing around with VB5 CSS.

First, screen shots:
  1. Register Page Blank (see attachment)
  2. Search Button Pushed Down (see attachment)
  3. Topic Button Pushed Down (see attachment)

Now, here's the Bootstrap CSS I added in the Header template




Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Now, for the menu:



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

That's it! I can't imagine the above is causing these odd issues. Not to mention, the user can't login (when they hover over "login", the input fields appear, then dissapear right away).

Any help, is extremely appreciated.

Rob
Attached Images
File Type: jpg screenshot.jpg (33.9 KB, 10 views)
File Type: jpg screenshot2.jpg (26.2 KB, 11 views)
Reply With Quote
  #2  
Old 10 Nov 2018, 01:22
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Don't add in css that way, I mean you can but for example you should be adding in the css to css_additional.css template in the style via style manager then adding in your new <div> classes to whichever templates you wish.

It sounds like something in your local css files you've included is overwriting the default css, you should view a normal default style and compare that css to the css you've added, if any have identical names they could be interfering with each other. I've had to work with third-party included css in the past for the NFL but in the end would usually add my own overwrites as best possible to the additional css template but by controlling the css and including it in the correct template you won't have any problem adjusting values only if the definition name you added is the same as one that already exist (by default). Also bear in mind if you try to overwrite any default definitions and aren't quite sure which css template it's in you can add the same definition name to css_additional.css and in the code just use !important to overwrite the default value, example:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

I tend to use !important quite a bit as you can tell .
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!

Last edited by TheLastSuperman; 10 Nov 2018 at 01:27.
Reply With Quote
  #3  
Old 12 Nov 2018, 00:06
ramm4 ramm4 is offline
 
Join Date: Nov 2018
Ok, I wish I could give you a million internet points. Doing exactly what you said, about adding the additional css into the proper template (and not 'header' or 'footer'..) corrected the majority of the problem. I also had one conflicting CSS entity which I just ended up removing, which solved the rest.

Thank you, thank you, thank YOU!
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 06:03.

Layout Options | Width: Wide Color: