I am trying to make custom CSS changes to the style.css file and can't get the changes to display visually to see if it did what I wanted it to before publishing live. I've tried several ways to do this and none of which have worked thus far.
I've tried the following:
1. Added style.css from Alpha_modv1 to the "Style name" section in my UI/UX properties section. (custom stylesheet based off of alpha original stylesheet that i've made and have in css folder in my alpha workspace)
2. Linked the css file directly to the a5w page that renders the web component. for example: <link rel='stylesheet' type='text/css' href='css\Alpha_modv1\style.css' />
3. Manually copy and paste the updated stylesheet from my workspace folder to the alpha install directory under live preview folder. Example: C:\A5Webroot\LivePreview\CSS\Alpha_modv1
4. Published to local webroot with does step 3 for me in live preview folder and working preview folder so I don't have to copy paste.
5. Also tried restarting development server and closing and re-opening alpha anywhere completely because after publishing to local webroot it does say the style.css file inside C:\A5Webroot\LivePreview\CSS\Alpha_modv1 was just updated at the current time yet the changes are still not being displayed in live preview or working preview tab.
Chrome doesn't open a5w pages other than in text format so I can't think of any other way to go about this. I need to figure out a way to edit a css file or make a custom css file from scratch and make a change to it and see the change previewed after I save the style.css file. If I can't see any of the changes, how do I know the edits I'm making are what I want? I need more flexibility with css styling than alpha software allows me to do with just using their built in style areas for each component.
I have also made test changes to the css file such as:
* {
background-color: black !important;
}
body {
background-color: black !important;
}
to ensure that my changes are noticed when the css file updated so i'm not looking for anything subtle to change but rather something very impactful so it's easy to spot when the css preview starts working.
I've tried the following:
1. Added style.css from Alpha_modv1 to the "Style name" section in my UI/UX properties section. (custom stylesheet based off of alpha original stylesheet that i've made and have in css folder in my alpha workspace)
2. Linked the css file directly to the a5w page that renders the web component. for example: <link rel='stylesheet' type='text/css' href='css\Alpha_modv1\style.css' />
3. Manually copy and paste the updated stylesheet from my workspace folder to the alpha install directory under live preview folder. Example: C:\A5Webroot\LivePreview\CSS\Alpha_modv1
4. Published to local webroot with does step 3 for me in live preview folder and working preview folder so I don't have to copy paste.
5. Also tried restarting development server and closing and re-opening alpha anywhere completely because after publishing to local webroot it does say the style.css file inside C:\A5Webroot\LivePreview\CSS\Alpha_modv1 was just updated at the current time yet the changes are still not being displayed in live preview or working preview tab.
Chrome doesn't open a5w pages other than in text format so I can't think of any other way to go about this. I need to figure out a way to edit a css file or make a custom css file from scratch and make a change to it and see the change previewed after I save the style.css file. If I can't see any of the changes, how do I know the edits I'm making are what I want? I need more flexibility with css styling than alpha software allows me to do with just using their built in style areas for each component.
I have also made test changes to the css file such as:
* {
background-color: black !important;
}
body {
background-color: black !important;
}
to ensure that my changes are noticed when the css file updated so i'm not looking for anything subtle to change but rather something very impactful so it's easy to spot when the css preview starts working.
Comment