Toddler – Building a theme with Gutenberg, Theme.JSON – Examples – picture

[ad_1]

Hey! I am learning WordPress and trying to make a theme with new methods (theme.json and simplest as possible). Having difficulties figuring out how to do things.

​

\-**Question 1**: **How can/should I create buttons that are pictures, with text on top or hover text?**

\-1. made Button, changed it to have picture and all looked good, but when I add text over it it crops the image relative to text length.

\-2. I added a picture, added a link, tried to add text on top and scaling is again relative to text lenght ruining the image shown.

**Question 2**: **How can I set a custom location for Buttons/Pictures on the page?**

Everything is so blocky. I can create and divide everything into columns, rows and so on and the only way to set a custom location in theme.json **I’ve** found is to use the following custom CSS function. Example below moves all buttons in buttons group

“styles”: {
“blocks”: {
“core/button”: {
“css”: “position:relative; left: 50px; color:#9DFF20”,
}

To specify a single picture I figured I could define Additional CSS class(es) in Advanced on FSE (Full Site Editor) for each picture. On my test those are “imga” and “imgu”: I was not able to call single image with “core/image” block in theme.json, but when I added images to column group I was able to do this:

“styles”: {
“blocks”: {
“core/column”: {
“css”: ” & .imga {position: absolute; transform: rotate(10deg);} .imgu {position: absolute; transform: rotate(50deg)}”

but I’m unable to set any parameters for .imgu, on the above code I tried to state .imgu in many ways but could not get it to work. Only resulted .imgu to disappear on page.

**Question 3: How to define custom CSS in Theme.JSON for different images/buttons (different CSS Classes)?**

​

Example picture: Homepage with multiple buttons and I’d like something like this. Text in images or text while hovering.

\-I am learning, simple things are new for me and can be difficult so remember you’re explaining to a toddler here

\- I don’t want to be dependent on any theme builder plugins, I want to learn what and how I can do without those. Also, I don’t want a prebuilt theme where things happen, I want to make things happen.

​

[ad_2]