Home>Support>Changing post background to a semi transparent colour

Changing post background to a semi transparent colour

By thebookhutter, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

I would like to change the background of my posts, throughout my website, to a floating semi transparent white colour.

I don’t want to remove the current background image, which you can see is a mottled grey, but at the moment, the text is fairly illegible.

I would like the posts to have a floating background that does not go to the edges of the page, and is a semi transparent white, so that the background is still there and the text is legible.

Is this possible at all, or am I asking too much?

Many thanks and best wishes,
Maudie

URL: http://www.maudiemade.com/book-giveaway-june-2015/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago thebookhutter

    I have had some success here by changing the coding below in the Custom CSS bit:

    Old Coding:

    #post-main.no-sidebar{
    float: left;
    width: 775px;
    margin-right: 0;
    margin-left: 0;
}

    New Coding:

    #post-main.no-sidebar{
    float: right;
    width: 775px;
  	padding: 5px 20px;
    margin-right: 0;
    margin-left: 0;
  	background-color: rgba(255,255,255,0.4);;
}

    So I have added padding and inserted an RGB background colour. I also had to change the floatation to right, as it was shifting to the left when I added the padding.

    It is alright now, but it is a bit low on the page. Is there a way of moving it up to be in line with the social media buttons?

    Thanks!

  2. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Thebookhutter

    Sorry we weren’t able to reply sooner. It looks like your background is now inline/just above the social icons. Are you all sorted?

    Well done in resolving.

  3. 9 years, 3 months ago thebookhutter

    Hi Andrew,

    Thanks for the reply. I have managed to create a semi-transparent background, but the post is still lower than the social icons, any advice on how to shift it up higher?

    Many thanks for any help,

    Maudie

  4. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Sure. Please try the following at Appearance > Custom CSS, just copy and paste:

    /* Single Posts */

#post-share {
  width: 120px;
}
  5. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    If you don’t have a Appearance > Custom CSS menu item then please first install this plugin: Page: SiteOrigin CSS Editor.

    Let us know how you come along.

  6. 9 years, 3 months ago thebookhutter

    Amazing! Perfect – thanks very much – that would have taken me ages!

  7. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Awesome :) Glad to hear that helped. All the best!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More