search

joomlaboat / custom-tables

The Custom Tables extension allows you to create, manage, and display custom data on your Joomla site. It is helpful if you need to display data that is not part of the standard Joomla content structure. For example, you could use this extension to create a custom table for product information, customer data, or any other type of data that you need to display on your site. The Custom Tables is the CRUD solution for Joomla 3.x and 4.x - CREATE, READ, UPDATE and DELETE. You can add tables, fields, and layouts to create catalogs, forms, or details pages. It has 40 Field Types: Integer (numbers), Decimal, Text String, Time, Email, Color, Image, File, User, Language, etc.
https://joomlaboat.com/custom-tables
GNU General Public License v2.0
35 stars 11 forks source link

The pagination appears as list instead of a button #38

Closed TTonsing closed 1 year ago

TTonsing commented 1 year ago

Describe the bug The pagination appears as list instead of a button To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

joomlaboat commented 1 year ago

Pagination style depends on the website template.

Joomla 4 Cassiopeia template has the following CSS styles, paste it into your Layout CSS tab:

.pagination { display:flex; list-style:none; padding-left:0 margin: 1rem; } .page-link { background-color:#fff; border:1px solid #dfe3e7; display:block; position:relative; text-decoration:none; transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out }

.page-link:hover { border-color:#dfe3e7; z-index:2 } .page-link:focus, .page-link:hover { background-color:#eaedf0; color:var(--cassiopeia-color-hover) } .page-link:focus { box-shadow:0 0 0 .25rem rgba(var(--cassiopeia-color-primary),.25); outline:0; z-index:3 } .page-item:not(:first-child) .page-link { margin-left:-1px } .page-item.active .page-link { background-color:var(--cassiopeia-color-primary); border-color:var(--cassiopeia-color-primary); color:#fff; z-index:3 } .page-item.disabled .page-link { background-color:#fff; border-color:#dfe3e7; color:#6d757e; pointer-events:none } .page-link { padding:.375rem .75rem } .page-item:first-child .page-link { border-bottom-left-radius:.25rem; border-top-left-radius:.25rem } .page-item:last-child .page-link { border-bottom-right-radius:.25rem; border-top-right-radius:.25rem }