can't change css from free downloaded template in a custom css file - no effect why is this?

SyncToy 0
Viewed 57

downloaded a free bootstrap template and try change the style with a custom css file but the css in the template did not change it. try to change some background colors and text color has no effect why is this not work, what can do, can template blocked that you can not do changes?

this is only a small part of example the css and html is to big to upload

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>

<div class="container">
<div class="col-lg-4 my-3">
<div class="card hover-top">
<div class="card-body">
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1">
change style text
</span>
<div class="d-flex align-items-end pt-4">
<div class="display-7 m-0 font-w-700 lh-1">Display Text</div>
</div>
</div>
</div>
</div>
</div>

/** style.css **/
/********** Template CSS **********/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #ffffff;
  background-clip: border-box;
  border: 0 solid #eff2f7;
  border-radius: 0.3rem; }
  .card > hr {
    margin-right: 0;
    margin-left: 0; }
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit; }
    .card > .list-group:first-child {
      border-top-width: 0;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem; }
    .card > .list-group:last-child {
      border-bottom-width: 0;
      border-bottom-right-radius: 0.3rem;
      border-bottom-left-radius: 0.3rem; }
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0; }

.card-body {
  flex: 1 1 auto;
  padding: 1.75rem 1.75rem; }

.card-title {
  margin-bottom: 0.5rem; }

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0; }

.card-text:last-child {
  margin-bottom: 0; }

.card-link + .card-link {
  margin-left: 1.75rem; }

.card-header {
  padding: 0.875rem 1.75rem;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: 0 solid #eff2f7; }
  .card-header:first-child {
    border-radius: 0.3rem 0.3rem 0 0; }

.card-footer {
  padding: 0.875rem 1.75rem;
  background-color: transparent;
  border-top: 0 solid #eff2f7; }
  .card-footer:last-child {
    border-radius: 0 0 0.3rem 0.3rem; }


/** custom.css try this **/
.newtextstyle{
color: red;
font-size:1.5em;
}

/** custom.css and this **/
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}

/* try to change this with no effect */
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>
bootstrap-5 css html
2 Answers

You need to put your css inside your style tag in html head

<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
<style>
...your styles
</style>
</head>

Or you can add it inside of existing stylesheet files, for example assets/css/custom.css that is already included

Vojin Purić0

with this example, it's impossible to figure out why your changes aren't working. the styles of some templates are load sometimes via js.

the priority of css load is

css file

<link rel="stylesheet" href="assets/css/custom.css" />

inside your html

<script>
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}
</script>

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>

inside a tag

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1" style="color: red;
font-size:1.5em;">
change style text
</span>

the highest priority is inside a tag and overwrites all changes try one of this an see what works for you

HACKBUGZ0
Related