This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Changing post background to a semi transparent colour

Resolved 7 replies themetheme-snapshot
thebookhutter
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. thebookhutter 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. thebookhutter 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

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

    /* Single Posts */
#post-share {
  width: 120px;
}
  5. Andrew Misplon Staff 10 years, 7 months ago

    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. thebookhutter 10 years, 7 months ago

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

  7. Andrew Misplon Staff 10 years, 7 months ago

    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.

Have a different question or issue?

Start New Thread