Alpha DevCon 2018
Results 1 to 13 of 13

Thread: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

  1. #1
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    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.

  2. #2
    Member
    Real Name
    Richard Battle
    Join Date
    May 2017
    Location
    Austin,TX
    Posts
    87

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    After you have set your css within a ux component or grid, what happens when you hit the working preview button? You aren't specific about any warning or error message.

  3. #3
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    6,946

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    Nathan, are you making wholesale changes to the Alpha style... or just wanting to adjust a few classes?

  4. #4
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,940

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    I feel your pain as there are a lot of options in css that you just can’t see in the style builder or at the component level when in the development process. I just publish to my server, and make the changes in dev tools (chrome) for final tweaking. there are some great css tools online to build gradient shadows, and other interesting text effects, but once you get that you can set padding and margins in the browser to visually see the change.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  5. #5
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    Are you possibly looking for Style Tweaks? Here is a link to it:
    https://www.alphasoftware.com/docume...S%20tweaks.xml

    Not sure if it will help, but it sounds like what you want to do to me.

  6. #6
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    @asap rich, if I edit css inside of Alpha Anywhere software it will update the css in the live preview and working preview. The problem is the css editing options built-in to alpha aren't powerful enough for my use cases so I want to edit the entire css file by opening in my own text editor and making changes (Atom, Visual Studio Code, Notepad++ etc). When I do this and open live or working preview no changes show. I didn't mention any warning or error messages because there aren't any; it's just that all the changes I make to classes in my theme's style.css show 0 changes. I need to be able to do this for multiple reasons, 1 being media queries. When you code a css media query into Alpha Anywhere, for instance for a background color change when smaller screen width the software just reads it as a background color change rather than a media query that changes the background color when screen reaches a certain width once opened in the browser.

  7. #7
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    @WebDesignShop, Not exactly. To be more specific if you navigate to C:\Program Files (x86)\a5V12\CSS\Alpha\style.css you'll find the stylesheet for the Alpha Theme. If you open that file up you'll find 2200+ lines of css selectors and classnames that your web app is using. So if you have your UX component and go to properties and set "Style Name" to "Alpha" it should utilize these css settings from that style sheet. So if I added at the top of that stylesheet:

    * {
    background-color: black !important;
    }

    body {
    background-color: black !important;
    }

    then the entire UX background color should be black due to my custom changes I made to the stylesheet my UX component is using. My problem is that this is not the case. The background color doesn't change at all. This is just a simple example and i'm not trying to edit the background color (i can do that inside alpha's software) but there are changes I do need to hardcode inside the stylesheet and expect them to change on the components I select that style on. To be clear these changes do not show up in live preview, working preview, or in the browser both before and after saving and publishing.

  8. #8
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    That file may be the basis, but your project has it's own file. A css folder is created within your project files. You would need to modify that file to see any changes. As an example, in the project I'm currently working on today:

    css_route.png

  9. #9
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    I've done exactly that and see no changes. Also copy and pasted that style sheet in all locations where it exists and still no changes show up.

    Locations I've updated stylesheet are as follows:

    C:\Alpha_Projects\AlphaAnywhere V12\Tracker_V3\Tracker_V3.WebProjects\Default.WebProject\css\Alpha_modv1 (my project folder like you have above)
    C:\A5Webroot\LivePreview\CSS\Alpha_modv1 (Live Preview's Copy)
    C:\A5Webroot\CSS\Alpha_modv1 (The root copy)


    Does your software actually make the changes when you edit your css file in your project folder? Maybe my Alpha software is bugged? Already uninstalled and reinstalled it a couple times and even tried on 2 different machines.

  10. #10
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    Okay so i've figured it out to a point. I know why it's not being updated and changes aren't being shown now at least. I copy and pasted the stylesheet I made into all 3 places listed above. Then I kept the live preview folder open on 1 screen while running the live preview within alpha on another screen and it literally takes whatever css file is in there and overwrites it with another smaller file. No idea where it's getting that file from or how to fix this, but that's why none of my changes are showing or being saved. As soon as I click Live preview then full preview all my changes get overwritten....

  11. #11
    Member
    Real Name
    Sean OKelly
    Join Date
    Sep 2015
    Location
    Charleston, WV
    Posts
    131

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    I must admit I do this a different way. I go and copy a default style sheet. Then, I use the style builder to edit that style sheet. I can easily make changes to it and it has no issues....other than the fact that I can't just use an external style sheet (which is a major drawback as of now). So, I haven't tried to do what you are doing. It does appear though that the default style is what is carrying through for you.

    I would say the easiest way to solve your issue is to go through the convoluted process that Alpha wants you to follow for styling...atleast it works.

  12. #12
    Member
    Real Name
    Nathan Garrett
    Join Date
    Apr 2018
    Posts
    9

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    I figured it out. Host your product on local server and navigate to that local server in your browser. (192.168.0.0/{insert file with .a5w extention here} for example). Then move any stylesheet you want to use to the root folder C:\A5Webroot\CSS\{name of your custom theme here}. Whenever you make any edit to the style.css file there and save it you can refresh your browser with the server hosted page and it automatically reflects your changes. LivePreview overwrites the file so you can't view it in live preview, the work-around I found was hosting on a local server and just hitting refresh. Hopes this helps y'all! You can change absolutely anything this way.

  13. #13
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,506

    Default Re: Help getting Alpha Anywhere to give me live preview and working preview of CSS changes.

    Cheers
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

Similar Threads

  1. Live Preview Not displaying correctly - Working Preview crashes Alpha
    By lvasic in forum Mobile & Browser Applications
    Replies: 4
    Last Post: 01-15-2017, 04:08 PM
  2. Replies: 2
    Last Post: 07-27-2016, 02:46 PM
  3. Working Preview not displaying any selected style-Live Preview works
    By gitpicker in forum Application Server Version 10 - Web/Browser Applications
    Replies: 0
    Last Post: 07-30-2014, 11:08 AM
  4. UX & GRID: PREVIEW & WORKING PREVIEW are missing images, LIVE PREVIEW works fine
    By parkjammer in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 03-18-2014, 11:21 AM
  5. Tutorial: Live Preview and Working Preview handle arguments differently?
    By steveharris in forum Application Server Version 11 - Web/Browser Applications
    Replies: 0
    Last Post: 10-18-2012, 10:31 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •