Nobody wants to fix this banality...
In /administrator/components/com_virtuemart/assets/css/admin.styles.css
Just add at the end:
Quote.pagination {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center
}
.pagination .limit {
margin-bottom: 10px
}
.pagination li {
color: var(--template-text-dark);
display: inline-block;
margin: 0 3px;
list-style: none
}
.pagination li span {
padding: 5px;
--subhead-btn-accent: var(--template-bg-dark);
background: #dee2e6cc;
opacity: .5;
border: 1px solid #ccc;
display: block;
border-radius: .25rem
}
.pagination li a {
padding: 5px;
--subhead-btn-accent: var(--template-bg-dark);
background: #fff;
border: 1px solid #ccc;
display: block;
border-radius: .25rem;
cursor: pointer
}
Menu offcanvas in Admin Fix
In /administrator/components/com_virtuemart/assets/css/admin.styles.css
Just add at the end:
Quote
#vmuikit-menu-offcanvas-toggle {background: #333;max-width: 350px;overflow: auto}
#vmuikit-menu-offcanvas-toggle > div {position:relative}
Thank you for css.
I believe this fix will be override next update, unless you use user.css in your Joomla template.
Or developers include in vm template.
Thank you for the css Hazel. Css is not my topic, I have admit. I will check and take it assumingly.
I wonder if this makes problems with the other template. Currently we use both. So I need to find another file for that
Please take a look on it on j3 or the old template. It changes the size. I think this is less invasive
.pagination {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center
}
.pagination li {
color: var(--template-text-dark);
display: inline-block;
margin: 0 3px;
list-style: none
}
.pagination li a {
padding: 4px 12px;
--subhead-btn-accent: var(--template-bg-dark);
background: #fff;
border: 1px solid #ccc;
display: block;
//border-radius: .25rem;
cursor: pointer
}
Can you help me to make it less invasive? So that it works better in all 4 combinations? yeh j3/old, j3/new, j4/new ...
Now it should work with J3 and J4 with any template.
Quote/* ---------- offcanvas fix --------- */
#vmuikit-menu-offcanvas-toggle {
background: #333;
max-width: 350px;
overflow: auto
}
#vmuikit-menu-offcanvas-toggle > div {position:relative}
/* -------- pagination j3/j4 fix -------- */
.pagination {
display: flex;
flex-direction: row-reverse;
justify-content: space-between
}
.pagination > * {
align-items: center;
margin: 20px 0 0;
flex-grow: 1
}
.pagination .limit {
justify-content: flex-end;
}
.pagination .limit > * {
max-width: 100px;
padding-left: 5px
}
.pagination ul {
flex-grow: 0
}
.pagination li {
color: var(--template-text-dark);
display: inline-block;
list-style: none
}
.layout-default .pagination li {
margin: 3px
}
.layout-default .pagination li span {
padding: 5px;
--subhead-btn-accent: var(--template-bg-dark);
background: #dee2e6cc;
opacity: .5;
border: 1px solid #ccc;
display: block;
border-radius: .25rem
}
.layout-default .pagination li a {
padding: 5px;
--subhead-btn-accent: var(--template-bg-dark);
background: #fff;
border: 1px solid #ccc;
display: block;
border-radius: .25rem;
cursor: pointer
}
@media (max-width: 959px) {
tfoot {display:contents}
.pagination {
flex-wrap: wrap;
flex-direction: column;
align-items: center
}
}
This css style for <header> is not needed at all - it just breaks the template. Joomla default style is enough
in administrator/components/com_virtuemart/assets/css/admin_ui.css
in 6 line just delete this:
Quote#header { background: #ededed; border-bottom: 1px solid #D3D3D3;}
In general, I don't understand this philosophy in creating a Virtuemart admin template. There I see several frameworks in one. Bootstrap from Joomla system, crossing with flat style from Uikit
and squeezed additionally three-dimensional "Chosen" plug-in from Jquery, which spoils everything in forms. This is all very suboptimal :o
There are Bootstrap compatible solutions
https://haubek.github.io/chosen/
Or, if you chose Uikit, mark all forms that way and "chosen" off
https://getuikit.com/docs/form
yeh, help me doing it. I got this template, they started before j4 was out.