Change theme color - JA Mood

saguaros

It should be the same in Joomla 4, you can share the login info of your site eg: URL + admin account and tell me how you want to change in details, I will suggest you further.

webcentric

This message is visible to Moderators only

hidden content

saguaros

Hello

The menu is sticky when scrolling down, it's defined with this style:

.t3-header.affix {
    background-image: -webkit-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
    background-image: -o-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
    background-image: linear-gradient(to bottom, #5c58dc 0%, #4743d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c58dc', endColorstr='#ff4743d8', GradientType=0);
    background-repeat: repeat-x;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    padding-top: 12px;
    padding-bottom: 12px;
}

You can override this by changing to your desired color.

The same with section "Never Stop Listing"

.t3-sections .t3-module.mod-bg-brand-primary {
    background-image: -webkit-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
    background-image: -o-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
    background-image: linear-gradient(to bottom, #5c58dc 0%, #4743d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c58dc', endColorstr='#ff4743d8', GradientType=0);
    background-repeat: repeat-x;
}

webcentric

saguaros

Thank you for your response. So, these changes can't be made in the template manager, only in CSS? Is this inherent to all
Joomlart templates?

webcentric

saguaros

Is this is the CSS ? Please provide a path to this as I cannot find it by doing a search in each template file.

Thank you,

saguaros

This CSS code define the color of elements you're referring to.

In order to override it, you need to add your custom CSS code into this file:

ROOT/templates/ja_mood/css/custom.css (Create this file if it doesn't exist now)

For example, if you want to override color of section "never stop listing", you add this code:

.t3-sections .t3-module.mod-bg-brand-primary {
    background-image: your_color_here !important;
    background-image: your_color_here !important;
    background-image: your_color_here !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5c58dc', endColorstr='#ff4743d8', GradientType=0);
    background-repeat: repeat-x;
}

the same with others.

This 'custom.css' file will keep your custom code safe when you update new version of template.

webcentric

saguaros
It doesn't look like the file existed, so I created the file as you suggested. However the color isn't changing.
Please see screenshot.

webcentric

saguaros

This one didn't work
.t3-sections .t3-module.mod-bg-brand-primary {
background-image: your_color_here !important;
background-image: your_color_here !important;
background-image: your_color_here !important;
filter: progid😃XImageTransform.Microsoft.gradient(startColorstr='#ff5c58dc', endColorstr='#ff4743d8', GradientType=0);
background-repeat: repeat-x;

However this one did; with the exception the top part did not take
.t3-sections .t3-module.mod-bg-brand-primary {
background-image: -webkit-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
background-image: -o-linear-gradient(top, #5c58dc 0%, #4743d8 100%);
background-image: linear-gradient(to bottom, #5c58dc 0%, #4743d8 100%);
filter: progid😃XImageTransform.Microsoft.gradient(startColorstr='#ff5c58dc', endColorstr='#ff4743d8', GradientType=0);
background-repeat: repeat-x;
}

I still have not got the menu to change colors.

webcentric

saguaros

Ok I got the menu to work with the color I want, I apparently missed "}" when I copied the code in.

I assume the top part of the color is part of the "Hear's what's trending on Detroit Music Staion" module / section.
Seems like that one should be part of the same 'section' as the one I just changed ?

T Hank you,

webcentric

Looks like there is a text container (upper and lower) on the section module. The lower text container is the one I need to change the color in the "Never Stop Listening" module.

Also, where does one find the code snippets you have provided?

saguaros

You can inspect element that you want to check style and see the path of file which declares that css rule on the right side:

webcentric

saguaros

Ive used the inspector. Ive tried several changes in that area. I have attached a screen shoot of specifically

what I want changed.
I have also tried adding the code snippet to the custom.css file with out any luck.

.t3-header.affix {
background-image: -webkit-linear-gradient(top, #c50d98 0%, #c50d98 100%);
background-image: -o-linear-gradient(top, #c50d98 0%, #c50d98 100%);
background-image: linear-gradient(to bottom, #c50d98 0%, #c50d98 100%);
filter: progid😃XImageTransform.Microsoft.gradient(startColorstr='#ffc50d98', endColorstr='#ffc50d98', GradientType=0);
background-repeat: repeat-x;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
padding-top: 12px;
padding-bottom: 12px;
}

webcentric

saguaros

FYI after a dozen or so tries, this is the code to change that mod.

.t3-sections .t3-module.mod-bg-brand-primary svg {
fill: #c50d98;