Newbie needs some help please!

I’m a designer, not a programmer, but I am something of a power user. I’ve been running into a fundamental design problem in every theme I’ve tried. I think that I’ve found part of the problem, but I have no idea how to work a solution for it. I’m hoping perhaps someone here can help?

A little history:

I started to build my website as a free wordpress.com site with the twenty twenty two theme, ran into unworkable issues there and have moved on to self hosting instead. I used the wordpress.com export to try and save some of the work I’ve done and imported it into my self hosted site. I don’t know if this is relevant and maybe some of my issues are related to that, but the same problem exists in a different website that is a fresh install.

I have WordPress 6.1.1 installed. Using twenty twenty three theme.

Every time I try to place text on top of a cover with an image in it, the text turns black. The absolute only thing that will change it from black is to change each specific paragraph block text color. No global styling, global block styling, grouping and changing the text color in the group…nothing.

I dug around and found a github entry that talked about the cover block code being set up like that. I used ‘examine element’ in firefox, dug around a bit and found this. Inside the central column, you’ll see a color code of some sort in each section. One is 000, one is fff. Black and white. When I click off the little check box beside them, suddenly the text becomes the color I have selected in the global styling. But this isn’t a workable solution, because it’s only affecting how this tab in firefox sees it. I need it fixed everywhere.

​

https://preview.redd.it/dcuqzpnzncda1.jpg?width=1386&format=pjpg&auto=webp&v=enabled&s=1143201ba93f52a765160dc69670c0ee0330c5f4

This code seems to originate in the style sheet that is part of the core wordpress files that govern how blocks work, as you can see by the file path showing in the hover. When I open this file in notepad, it’s a wall of code I have no idea how to decipher.

How do I fix this so my styling will work on top of my cover image without messing up WordPress?

Thanks!

1 Comment
  1. You already went 95% of the way to solving this by identifying the problem.

    The next, and last step would be to copy the css identifier and style definition from the developer tool into the style.css file of your theme and simply replace the #000 with the color of your choice.

    .wp-block-image…..{
    color: #000
    }

    Note: you need to copy the whole thing I used dots cause I’m too lazy to type the whole definition.

    In case you are using the default wordpress theme and did not create a child theme, go ahead and create a child theme first, because else all changes would be lost on the next theme update. Creating a minimal child theme takes like 2 minutes, you will find plenty of guides online.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer