The --callToAction variable, and many more like it, are built in to Perspective by default. You can find these in the browser developer tools, on the Elements tab, then on the Styles subtab. If you want to overwrite any of the default styles, you can do so in a :root{} element in the stylesheet, like this: :root{ --callToAction: #88b984; }
Looks great! I am having trouble getting the newest version (that does not require WebDev) to import, but the previous version (that requires WebDev) imported just fine! Are there any troubleshooting tips you would recommend? Or is it possible that the latest upload is empty? Thanks
Try extracting the zip file you're importing. I don't know what happens with the import to the Exchange but for whatever reason it seems to be embedded one extra folder. There should be a ReadMe.txt and a styles.css alongside the zip you want to import.
We just updated the resource over on the Ignition Exchange to version 2, and it gives you the Nav Tree Section view. So now you can make the menu structure as deep as you want!
Hi...awesome stuff! just a quick one...the menu does not retract when selection is made and running using perspective app on a mobile device....any suggestions?? Thanks!
In the current version of the Nav, on-hover expand/collapse has been removed. It just uses the button on the top bar for opening and closing the nav. You can add the on-hover back in, but you will have to play around with the stylesheet and add in .psc-nav:hover alongside places with .psc-nav-open. Expect a new setup guide video soon.
The text labels are invisible in the designer view cuz of line 91(visibility: hidden;) in the css file. I tried to work around this without losing functionality but to no avail. Any way to make text visible in the designer without losing functionality?
Yeah. This will be fixed in the pending version 2.3 update. But you can add a binding to the Nav view's root.props.style.classes property. The expression is: if({session.props.device.type} = 'designer', 'nav nav-open', 'nav') This will make it so that while viewing the Nav in the designer, the labels will be visible. And during a regular session, the nav will function normally.
Hi, I have downloaded the resource and i have uploaded the file via ignition exchange via gateway webpage. I didn't find any views or CSS file. Am i missing something? Could you please guide me on this?
When you download the resource, it should come in a zip folder. Inside that zip folder is another zip folder. Inside THAT zip folder, is the zip folder to import. You should see Readme and css files at the same level. Let me know if you need more help and I'll see what I can do. :D
Couple of troubleshooting questions: - What version of Ignition are you running? - Did the stylesheet import correctly? Are you able to open it up in the Designer?
Thank you for the video sharing! Awesome :)
Amazing work.....please upload more like this...
The transition's looks incredible 👍 great work..
@artek thank you very much, I was able to replicate and it worked just fine!
Very nice nav menu great job!
Thank you! Got another CSS example video coming right up.
Great video Dan, can’t wait for the next one!
well done, more of this pls :D
Wow really good work
thanks man!! best regards
Thanks for the video! A question though: where do you define the variable --callToAction?
The --callToAction variable, and many more like it, are built in to Perspective by default. You can find these in the browser developer tools, on the Elements tab, then on the Styles subtab.
If you want to overwrite any of the default styles, you can do so in a :root{} element in the stylesheet, like this:
:root{
--callToAction: #88b984;
}
Looks great! I am having trouble getting the newest version (that does not require WebDev) to import, but the previous version (that requires WebDev) imported just fine! Are there any troubleshooting tips you would recommend? Or is it possible that the latest upload is empty? Thanks
Try extracting the zip file you're importing. I don't know what happens with the import to the Exchange but for whatever reason it seems to be embedded one extra folder. There should be a ReadMe.txt and a styles.css alongside the zip you want to import.
this is really cool! great work. Would it be hard to add a 3rd teir to the menu structure ?
We just updated the resource over on the Ignition Exchange to version 2, and it gives you the Nav Tree Section view. So now you can make the menu structure as deep as you want!
Hi...awesome stuff! just a quick one...the menu does not retract when selection is made and running using perspective app on a mobile device....any suggestions?? Thanks!
In the current version of the Nav, on-hover expand/collapse has been removed. It just uses the button on the top bar for opening and closing the nav.
You can add the on-hover back in, but you will have to play around with the stylesheet and add in .psc-nav:hover alongside places with .psc-nav-open.
Expect a new setup guide video soon.
@@ArtekIntegratedSolutions thanks for your tips and looking forward to your update! 😎
awesome, thanks!
The text labels are invisible in the designer view cuz of line 91(visibility: hidden;) in the css file. I tried to work around this without losing functionality but to no avail. Any way to make text visible in the designer without losing functionality?
Yeah. This will be fixed in the pending version 2.3 update. But you can add a binding to the Nav view's root.props.style.classes property. The expression is:
if({session.props.device.type} = 'designer', 'nav nav-open', 'nav')
This will make it so that while viewing the Nav in the designer, the labels will be visible. And during a regular session, the nav will function normally.
Hi, I have downloaded the resource and i have uploaded the file via ignition exchange via gateway webpage. I didn't find any views or CSS file. Am i missing something? Could you please guide me on this?
When you download the resource, it should come in a zip folder. Inside that zip folder is another zip folder. Inside THAT zip folder, is the zip folder to import. You should see Readme and css files at the same level. Let me know if you need more help and I'll see what I can do. :D
I've imported, but the stylesheet doesn't seem to be working.
Couple of troubleshooting questions:
- What version of Ignition are you running?
- Did the stylesheet import correctly? Are you able to open it up in the Designer?
@@ArtekIntegratedSolutions v 8.1.42 and I can open the stylesheet. it imported into styles/stylesheet.css
@@ArtekIntegratedSolutions It seems it's just in the designer it doesn't want to load correctly. in perspective it woks just fine.
v 8.1.42