As intuitive as Expression Web and Dreamweaver are Pinegrow doesn’t seem as much. Evertime I attempt to use Pinegrow I have the same issues.
I spend hours trying to locate css pages, make the changes, view them in the preview browser, then click save all pages. I do this because it takes so long to find any of the css pages and or code I need to change, Something as simple as a background color… forget it. it takes hours to find the right css page to edit… Then when i save it and move on to another step… I make a mistake then click on the undo one time… ALL the work I have done is undone and redo doesn’t work. Im not sure how Pinegrow is helping me do things correctly, or without bloated code… or the typical rhetoric I here… I simple need it to work, save pages im working on without undo affecting a saved page. Once its saved, it should be saved… It should not be able to be undone.
The next issue is DWT Template files. Im sorry, If anyone doesnt know what these are. They have been in existence since front page and Dreamweaver started. Its fine if Pinegrow doesnt want to recognize or acknowledge their existence, but sorry to say, they are an extreme time saver. With this said, I would have thought someone would have shown how to remove the code on the dwt template pages and how to convert to html… This code is not visible in expression web, and or Dreamweaver. If it is, then I have not been able to find it. Or is it a matter of changing the dwt extension to html and moving forward?
The right side pane for attempting to locate any type of css page is impossible and doesn’t work for anything im working on. Panel appears, disappears, pages, code, nothing makes any sense rhyme or reason… I have been through all the videos, documentation, everything and still cant find simple css pages…
I need a simple editor that I can see what the pages look like so I can edit them easily. Why cant I click on any part of a page, and get the code and css pages to show up so I can edit them? Why is this so hard to do? If anything I dont need anything else as a feature. Just simple open what I click on, and show me what it looks like… and Pinegrow cant do it.
My apologies for being frustrated. But I cant seem to understand why I can fumble around in expression web that incorrectly shows pages, but Pinegrow is worse? How can this be? I need simplistic results and I cant even get the basics to work.
Any suggestions would be welcomed. I cant keep fighting with this program… I don’t know if its buggy or if its me. I will assume it me, but cant figure out where the issues are.
Have you tried a text based editor such as Atom or Notepad++ for quickly opening and editing your source files? (html, css, js…)
If the css files are properly linked to the page you are working on they should appear in the css section of Pinegrow. You need to manually click to open them.
DWT is a template format which is not straight html and not easily converted. You would need to manually recreate the page or open the DWT file in an aware application and export to raw html format.
Expression Web is a an obsolete and no longer developed application. You really should not be using it to build your web pages. Dreamweaver in my opinion is also no longer a viable application for web development but it is still being developed or was by Adobe.
Long term you should really learn the basics of html, css and javascript so you are not dependant on specific applications such as dreamweaver or DWT type of formats. It is not required but you will continually run into walls you will not be able to get around without the basic knowledge.
The easiest solution for your DWT is to open them in Dreamweaver or Expression Web and export to raw HTML format then import those files into Pinegrow.
If you want to easily view and edit CSS and get an instant visual of what it looks like, use the Chrome browser and open the Inspect tool by either right clicking and select Inspect or using the keyboard keys
" ctrl + shift + i " Change the keys to fit your keyboard if you are using a mac.
You can easily change the look directly in the browser but this is temporary you will need to copy and paste the changes into a text editor, pinegrow, Atom, Notepad++ or whatever you are using and save the css file manually to keep the changes.
I appreciate your frustration. and Yep, when I leave Pinegrow for a while, its tools slip my memory and it frustrates me too, but first a few things for you.
.dwt files… there are TWO types and they don’t play nicely together.
Dreamweaver uses that extension and Expression web use that file extension, but they are different.
each app doesn’t read a .dwt file correctly from the other app. even though they have the same extension!
I’ll let you figure that one out as it makes no sense to me.
The template styling the code you cant see appears to be in comments apparently ,you might find this threads explanations helpful from a year ago (you can use the search function in this forum to look for things)
and from the year before that, someone else was having difficulty "importing* (using) the templated pages from Dreamweaver into Pinegrow. @Terry44 above helped out on that one too
That was due to malformed html , in case you come across that (and your code not showing up) as. you described.
Other wise. Yep I agree with you about the UNDO action. something is NOT RIGHT about it.
I haven’t explored it much in this new 5.2 version, but I haven’t noticed it listed as fixed.
What I find is that if I have SEVERAL PAGES OPEN in the text editor - which is quite normal.
and then click CTRL +Z - then … I have NO IDEA which of those pages are to be affected!
I would expect it to be JUST THE ONE THAT IS CURRENTLY BEING WORKED ON.
but this is not always so. quite often it is ALL OF THEM! or a different one and then I cannot CTRL+Shift+Z to redo.
and if I have saved it , then the HISTORY tab - the recycle, circular arrow tab - often NO LONGER shows the previous version. If I go BACK 4 version, hit save then ALL THE VERSIONS AFTER that are gone.
You, I and several others have mentioned this.
It Really needs looking at , or , better documentation to explain why it appears to be FUBAR in case some of us (including me!) don’t understand how to use it correctly or just what it is doing.
Once it has done its undo thing to all your work, that’s it. its gone
Now! Using Pinegrow!
yep confusing, until you put the time in and become familiar. Yep it confuses me too when I forget how to do stuff after being away from it, which is often.
You say:
How many pages are you using? I guess you mean that you’re using a framework (bootstrap ,your own etc) as well as your now css stylesheet (or inline styles which You haven’t yet saved to an external stylesheet) and are looking for the
ACTUAL < CORRECT FINAL CSS STYLE RULE that … makes the change you want?
And the CORRECT style sheet it is in.
OR
THE ONE that you should OVERULE the FRAMEWork Stylesheet in/SAVE YOUR NEW RULE IN>
So that it…just works?
If so, yep, that can be totally confusing unless you have a good grip of the whole C …ss thing.
the C is the Cascade.
If you totally get this already, please forgive me as Im’m trying to work out all your queries to help>
I’m just another user and you say you have seen All the Documentation and ALL the videos.
Well done! I haven’t I see new things in them all the time and are constantly reminded of loads I have forgot!.
Right I was going to write something out for you here, but based on:
and
Well, actually with this part, you can! this bit DOES work really well )
But is only REALLY useful if you know exactly what you’re doing and If it shows you WHAT You were expecting.
If you have no idea or are confused by the whole Cascading of the css thing then, yep, this is mind blowing.
which leads to the. next bit.
If you are using FRAMEWORKS… which have hundreds of classes in a stylesheet,
(like 500 or something - this is why Pinegrow is SO useful - if. you can remember ANY of those, well done)
Then you will have the Bootstrap stylesheets.
you will also have your own,
you will have inline styles. until you save in an external style sheet.
You might have !important styles to mess everything up.
and if you have both frameworks AND your own and then open up Pinegrow, you have styles tab and Properties tab.
Which to use? FIRST ? where is the ACTUAL one which makes the Difference?
Then the VISUAL Helpers?
WHICH ONE TO USE? They look the same!
why is there two for the SAME THING?
And the above is for EACH INDIVIDUAL
HTML ELEMENT or
FRAMEWORK COMPONENT
you click on.
if there are NO framework properties…then that entire section will be empty(hidden in your words maybe?)
if there are NO bespoke classes then Likewise.
ALSO… in the visual helpers HEADINGS below…if they are COLLAPSED but something is styled inside it, then… that should be BLUE to indicate for you to click it to expand and view the styling info.
…which will be listed above (er unless its. pseudo class…withing a media query…then you have to HUNT it down - bit of a faux pas on that one really.)
This could do with a little tweaking, if anyone wants to do a better version but better to wait until the OP gets back to us I think to clarify his queries.
if THIS description and the image above looks like the seed your confusion,
then please confirm and say just exactly how your trying to use it frameworks etc and then I and others will try to help.
IF, for instance you have clicked on element that has NO BOOTSTRAP component or styling then that top left box and underneath VISUAL STYLING TOOL… might be empty!±
The more information the better, even though it will drive you nuts to do so.
but tbh I will create some help things for you (or others beat me too it ) but I will also point you to the correct vids and tutorials, because it sounds like you may not have the best of grasps of just how Pinegrow works/to help you.
Which is understandable as it is BOTH a visual helper AND a code helper.
if you usually only do one. yes You will be stuffed/confused, until you come to appreciate that this does BOTH at the same time and so give you oodles of power too…shoot yourself in your own feet, if you don’t have adequate understanding of the whole cascade/ framework stylesheet /rule overriding thing
as well as style inheritance.
If you totally understand everything above, with regards basic stylesheet usage etc I might be at a loss.
so the more information the better.
for instance ,if your using COMPONENTS from FRAMEWORKS like say a NavBar (Viz. Bootstrap)
then it is created with and styled with BOOTSTRAP classes
FIRST
like it says from this point in this vid
Also, I have finally found THIS bit.
This is a good video by @matjaz (I find ALL his explanations to be superb and, frankly faultless! Perfect)
here, this will play at the exact point where he explains the SIMILARITY and difference between two very similar bits of the visual styling that are EASILY confused - it took me ages to break out of that that swamp…
here
this is a half hour video but THS POINT where the vid starts is very important with regards usage of both framework classes, your own classes and the pinegrow visual helpers and Interface.
and as you can see in the pic I posted earlier, now with moveable panels I have separated both of these so that I can now see them side by side. A BIG HELP!
If you are Using bootstrap for instance, another way to modify its variables and find your way around is explained in this excellent vid explaining how to create a Custom SCSS file, based on the original Bootstrap SCSS files (which then compile into CSS, just in case you’re not familiar with them - Pinegrow does this for you automatically)
here
If I am along the right lines and give more info then I will find and order the existing docs/vids in a way to explain to you and pad them out where it is lacking.
If you feel none of this is relevant, then I wont
Guys, Thanks, This was the most helpful post I have ever had…
I have a full understanding of CSS, Javascript and html… and I use notepad to edit all the time. My big problem is I need to see what my changes look like in Pinegrow. Its a total drag having to publish changes on a webserver just to see if I have my blocks, text, images in the correct place on a page. And Javascript… the sloppiest garbage language in the world, no wonder it only took the developer two weeks to create it… I use html5 anytime I can.
I reinstalled Pinegrow, seemed to help with the funkiness that I was experiencing.
The largest issue is I have to edit existing templates/shopping carts that I use for my customer base. These are ASP templates and as far as I can deduce were created once upon a time with Expression Web and have been updated to typical Responsive type web templates so they are backwards compatible.
The problem is actually finding the correct CSS pages and then the corresponding code as certain pages are just instruction lines/switches for features and options for the entire web template. Its confusing to start with.
I will give it a go and see if I can eliminate the Expression Webs DWT files within Expression Web then create and work within Pinegrow… Hopefully this time I can get off of Expression Web and quit using it.
Well done on the unfortunate but necessary Pinegrow reinstall and it sorting many woes-Excellent News.
I’m glad that that collection of info proved useful too. great.
I Probably wont be much use with regards the use of ASP pages and the Switches, but I have seen others mention use of them before and I REALLY recommend you don’t do a search of the current docs for Server side code…well that’s it… I knew you would!
@Ratfink Do you use a local intranet server such as Apache, PHP, MySQL running on your local computer for development purposes? ASP can be implemented as well, though I personally do not use it.
Pinegrow uses it’s own local server via node.js, which is how it loads pages into the editor but isn’t stand alone from Pinegrow. You need to use a common folder structure for your web files then choose the parent container folder and open it as a project versus opening individual files one at a time into Piengrow.
Javascript can be written very poorly and comes down to the individual developer, programmer. The language itself is very feature rich and also is object oriented which makes it a very powerful language.
The crap code you see a lot out there are written by novice programmers that rush to get something out there and in most instances it is about impossible to go back and update, fix the code. Better to just start over.
The problem with using WYSWYG Editors is that they quite often are not kept up to date with current technology and use too many shortcuts to do what they do. One of which is to use proprietary intermediary files to generate the final html output.
Just because the file extension they happen to use is a commonly seen one does not mean it is anywhere close to being created using standards of any kind. Which makes them incompatible with any editor but the one that created it. This is sloppy and also partly done on purpose to control you the user from straying to any other editor. Locks you in to that particular one. When the editor in question no longer is developed your stuck.
Expression Web used to be a paid software then microsoft decided to stop development and just gave it away for free. Dreamweaver is in final stages of being dumbed down having features removed that freelancers and those on the cutting edge of web development rely on, after being removed at a steady pace for years. It really is not a valid tool anymore for web development and has been abandoned by developers for the open source editors and programs like Pinegrow or similar competitors.
My advice is to avoid any application for web design or web development that does not work with the original html, css, js files directly. If they have to use some intermediary file system then avoid it.
Javascript ES6+ must be exported or compiled into the final javascript file for upload to the web host. The side effect of this compiling is that the end javascript file is much smaller and loads much faster, but both the source and final output file is still javascript. ES6 version of Javascript has so many features that they are not commonly built into web browsers so their needs to be instructions on how to use these features that go along with your javascript but because of how this process works often times the end file is much smaller than your original source file and loads much faster too.
Not so sure novice Javascript programmers would use ES6 though.
Javascript goes up to over ES11 not sure really how many there are. The most common used is ES5 which is what most people consider when they think of Javascript. ES6 and above is the object oriented and “advanced” feature rich stuff people are quite happy about and praise. Though it has to be compiled which means you need to know how to use npm and or node.js. Not sure if there are other ways to do it, I don’t know of any editors that do this at least right now. There might be I just don’t know of them.
I am seeing courses and some more in depth tutorials on ES7, ES8 and ES9. Javascript is ECMA Script which is a standard among other things. I believe there are other languages at least partially based on Ecma Script. Javascript is just another way of saying it I guess. Not an expert on it here.
If you are going to be using more indepth features or doing a lot of ajax and single page websites where javascript is used to handle all the front end stuff then you need ES6 and above. Many just use frame works but you also need to know ES6 if you are going to use something like React, Vue.js etc…
These frameworks also will compile the source, your written code, into the neccesary format for you. BUT you need to install them via npm which usually means you are using node.js so more things to learn than just the framework. Have to know how to install the framework, how node.js works, how npm works and also at least some javascript ES6 etc… Was surprise the stuff I had to figure out, courses have and had to take just to do what I was looking to do. Then by the end using visual editors kind of got in my way.
OH!@ Thanks, I had no idea, I thought ECMA Script 6 was the latest biggest Javascript version Ok! I’m so wrong.
Thanks I am still a total JS Noob, and so thought If I was going to start on the Javascript study, maybe I should go straight to ECMA Script 6.
But
It looks like I have my fundamentals mixed up!
And NO idea about the later versions.
thanks a lot.
I will put this on a back burner for when I get around to it. cheers.
