Need to change template layout, menu background color, article background color

ravitavva

My site is running on Ja-Charity template. Here is what I am looking for

How to change background color from yellow to another color
How to change the template so huge gaps on the page could be reduced.
How to change article color fro grey to something else.

Much appreciated. Thx.

saguaros

With the yellow background, I guess you mean the background of the header, right? You can override with this custom CSS:

.t3-header {
    background: #ffd733 !important;
}

and change to your desired color.

For the gaps:

@media screen and (min-width: 992px) {
    .t3-sl {
        padding-top: 15px !important;
        padding-bottom: 0px !important;
    }
}

add these custom css code into the file: ROOT/templates/ja_charity/css/custom.css (Create this file if it doesn't exist now)

ravitavva

Thank you saguaros. The header background color and big gaps to some extent have been resolved.

Continuing on the gaps, as you see there is still big gap between the message and the article. I believe I need to turn off some of the components from the layout? Wondering what component must be turned off. Please let me know.

Let me know if you'd want to get userid/password credentials for our site .

Thx.

saguaros

ravitavva I believe I need to turn off some of the components from the layout? Wondering what component must be turned off.

it's weird as you asked for how to turn off the component 🙂

Could you share screenshot illustrating how you want to achieve?

saguaros

If you want to hide the component block from a page, you can go to Layout settings in template and add the menu item of that page in the field: Skip component content:

ravitavva

Hello saguaros Skipping a component is not an option.

What all I want is to show a message, if there is any, above the home page image thats all.

And I chose Article news flash, to show such content. What is happening is that, the message is showing up, but there is considerable number of empty lines/gaps between message and the image. I am not sure if this news flash component is the right one.

Let me know your thoughts. htgc.org/HTGC3

Thx

ravitavva

@saguaros If you look at our site htgc.org/HTGC3

on the homepage you see a gaps between, header and message, and between message and the slide show ( I cannot make the slide show work on my phone though ).

What I am looking for is a to have header fixed and have very clean gap between header to message , as well as between message and the slide show.

Hope this helps

saguaros

For the space between header and message, as I can see that there are several break tags in the message, you should check the message content again.

and the space underneath the message is the margin set for modules:

@media screen and (min-width: 768px) {
    .t3-module {
        margin-bottom: 56px !important;
    }
}

you can override and change to your desired value.

ravitavva

@saguaros Thank you. It looks bit better now. Again on the breaks on the message, if I don't put the breaks, header - which is fixed -- is overlapping part of the message. I see putting the breaks is a hack, but I don't know how else to make it work.

Thanks!

saguaros

I replied you in another topic, kindly share screenshot highlighting that overlap as I don't see it now.