Text background colour change transparent

Hi,

I would like to know how can i change the background colour of the main text in all pages to the transparent colour, the same that the header background has. I would also like to have the same colour and transparency in the footer background.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .hentry,
    .site-content > .container,
    #secondary.widget-area .widget,
    .footer-widgets, 
    .site-footer, 
    .footer-info {
      background-color: transparent;
      border: none;
    }

Regards,
Kharis

Thanks for your reply.

the code made it completely transparent, but then i changed the colour in this code and now its working good. I have one more question to this topic. What is the persentage of opacity in the header backgroung colour originaly in Astrid theme?

It’s 90%. To change it becomes 30%. Try this code:

    .header-image:after {
      background-color: rgba(37, 46, 53, 0.3);
    }

Regards,
Kharis

Great, I kept it in 90% and i did tha same to the footer background and body background. Now I am facing the dificulty to change the colour of the fonts in the page titles or the blogs categories and a few other details.
The problem is that if I dont change the font colour to a bright one (preferably just white) then i cant see the text with the dark background that i chose.
Is there a solution to change the default font colour to white, gerenaly to the website? and then will i still be able to change the text colours that i can already change through the appearence>customize>colours menu?

Hello there,

You could also use this CSS code to change the text color.

    body, .widget-area .widget, .widget-area .widget a {
      color: #fff000;
    }

    h1, h2, h3, h4, h5, h6, .service-title a {
      color: #ff0000;
    }

For footer text color, use this code:

    .footer-widgets, .footer-info, .site-footer, .footer-widgets a, .footer-info a, .site-footer a {
      color: #ff0000;
    }

    .footer-widgets .widget-title {
      color: #fff000;
    }

Regards,
Kharis