how to add custom css to library

Question

I am trying to change the width of arrows in a bootstrap carousel. I have worked out that I need to change the width of the carousel.scss. However this is an external library and the css that I have tried (below) doesn't work. I have looked at many examples but I don't know how to incorporate it into my work. I would really appreciate someones help, or even a link to another question that looks like this problem. Thanks

CSS

 .modal-body  {
padding:15px, 8%;
}

HTML

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trip Guider</title>

    <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>

 <!-- Plugin CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">

 <!-- Custom styles for this template -->
 <link href="./css/creative.css" rel="stylesheet">
 <link href="./css/style.css" rel="stylesheet">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 </head>

style.css is the custom css file

Steve Westgarth · Accepted Answer · 2018-03-11 18:22:36Z

1

The easiest way to do this is to add a new stylesheet to your project called "CustomStyles.css". Add your override code to this stylesheet.

Provided you call your stylesheet as the last stylesheet on the page then the styles in "CustomStyles.css" should override the default bootstrap behaviour by default. If it still causes an issue it is possible to force your style to take precedence by marking it as !Important (shown below) but this shouldn't be necessary.

When loading your page after making this change be sure to reload the page emptying cache (ctrl f5) to make sure the original style isn't cached in your local browser.

 .modal-body  {
     padding:15px, 8% !Important;
 }

---- Result of chat conversation ------

In essence this solution works fine for overriding styles. In this instance though the wrong style was being overridden. The particular problem was resolved by inserting the following into the new stylesheet.

.carousel-control-prev {
    left: -50px;
}
.carousel-control-next {
    right: -50px;
}

edited Mar 11, 2018 at 18:22

answered Mar 11, 2018 at 15:38

Steve Westgarth

1038 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

OL12_9 Over a year ago

I have added a custom style sheet and I have put the custom css file below the library but this doesn't seem to work

Steve Westgarth Over a year ago

Please could you post your HTML Head Section and also the Custom Css File? - It would also be useful to see the control in your HTML that you are trying to apply the style to.

OL12_9 Over a year ago

I have added the html

OL12_9 Over a year ago

do you know what the problem could be?

Steve Westgarth Over a year ago

Your jQuery UI styles are still coming after your custom styles, i'd move them higher up so they come before your own styles. (Not convinced this is the issue though. Did you try the important flag? Finally if you also post your custom stylesheet I should have enough to be able to recreate your problem and i'll work out what the problem is for you - or is the only thing in your custom style the .model-body override?

|

Collectives™ on Stack Overflow

how to add custom css to library

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related