Quick Themeing Question

[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

[heatherbell]

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;
}

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.

[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.

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

[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

[burt]

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.

[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

[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;
}

[Portman]

Thank you so much for this!!

[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.

[heatherbell]

is 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.