I am either really dense or just missing something super simple. But I can not for the life of me figure out how to put the items on top of the background image as has been done on the “Home” form of the Shop Template. It has a transparent box as well as a label and a button all sitting on top of the image of the cupcakes on the cutting board. When ever I put a card object on the form and add an image to it. I cannot put buttons or labels on top of the image. That is what I want to do. What am I missing? Thank you so much in advance. Randy
Welcome to the Forum @randy1!
The Shop Template is a little confusing both with respect to the names assigned to some components, and how they’re referenced in the example’s text.
You’re asking about about the Home form (which is referred to as The Landing Page in the text.)
Open that form within the IDE, and you can see (in the Components tree at the bottom right) that there actually is no Card component in this form. Instead, there is a ColumnPanel that is confusingly named card_1!
Double-click on card_1 and navigate to its ‘Properties’. Under ‘More Appearance Properties’, you’ll see that this component has been assigned the Role called header-photo.
Before that Role could be assigned, it had to be 1) defined within the theme.css file saved to Assets, and then 2) added to the list of Roles that in the App’s Theme.
The cupcakes-on-cutting-board image (which is also saved in Assets as header.jpg) is loaded into the form via theme.css (search for .anvil-role-header-photo within that file.)
Embedded within the card_1 ColumnPanel’ is another ‘ColumnPanel’ (this one named transparent_box_1.) and assigned the Role called transparent-box that also defined within theme.css.) The textbox and buttons are contained within transparent_box_1.
In the Roles list for the App’s Theme, you’ll find the header-photo and transparent-box roles, each of which has been designated as applicable only to ColumnPanel components. (I’m not sure why, but only the second of these has had the box checked that makes it available/visible under Theme Components' within the Components` toolbox.)
For more information about editing and creating Roles, take a look at https://anvil.works/docs/ui/custom-styling/roles in the docs.
Brooke’s Guide to Styling Apps with CSS is also informative.
Hope this helps!
1 Like
O.K. So I’m NOT missing anything “Super Simple”. I read your explanation and I do believe on some level I did follow the logic. But wow… I may decide I don’t have to have a button on top of my photograph. I appreciate your reply. It at least lets me know that while not easy it can be done. It also lets me know that I can quit pulling my hair out thinking it’s something simple I’m missing. For now I am going to proceed with getting the mechanics of my website working. i.e. all the buttons in place doing what they need to be doing. After that then we can think about more complicated stuff if I decide it’s even worth it. lol. Thanks again for the detailed reply. It was helpful. Randy.
I will take a look at Canvas. It might actually be what I am looking for.
So I decided to go through the TUTORIAL: The Canvas Component. But when I get to Chapter 3. I am getting an error when it tries to execute the following code that it had me add to the top of my form.
from ._anvil_designer import CanvasPlaygroundTemplate
from anvil import *
import random
The error message is saying that there is no “CanvasPlaygroundTemplate” found.
So I trying to figure out how I can make that available to my form? I do feel a bit lost. I am sure if I fully understood what was going on I could probably figure out why it isn’t able to find it. I’ll continue to poke around and see if I can’t figure it out. It is frustrating when a tutorial does not work correctly. I am sure it is because the anvil app has been updated since the tutorial was written. Anyway, any tips on how I might get this “CanvasPlaygroundTemplate” imported into my form would be awesome.
Randy
Try creating a new form, and you will see an import with Template suffix.
That import line is generated automatically when you name your form CanvasPlayground, and is updated when you rename it. And that xxxTemplate module is generated under the hood by Anvil.
1 Like
As @stefano.menci pointed out, this is not something that you add. This is something that Anvil adds, and it’s named after the Form, in this case, a form that the tutorial named CanvasPlayground.
Put the … CanvasPlaygroundTemplate line anywhere else, and it won’t work: Anvil hasn’t created the underlying named “Template” for you. So, please get rid of that line, and let Anvil take care of inserting its own …Template lines for you.
Thank you for clarifying. I don’t always name things the same as the tutorial calls for. Part of the reason is because I like to look for where “my names” show up in the code. But, yeah, I totally missed the fact that because I had not named the app or form “CanvasPlayground” was why it wasn’t working.
Everything is working correctly now and I’m getting a better handle on how Canvas works. I’ve got to say it is really cool! Definately thinking I will be using it to accomplish what I want to with my website. Currently still going through some tutorials on it. But it is really cool what can be done with it.
I appreciate your mention of it and your helpfulness in getting me back on the straight and narrow. I feel like I’m swimming in the deep end of the pool at the moment. But I’m not totally lost. And I can see the oh so many possibilities with this Anvil platform. I’m totally all in and excited to see what I can build with it.
Randy
3 Likes