Page 1 of 2
Quick Themeing Question
Posted: Sat Jul 05, 2025 4:50 am
by Portman
Hi,
I am playing around with the theming of 1.1.0.3 ... trying do do everything through the user.css file in override.
So Far I have been able to do most things I wanted I am just stumped on the second Navbar with the categories and manufactures dropdown menus on them - I know I can controll the background colour in includes/components/template_top.php
Code: Select all
<div class="header bg-dark border-bottom">
but how do I do it with CSS?
Also - on the same header navbar how do I change the text colour of the primary headings for the dropdown menus?
Thanks heaps
Re: Quick Themeing Question
Posted: Sat Jul 05, 2025 5:34 am
by heatherbell
Portman wrote: ↑Sat Jul 05, 2025 4:50 am
Code: Select all
<div class="header bg-dark border-bottom">
but how do I do it with CSS?
See this demo:
https://psiwebsites.com/1103/
The background color of the header was changed with:
Code: Select all
.header {
background-color: red !important;
}
Portman wrote: ↑Sat Jul 05, 2025 4:50 am
Also - on the same header navbar how do I change the text colour of the primary headings for the dropdown menus?
See the same demo link above.
The text colour was changed with:
Code: Select all
.cm-header-menu .nav-link {
color: white !important;
}
But check the display on offcanvas (when you click hamburger on small screen), you might need to change styles there to match as we did in the demo linked above.
Re: Quick Themeing Question
Posted: Sun Jul 06, 2025 9:30 am
by burt
Don't forget that the flexibility of our templating system allows you to override the file you mention, and change it as much as you need to.
Portman wrote: ↑Sat Jul 05, 2025 4:50 am
includes/components/template_top.php
Copy
/templates/
default/includes/components/template_top.php
To
/templates/
override/includes/components/template_top.php
so this is actually a "new" file, not part of core code.
Now change that new file.
See
viewtopic.php?f=10&t=2825
Re: Quick Themeing Question
Posted: Mon Jul 07, 2025 9:57 am
by Portman
Thankyou @heatherbell ... I was in the right place I just haddent added the !important...
Thanks also @burt ... I was assuming that if I was working on theming that doing it all through CSS was the correct way to do things
Re: Quick Themeing Question
Posted: Tue Jul 08, 2025 8:27 am
by burt
Portman wrote: ↑Mon Jul 07, 2025 9:57 am
Thanks also @burt ... I was assuming that if I was working on theming that doing it all through CSS was the correct way to do things
.css way is good, but when you want to amend more than just colours or basic little things...that is when turning on/off modules, installing hooks and playing with language and template files comes in (all of which is just click here, click there - no coding needed).
Don't be scared to override files, as you really can't break anything. If somethign does break just delete the new file you created and you are back to where you started ready to try again.
Re: Quick Themeing Question
Posted: Fri Jul 11, 2025 6:48 am
by Portman
Hi Again
@heatherbell
But check the display on offcanvas (when you click hamburger on small screen), you might need to change styles there to match as we did in the demo linked above.
I've been playing around with the hamburger - the border and the background I have worked out no worrieos, but I cannot for the life of me figure out how to change the color of the 3 lines... any chance you can help me out with this one?
Thanks
Re: Quick Themeing Question
Posted: Fri Jul 11, 2025 7:32 am
by heatherbell
Use Dev Tools to see that icon comes from a SVG (Bootstrap gets that SVG) which has colour defined within it with RGB values.
That RGB can then be changed with CSS like:
Code: Select all
.cm-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(13 110 253)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
That is shown tested on one of our site demos:
https://psiwebsites.com/1103/
It specifically targets just the NavBar icon. Remove the parent target,
.cm-navbar, and it will target the HeaderMenu icon too.
An alternative strategy is to change the button background.
Code: Select all
.navbar-toggler {
background-color: yourColour;
}
Re: Quick Themeing Question
Posted: Wed Jul 16, 2025 8:02 am
by Portman
Thank you so much for this!!
Re: Quick Themeing Question
Posted: Thu Jul 24, 2025 4:39 am
by Portman
Hi again
@heatherbell ...
You seem to be the expert on this - so I thought I would ask you again...
I am just modifying the appearance of the .is-product class to make some padding between the actual card border and the image.... in css,
Code: Select all
.is-product {
padding: 10px;
border-color: #343a40;
}
when I do this, the top edges of image are still rounded - like they were when there was no padding - is there a way to remove the rounding of the image edges but still keep the actual card edges rounded?
Thanks for any help.
Re: Quick Themeing Question
Posted: Thu Jul 24, 2025 5:31 am
by heatherbell
Portman wrote: ↑Thu Jul 24, 2025 4:39 amis there a way to remove the rounding of the image edges but still keep the actual card edges rounded?
Tip: Use Dev Tools to see what is applying the rounding of the image edges.
You will then see that the images have the Bootstrap class
card-img-top which applies border radii so carefully target that with CSS according to your needs.