Question posted in
The full documentation can be found here.

Divi theme – WP PageNavi not accepting CSS file

I recently added plugin WP PageNavi to our website. The plugin itself works well, but it refuses to obey the CSS styling provided in pagenavi-css.css

Web runs latest wordpress and DIVI theme (child theme). Elegant themes (DIVI developers) states, that this plugin is fully compatible with their products, but something is wrong.

Things I tried:

-enhanced child theme’s navigation.php with this code

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div><?php } ?>

-coppied modified pagenavi-css.css to child theme’s directory, content:

.wp-pagenavi {
    clear: both;

}

.wp-pagenavi a, .wp-pagenavi span {
    border: 1px solid #BFBFBF;
    padding: 3px 5px;
    margin: 2px;
    color: #000000;
    font-size: small;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    color: #ff0000;
}

.wp-pagenavi span.current {
    font-weight: bold;
    font-size: medium;

}

But still, no formatting appeared on the website (apart of red colour, which is wrong anyway). A live example can be viewed here: https://azub.eu/community/blog/

Could anyone, please, advice me, where am I wrong or why is the styling missing?
Thx

EDIT:
Looks like Autoptimize has something to do with it, but I excluded pagenavi-css.css from optimizing. But the general css optimization is still ON. Any gues?
Screen from Dev tool

EDIT 2: So after disabling Autoptimize, devtools already shows the source of styling as pagenavi-css.css dev tools screen BUT the style is still not there! Any thoughts?

EDIT 3: Today, I was looking onto a plugin conflict and turned all plugins OFF and ON and suddenly the CSS kicked in. But when I tried to update the CSS it is stuck again. I also performed the same steps that lead to a positive result the first time, but without any luck. Now it looks like this current look.
Any thought where could the CSS be held by WordPress?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, in my case what helped was to turn off every single plugin, then switch the theme to some default and then to turn everything back on. After these actions, CSS kicked in. It was DIVI and cache combination problem.


  2. 0

    I am afraid to say that you have to use !important in your CSS because your current theme is using !important CSS in its default behaviour. So do one thing, just replace it with this.

    .wp-pagenavi {
    clear: both;

}

.wp-pagenavi a, .wp-pagenavi span {
    border: 1px solid #BFBFBF !important;
    padding: 3px 5px;
    margin: 2px;
    color: #000000;
    font-size: small;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    color: #ff0000;
}

.wp-pagenavi span.current {
    font-weight: bold !important;
    font-size: medium !important;

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search