I'm using VS2008 and I used more than 10 Jquery plugins in my master form and its working Perfectly but when I build my solution Its take too long time to build and its stopped working.Before I add those plugins i got no issue on Visual Studio .How do i solve this .
<link href="../AdminCss/bootstrap.css" rel="stylesheet">
<link href="../AdminCss/bootstrap-responsive.css" rel="stylesheet">
<link href="../AdminCss/styles.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- addons -->
<script src="../js/chart-plugins.js"></script>
<script src="../js/jquery.uniform.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<!-- plugins loader -->
<script src="../js/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="../js/customCalender.js" type="text/javascript"></script>
<link href="../AdminCss/Admin.css" rel="stylesheet" type="text/css" />
Related
I am trying to use bootstrap-select with my angular project but it does not appear at all.
My dependencies after installing the bootstrap-select package with bower:
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-material/angular-material.min.css">
And for the js files:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.min.js"></script>
This is the only rule that is applied to the select item from the bootstrap-select css stylesheet.
select.bs-select-hidden, select.selectpicker {
display: none !important;
}
Is some of the other packages breaking it?
Thank you
My versions angular:1.6.2, bootstrap:3.3.7, bootstrap-select:1.12.2
I had the same problem recently, what i did was:
1) Download Bootstrap-select from SilvioMoreto Git;
2) Copy the bootstrap-select.js from bootstrap-select/js;
3) Paste the file in your project javascripts directory;
4) Link path to the file in your project header;
It worked for me, hope it helps!
My CSS doesn't apply for my userdetails page, but applies for every other page. This is my header which includes the CSS files as well as some bootstraps. My CSS file is in \laravel-master\public\css.
<head>
<title>#yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link type="text/css" href="css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
I've looked online and a lot of answers suggest adding a "/" before. I've tried adding this to make <link type="text/css" href="/css/style.css" rel="stylesheet">, but all this does is remove all CSS.
For this case you must use asset Laravel helper.
<link type="text/css" href="{{ asset(/css/style.css) }}" rel="stylesheet">
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
The button color is not blue when i use the btn-info class, but works fine when i tried in jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
screenshot
I think there are conflict between the material-bootstrap and bootstrap stylesheets. Try commenting one ans leave the other one, it should work. And if you do not want that way ,try manually via CSS coding, try the following:
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}
Did you try :
"background-color:#000;"
for example on .btn-info ?
I think you have some problem with your bootstrap file try using these cdns.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Working fine here
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
I downloaded a premake template of a ecommerce platform that contains css js views and such to apply to my Laravel framework project. It looked very nice but I would like to make some changes, for example color of the background. However once I tried to modified any part of the css file and then undo the modification, the website views gone really bad. the changes were undone but some of the effects seems no longer working after I made such modification, any explanation or solution for me to undo my modification?
I used MarkUps-dailyShop. Modified style.css lets say delete the below code in it
#aa-header {
display: inline;
float: left;
width: 100%;
}
even though i undo such change, the homepage was of some sliding bar and dropdown menu before but now all these effects just gone and left with just words and colors.
I use Laravel 5.2
I place css and js script in the layouts.app as shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soyegg</title>
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Bootstrap -->
<link href="{{public_path('css/bootstrap.css')}}" rel="stylesheet">
<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="{{public_path('css/jquery.smartmenus.bootstrap.css')}}" rel="stylesheet">
<!-- Product view slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/jquery.simpleLens.css')}}">
<!-- slick slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/slick.css')}}">
<!-- price picker slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/nouislider.css')}}">
<!-- Theme color -->
<link id="switcher" href="{{public_path('css/theme-color/default-theme.css')}}" rel="stylesheet">
<!-- <link id="switcher" href="css/theme-color/bridge-theme.css" rel="stylesheet"> -->
<!-- Top Slider CSS -->
<link href="{{public_path('css/sequence-theme.modern-slide-in.css')}}" rel="stylesheet" media="all">
<!-- Main style sheet -->
<link href="{{public_path('css/style.css')}}" rel="stylesheet">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<!-- datepicker end -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- contents-->
#include('layouts.navbar')
#yield('content')
#include('layouts.footer')
<!-- jquery-2.2.4.min.js -->
<script src="{{ public_path('/js/jquery-2.2.4.min.js') }}"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="js/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap Addon -->
<script src="js/jquery.smartmenus.bootstrap.js"></script>
<!-- To Slider JS -->
<script src="js/sequence.js"></script>
<script src="js/sequence-theme.modern-slide-in.js"></script>
<!-- Product view slider -->
<script src="js/jquery.simpleGallery.js"></script>
<script src="js/jquery.simpleLens.js"></script>
<!-- slick slider -->
<script src="js/slick.js"></script>
<!-- Price picker slider -->
<script src="js/nouislider.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
I just found where the problem is. It worked again after I change public_path('css/style.css') to url('css/style.css')
Is Laravel not supposed to read css by local directory?