Hi everyone,
I’ve got an app built using the classic design (the one loosely based on Material).
I know very little about CSS or HTML but I was wondering if it is possible to change the color of link components when I hover over them. I have done this before using other templates by hacking the HTML assets, but with this particular theme I was not sure where to hack or what to add.
Is this possible?
Sincerely,
Al
Yes it is.
Under themes, choose Assets.
Choose “dashboard.html” from the drop down.
Got to line 40 with has this block :
.sidebar-elt>.content a:hover {
background: #444;
}
and change that colour to whatever you want (this is the link background colour).
Then go to line 53 and edit this block :
.sidebar-elt a:hover, .sidebar-elt a:active {
color: white;
}
and change this colour for the text.
Hi David, I only see standard-page.html and theme.css. I tried adding it to the standard-page.html in the “place holder text”, but this doesn’t work.
If you chose the “Classic” theme, which page type did you then choose? You need to choose the one “Card based layout with side bar”. Then you should see the dashboard.html option.
Ah, I must be doing something oddly.
I definitely have the app with the card based layout and side bar, but for some reason under assets I don’t see “dashboard.html”. Yet clearly if I create a new app with that theme, I see ‘dashboard.html’.
Am I okay to just create a ‘dashboard.html’ and paste the usual contents into it? I’ve tried this but a warning pops up asking if I’m sure I want to get rid of the theme’s html in favour of this new html.
I was scared so I didn’t agree.
When do you get the warning?
If you create a brand new asset and paste the code in that will be fine. That shouldn’t give you any warnings.
Then you change the “html” property on the form to dashboard.html and you should see the new layout.
Okay. I will do that. I got the warning when I changed the “html” property on the form to the newly created “dashboard.html”
Ah that’s ok, as you can always change it back so it’s not terminal.
Phew. Thanks for reassuring me!
Okay so I’m sure this is just a lack of understanding, but check out the two images:
One is with the original html and one is with the dashboard html that I copied from a new app that I created. You can see with the 2nd one that the home link at the top as well as the side bar are gone. But those elements are there on the app where I stole the dashboard.html from.
Did you modify any of the css in the second one?
No, just a straight copy from a fresh new app.
Err…any chance you can send me a clone link so I can look at it here?
Sure, let me try to send the clone.
Ps) I just copied the dashboard html, should I have also copied over the theme.css and pasted that into my app?
That’s what I’m not sure about - the dashboard has its own CSS embedded in with the html. I think it’s not dependant on the theme.css, but I’m not 100% on that…
Okay so, I copied over the css as well from the fresh app to my actual app. This helped a bunch. The only thing was that my column panel turned grey and my repeating links got boldfaced (I can’t override the bolding from the IDE, but I was able to make the column panel white by changing the background property).
I’d love to clone this thing, is there a way from the IDE to do this?
Cloning - in the app browser there is a cog icon :
https://anvil.works/doc/img/screenshots/app-browser.png
Click that and select “publish app”
Down the bottom you will see “Allow someone to copy my app”
which, when clicked, will give you a link. Send me that (PM if you prefer) and I can then clone it locally here.
Also - wondering if it might be better to create a new app with the dashboard.html already there and move across your other forms?
Carried this on in PM for a bit, but “odd things” were happening.
I can get the CSS to mod just the itemtemplate links but I think it would be better to recreate the app using the correct app template.
Anvil Central (@meredydd, @shaun or @daviesian ) might be able to help better than I can, but if it were me, I would :
Thank you David. I will certainly take that advice.
Here’s a good link and video tutorial for what I’m suggesting as the layout :
