Agama Blog

Hello,@dblivesound!

For now, there is no option to add backgrounds for the main content to these pages. But, of course, this can be done using CSS code.
Next code should work for the Blog page background:

body.blog #page
{background-image: url(https://pbs.twimg.com/media/Dc7Vyc3W4AUInzI.jpg);
    background-position: center center;
    background-size: auto;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

To change the background on the Single-post page use next code:

body.single-post #page
{background-image: url(https://pbs.twimg.com/media/Dc7Vyc3W4AUInzI.jpg);
    background-position: center center;
    background-size: auto;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

Change the background image URL per your needs.

Once, when your site is online, I can help you generate properly code.

Regards

• This reply was modified 6 years, 6 months ago by themevision.

Thanks for your reply, however this does not solve the problem as the background as you described has already been applied via sitewide css.

With that background on the blog pages I need to be able to apply colour and opacity to the actual blog sections so that the text can be read over the site background. This also requires the ability to change font colours, etc.

Hi,

That code should work anyway…
but if you want to apply the color use next code:

body.blog #page
{background:rgba(0,0,255,0.3)!important;
}

and

body.single-post #page
{background:rgba(0,0,255,0.3)!important;
}

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Hope this helps you.

Regards

Hi,

Thanks but again that’s not what I need. Instead of changing the post background colour I want to change the colour of the background within content blocks – e.g. on the main blog page each blog summary could have a solid grey background with white body text. The main page/post background would then show between all the blog summary boxes.

PS – where can I change the link color for the whole site?

Thanks

Hi,

Try to use next codes:

/*Artcles background color*/
.article-entry-wrapper
{background:rgb(211,211,211)!important;
}
/*Artcles text color*/
.article-entry-wrapper p 
{color:rgb(255,255,255)!important;
}
/*Artcles links color*/
.article-entry-wrapper a 
{color:rgb(0,0,0)!important;
}

Change the color codes per your needs.

Unfortunately, there is no option to change the color of the links on the whole site.

Regards

OK – thanks – we’re getting close. It would be easier if I gave you access to the site to get past the ‘under construction’ screen so you could see the problems. Happy to provide access if you want to send me an email address.

Two major problems still exist:

The sidebar on the main blog page needs similar treatment so that its content area, links, etc. can have a background and fonts defined.

The title/image area of the articles on the main blog page do not take the background instruction form the article body – is there an ‘articles-title-wrapper’ or similar to control that area?

Thanks (I’m learning – your help is appreciated)

Ignore second problem above – I changed .article-entry-wrapper to .article-wrapper which solved that one.

Hello,@dblivesound!

For the sidebar on the “Blog” page use next codes:

/*Sidebar background color*/
body.blog #secondary
{background:rgb(211,211,211)!important;
}
/*Sidebar text color*/
body.blog #secondary p 
{color:rgb(255,255,255)!important;
}
/*Sidebar links color*/
body.blog #secondary a 
{color:rgb(0,0,0)!important;
}

Regards

Thanks – that works.

I tried to sort the padding with:

body.blog #secondary
{padding:1;!important;}

I also tried:
body.blog #secondary widget-area col-md-3
{padding:1;!important;}

But neither seem to work. Can you help please?

Hello,

On what element do you exactly want to apply the padding?
If you want to learn more about how to select the right element and apply the padding, please check the links below:
Inspect Element
CSS Padding

Regards

It’s for the sidebar on the “Blog” page (your previous reply gave me the code for text, body color, etc. but there is currently padding of 0 applied. I tried

body.blog #secondary
{padding:1;!important;}

But that doesn’t work. If I inspect the element (in Chrome) I can adjust the padding from 0 to 2 but trying to apply this in CSS using the above code doesn’t work.

Hi,

To make your code work, you need to add a length unit for the value you have written.(in px, pt, cm, etc.)

(Did you check the link from the Above post?)

The next code should work for you:

body.blog #secondary
{padding:20px!important;}

Regards

Perfect – many thanks. Not sure how I missed that.