ZCA Bootstrap 4 Template [Support Thread]

[diamond1]

Hello, I am looking to put .active in red on the ezpage header bar and on the category names see photos one on a site where there is active on the categories and one without which is mine, in the login page I am successful to put the .active in yellow here is the code

.nav-tabs .nav-link.active {
  color: #fcf501;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
} 

but in the column of the names of the categories I run into a wall. can you help me?

[dbltoe]

The categories tab menu adds the class .activeLink to the current link automatically.

Hopefully, you are using the site_specific_styles.php to control all your changes to the template. If not, rename the dist-site_specific_styles.php to site_specific_styles.php and save it to your CSS folder.

Then, for the categories add

.activeLink {
  background-color: #ffffff !important;
  color: #fcf501 !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
}

Unfortunately, the !important is needed to fully override the stylesheet_colors.css

Please Note: The use of the above colors for background and font will violate accessibility contrast rules. Your font color would have to jump to #807900 to meet the 4.5:1 minimum ratio.

It looks like we will need to add to the github wish list for .activeLink to be added to the ezpages bar. If so, the above code would need to be more specific than just .activeLink if you wanted different colors in different bars.

[diamond1]

Hello dbltoe, thank you for answering me so quickly, your modification

.activeLink {
  background-color: #ffffff !important;
  color: #fcf501 !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
} 

does not work,

I also have another problem if I put the css codes in site_specific_styles.php they have no effect, I had to create another .css file and paste my codes in this one.

[dbltoe]

Site specific should look something like

<?php /*
 * BOOTSTRAP 3.3.0
 *
 * Create a file called "site_specific_styles.php" to contain any changes
 * to base css provided by this template. Place site-specific content
 * between the opening and closing style tags.
 *
 * Refer to https://github.com/lat9/ZCA-Bootstrap-Template/blob/v300/pages/faqs.md for
 * additional information.
 */
?>
<style>
.activeLink {
  background-color: #ffffff !important;
  color: #fcf501 !important;
  border-color: #dee2e6 #dee2e6 #fff !important;
}
</style>

I do find that this is working in 3.3 but the border is not working in 3.4. See testDOTislam786booksDOTcom

Both are using the site specific css with !important

[diamond1]

I think I expressed myself badly about what I want to do, I put you a to a site, if you click on an ezpage you will see that once in the page the name of the page on ezbar remains yellow, also if you click on a category you will see that it remains red once the category is chosen. The code you provided me with changes color if you move the mouse over but it does not remain the color once the page has been chosen.

https://demo.templatemonster.com/demo/43915dothtml

[swguy]

File includes/templates/bootstrap/jscript/jscript_zca_bootstrap.js

starts with

$('a.imageModal').on('click', function() {

might need to be wrapped in

if ($('a.imageModal')) {

without this you can get

Uncaught TypeError: $(...) is null

if the page has no images.

[lat9]

File includes/templates/bootstrap/jscript/jscript_zca_bootstrap.js

starts with

$('a.imageModal').on('click', function() {

might need to be wrapped in

if ($('a.imageModal')) {

without this you can get

Uncaught TypeError: $(...) is null

if the page has no images.

Could you identify an example, preferably using the demo products, of a page that has no images?

[dbltoe]

I think I expressed myself badly about what I want to do, I put you a to a site, if you click on an ezpage you will see that once in the page the name of the page on ezbar remains yellow, also if you click on a category you will see that it remains red once the category is chosen. The code you provided me with changes color if you move the mouse over but it does not remain the color once the page has been chosen.

https://demo.templatemonster.com/demo/43915dothtml

If you are actually using a templatemonster template, that is probably the reason for the failure. TM templates are not supported in the forum.

You need to contact them to make their template respond to proper CSS.

[diamond1]

No Dbltoe the model is ZCA Bootstrap, I put the monster template link so that you can see what I want to do, I am inspired by this model to modify the ZCA Bootstrap

[dw08gm]

Hello, I am looking to put .active in red on the ezpage header bar and on the category names see photos one on a site where there is active on the categories and one without which is mine, in the login page I am successful to put the .active in yellow here is the code

.nav-tabs .nav-link.active {
  color: #fcf501;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
} 

but in the column of the names of the categories I run into a wall. can you help me?

Perhaps you have an a:active defined in one of your css files.

https://www.geeksforgeeks.org/differ...-active-links/

why ZCA-bs decided to go with a separate class .activelink is beyond my understanding.