Changing background colour on pre-formatted block

  • Unknown's avatar
    lougrimm · Member ·

    I’m using a cover block to give me the background I want on a specific page. I’ve inserted text blocks on/in the cover block. I would also like to use a pre-formatted block on the cover block. However it forces me to use a background colour. I’ve found plenty of different CSS texts to make this background non-existent/transparent but none of them have worked for me.

    The site I’m working on is https://its-for-the-birds.org. The block in question is on the draft page – all the way to the bottom. Text reads ‘this is the background I want to change’.

    (If using the pre-formatted block ends up being a viable solution I’ll want to use the CSS on other pages later on too.)

    Not as important, but the font is quite different to the font used by the theme so I wouldn’t mind being able to change that too if simple enough.

    Thank you :)

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hello there,

    Happy to help you with this.

    I don’t think you would need CSS to change the background of the pre-formatted block.

    This can be changed as seen here:

    Are you seeing these options on the left there?

    Many thanks.

  • Unknown's avatar
    lougrimm · Member ·

    Hello

    Thank you – the options on the right? Yes. But there is no ‘transparent’ option. I can only reset the background colour to another colour. Unless there’s a transparency option there I’m missing? Fingers crossed there is!

  • fstat · Staff ·

    Hi there,

    What block exactly are you looking to make transparent? All your Paragraph blocks are already transparent. The images you have used though cannot be transparent as they already come with a white background. You’ll have to use PNG image files that support transparency.

  • Unknown's avatar
    lougrimm · Member ·

    Hello

    The block at the bottom containing the text ‘this is the background I want to change’. I want it to be transparent like the other paragraph blocks are. (One day I’ll fix the images with white background in GIMP or similar.)

    Thanks

  • aleone89 · Staff ·

    Hello there,

    Yes. But there is no ‘transparent’ option. I can only reset the background colour to another colour.

    Yes that’s true.

    The CSS you would need to make this transparent is: 

    
/* Transparent bg pre-formatted block */

.page-id-201 pre {
    background: rgb(245 245 245 / 0%);
}

    The .page-id-201 will make the CSS apply to just that page, removing that part will apply this site wide.

    I hope this helps.

  • Unknown's avatar
    lougrimm · Member ·

    Thank you – the script makes sens.

    But am I putting it in the wrong place? I thought it would go on the page, under Settings, Block, Advanced, Additional CSS classes but it didn’t work. So I removed it and put it on the site under Appearance, Additional CSS. Now in drafts it’s a very dark grey, and in preview it’s bright red. Eeek! Sorry if I’m being dumb.

  • aleone89 · Staff ·

    Hello there,

    Ah, this code wouldn’t go there – you should probably remove that.

    This could would be added via Appearance > Customize > Additional CSS.

    Apologies, I should have made that clearer in my last reply.

  • Unknown's avatar
    lougrimm · Member ·

    Hello

    No problem – perhaps it’s I who was unclear!

    I did try both places, and neither worked. Putting it in the right place makes the block bright red (as per 245,245,245) – so something is going wrong with the transparency part of the script.

    Thank you

  • staff-totoro · Staff ·

    Hi there,

    I checked in the customizer at https://wordpress.com/customize/ and it appears that you have added the code correctly. I think the fact your page is a draft is making it difficult for us to assess though, as it’s harder to see what the CSS does until after it is applied.

    After taking a look, this may work better. Can you delete the code you have now and replace with this?

    .page-id-201 pre {
    background: transparent;
}

    If this works and you want to apply it broadly across all pages of your site you can remove the .page-id-201 declaration, and use this code instead:

    pre {
    background: transparent;
}

    Hope this helps!

  • Unknown's avatar
    lougrimm · Member ·

    Hello there

    Absolutely perfect!

    Thank you. (to be honest I thought I started with something very similar from another forum topic – must have had a tiny error – maybe I swapped a : for a ; or something).

    Thanks so much – have a lovely day!

  • The topic ‘Changing background colour on pre-formatted block’ is closed to new replies.