简体   繁体   中英

How can I override jquery UI styling?

I am having problems with this site. It is a learning site for me and hopefully will become a site for my hobby, but it is in crude form right now. I am using Bootstrap for responsiveness and have a bit of JQuery in there for an accordion in the middle for a log of sorts. I am using JQuery to do some text highlighting on hover and maybe some other things that come up.

My problem is that something in the JQueryUI seems to break my nice styling that I had going on where I had the headers in the accordion area with a nice dark grey background which you can see on page load for a split second until the jqueryUI loads which then changes my styling to a white background header.

Check out http://joshsbees-com.stackstaging.com and you will see what I mean.

How do I use bootstrap with JQueryUI and my own CSS? I'm sure I have too many scripts here and have some things crossed up somewhere.

Here is the code in my index page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Josh's Bees</title>
</head>
<body>

<div class="conainer">

    <div class="row">
        <header class="col">
            <h1>Welcome to Josh's Bees</h1>
            <h3>Bee farm in southern Jones County Georgia</h3>
        </header>
    </div>
    <div class="row">
        <div class="col">
            <img src="/images/me.JPG" align="left"/>

            <p>I got interested in beekeeping in 2018 when helping my dad. He got 2 hives and I helped him occasionally
                by holding tools, smoking them, lifting boxes, and such. I just could not get enough of watching God's
                miraculous work at hand in those little creatures. Everything from watching them build comb to laying
                eggs and storing nectar which they then turned into honey. I was hooked and still they never cease to
                amaze me.
            </p>
        </div>
    </div>
    <div class
    "clear">
</div>
<div class="row">

    <!--Left Column-->
    <div class="col-md-4">

        <p>I set up the hive and bought a nuc in mid May 2019. I spent the summer learning a lot and watching my
            bees.</p>
        <img src="/images/drawncomb1.jpg" width="250px"/>
        <img src="/images/drawncomb2.jpg" width="250px"/>

    </div>

    <!--Center Column-->
    <div class="col-md-4">

        <div id="logtitle">
            <h3>2020 Inspection Report</h3>
        </div>

        <div id="accordion">
            <h3 class="log">Feb 9 2020</h3>
            <div>
                <p>First quick inspection of this year. I wanted to get in and see how they were doing over the winder.
                    Last check was early December 2019 and there was not much brood capped. This time, however, since
                    the days are getting longer, the queen has several frames in the middle of the top box with fully
                    capped brood. There is a healthy amount of bees in the hive as well. Today was a sunny day, light
                    wind and mild temperatures. The bees were calm, but with healthy activity and still good on honey
                    stores. Dry sugar on top has not been eaten at all.</p>
                <br/>
            </div>
            <h3 class="log">March 1 2020</h3>
            <div>
                <p>Today was mostly cloudy and cool. High in the low 60's, so I knew the girls would be cranky and I
                    suited up for the occasion, gloves and all. Objective for today was to swap brood chambers, check
                    food stores, and add beetle barns to each layer: bottom board, top of bottom box, and top of top
                    box. I did a quick frame inspection of the top box. Saw good capped brood pattern on several frames.
                    Hive had healthy supply of bees which stands to reason after the amount of capped brood I saw in
                    February. I did not see any swarm cells, but I only did a quick glance over as I was swapping boxes.
                    They were getting angry and were all up in my face. If I had not had on gloves and full suit, I
                    would definitely have gotten popped multiple times. They were also eating the dry sugar pretty good,
                    but still have a little capped honey in the hive.</p>
                <br/>
            </div>
            <h3 class="log">March 2 2020</h3>
            <div>
                <p>I added a Boardman entrance feeder today with some 1:1 syrup to begin feeding. Plan to add honey
                    super end of March.</p>
                <br/>
            </div>
        </div>

    </div>

    <!--Right Column-->
    <div class="col-md-4">

        <h3>Links of my Favorite Sites</h3>

        <ul>
            <li><a href="http://www.barnyardbees.com">Barnyard Bees</a></li>
            <li><a href="http://www.dadant.com">Dadant</a></li>
            <li><a href="http://www.fatbeeman.com">Dixie Bee Supply</a></li>
        </ul>

    </div>

</div>
</div>

<footer id="footer" class="footer mt-auto py-3">
    <div class="container">
        <span class="text">Design by Josh Scoville, January 2020</span>
    </div>
</footer>

<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<!--end of bootstrap scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript"> 
    $("#accordion").accordion({
        collapsible: true,
        heightStyle: 'panel'
    });

    $(".log").hover(function(){
        $(this).css("color","orange");
    }, function(){
        $(this).css("color","white");
    });

</script>
</body>
</html>

使用JQuery UI 的 ThemeRoller页面。

Let us imagine you have imported your third-party library and your CSS like below:

<link href="yourStyle.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<link href="jqueryUI.css" rel="stylesheet" />

If you done this order to importing your CSS & libraries, the bootstrap and jqueryUI overwrite your Custom Style !

Finally, you have two options to solve your problem.

  • Re-order your importing libraries.
  • Make your specific CSS classes !important .

So do this:

<link href="bootstrap.css" rel="stylesheet" />
<link href="jqueryUI.css" rel="stylesheet" />
<link href="yourStyle.css" rel="stylesheet" />

And make sure they are loaded in a correct order in your DOM. And if the order of imported libraries were correct, put your Custom-Style bottom of your page, before tag.

By the way, for your knowledge and enhance your code quality, learn about this plugin ( Gulp ).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM