How to view the css file?

Beginners
1

I am way new to Pinegrow. I have 2 files created from a site called Computer Hope for creating a webpage using Grid.

I have a index.html file and a index.css file.
You can view the file here and right click on it to view source and see the html and css.
http://davidswebsite.com/pinegrow

I go to File> Open> index.html file
I open the code editor and see the split screen showing the html but how to view the css file?

In my old copy of Dreamweaver it would open both files from File> Open and place them in separate tabs and you could easily click on either tab to view the properties.

How to do this in Pine Grow?

2

Hi @davidhelp here’s a link to an article about working with stylesheets in Pinegrow that should answer your question.

3

Plz try “double clicking” index.css… or right-click on the file for more options.

4

Thanks to all. I will look into this this weekend. I know why ‘they’ say can’t teach old dogs new tricks. I am an old dog : )

5

Hi @davidhelp,
The other thing about Pinegrow is that it gives you a lot of tools and different ways to do things. I know a lot of users don’t really “open” their stylesheets at all. They use a combination of the visual builder to add rules, along with"opening" their stylesheet in the Styles panel. If you go to the Styles panel (one with a paintbrush) and click on the stylesheets drop down on the right, you can then click on the name of the sheet and get a list of all rules that can be rearranged/edited.

image
image782×966 52.6 KB

image
image768×894 69.5 KB

The other option you have if you really like seeing the code is to use one of the Pinegrow plugins to be able to open and update your project from an editor like Visual Code Studio.
Cheers,
Bob

6

Thanks for the tip. I will need them : )

1 Like
7

Hi, its that Stylesheets Drop down on the Right

That really isnt at all obvious. That ALWAYS threw me when I’d been away for a while.
It just doesn’t catch the eye at all, and isn’t one of the most intuitive things to look for … when new or guessing / forgotten the interface.

how about making it Green like the upper icons (js thumbnail etc) when NO sheet is selected/opened, to make it a little more noticable, and toggles to grey when you HAVE opened a stylesheet or two… at least that way, it caught the eye, has BEEN used so the user knows its whereabouts, and … then greys back out when a css file is open as it no longer needs highlighting… really?

then… when you forget/havent used it for a while, get back to pg and BadoomTsch. its glowing green at you again for you to go click and LO! see your styles sheets.

Or we could jsut RTFM… but… where’s the fun in that when exploring a new app?