Page navigation counter

webcentric

Hello,

I had a similar problem with an Ambient template where the page navigation at the bottom of the blog list was jumbled and you provide me with a code to fix the issue by installing it in the root/templates/ambient/css/custom.css.

In the outdoor life template, that exact path doesn't exist, however there is an override option, but I'm not sure where to add it.

Is the same code you would provide to correct the issue?

.com-content-categorynavigation .com-content-categorycounter.counter{
text-align: center;
padding-top: 30px;
}

.com-content-category.category-list .pagination__wrapper ul {
display: flex;
justify-content: center;
gap: 12px;
padding: 0;
}

.com-content-category.category-list .pagination__wrapper li {
list-style-type: none;
}

And where would I install it?

Thank you.

vangogh

Hi, webcentric
Please allow me some time to conduct a more thorough check.
I also need you to share your admin credentials so that I can debug the issue.

Regards,

webcentric

This message is visible to Moderators only

hidden content

vangogh

Hi, webcentric

I figured out the issues and add some files and some custom code for you. It looks your site update without some additional files in s5-template.

Load custom css and take a bit change style: load css file /templates/outdoor_life/css/custom.css
from /templates/outdoor_life/vertex/css_and_js.php line 154
Add some missing files & custom some code for fitting your site in:
/templates/outdoor_life/css/general.css,
/templates/outdoor_life/js/core/custom-script.js
It seems a little bit better now. You kindly check and response to us.

Regards,

webcentric

vangogh

I have another (actually a dozen more) site using the curb appeal template.

That are having the same issue with the page counter at the bottom of the page.

Although I see what you did above, I am not really clear on what you did. Would you provide step by step
Instructions for what needs to be done to correct the issue?

Everything else seems to be fine, I can add this to my process for each Curb Appeal migration to J!4.

Link - https://www.vehiclewarrantiesonline.com/ issue at the bottom.

I will provide admin access in a separate private post.

Thank you,

webcentric

Thank you, it looks to be working correctly! I appreciate you!

webcentric

This message is visible to Moderators only

hidden content

saguaros

webcentric Hi

You can open the 'custom.css' file in css folder of template you're using and add this custom code:


p.counter {
  text-align: center;
}
ul.pagination {
  align-items: center;
  display: flex;
  gap: 8px;
  height: auto;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

ul.pagination li {
  list-style-type: none;
  padding: 0;
}

ul.pagination li.active.page-item {

}

ul.pagination li.disabled.page-item {
  opacity: 0.6;
}

ul.pagination li.page-item > a {
  background-color: transparent !important;
}

ul.pagination li.active.page-item > a {
  background-color: #c7d345 !important;
  font-weight: 600;
}

ul.pagination li.page-item > a:hover,
ul.pagination li.page-item > a:focus,
ul.pagination li.page-item > a:active {
  background-color: #c7d345 !important;
  color: #fff;
}

ul.pagination li a,
ul.pagination li > span {
  border: 1px solid #313131 !important;
  color: #636262;
  display: inline-block;
  padding: 0 20px !important;
  border-radius: 100px !important;
}

ul.pagination li a:hover,
ul.pagination li a:focus,
ul.pagination li a:active {
  background-color: #f0f0f0;
  text-decoration: none;
}

ul.pagination .icon-angle-double-left::before {
  display: inline-block;
  content: '\f100';
  font-family: FontAwesome;
  font-weight: 400;
}

ul.pagination .icon-angle-double-right::before {
  display: inline-block;
  content: '\f101';
  font-family: FontAwesome;
  font-weight: 400;
}

Regards

webcentric

saguaros
Thank you Saguaros. This worked perfectly.

I just found another small issue on the same site / template. The search bar in the main menu doesn't work?

When clicking on it it simply doesn't open the field to enter a search.

I tried turning it on / off. I also reloaded the search mod to no avail.

https://www.vehiclewarrantiesonline.com/home

Thank you,

saguaros

Did this happen recently? did you install any 3rd party extension into your site? as I can see there is JS conflict there so the the search doesn't work.

webcentric

saguaros

This only happened when I migrated to Joomla! 4. I haven't added anything. This site only gets articles added to it, it doesn't
need any other extensions.

I migrated to Joomla! 4 I think on Friday March 3rd.

vangogh

Hi, webcentric

I directly fixed the issue on your site. It caused by you added script Google Analytics with a <script> tag without close </script>.

When adding any script next time, you should take care for closing tag.
It work well now: https://www.vehiclewarrantiesonline.com/index.php
Beside that, you kindly clear the cache on your server to get the latest change.

Regards,

webcentric

vangogh

Thank you,

After flushing the cache the site works as it should.

I copied and pasted the Google script, are you saying I missed the end script while copying?

Thanks again!

vangogh

Hi, webcentric
I meant you should close a script tag. It should look like:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-255165-8"></script
<script></script>

Regards,