Just wanted to verify something… To style a < hr > tag’s standard attributes (width, thickness, dotted/solid), you have to manually type in the code, right? Or is there some means to do it via the visual editor?
I would have thought the standard attributes (width, thickness, dotted/solid) would have been in the Element Properties section (or be accessible in the CSS visual editor section), but they don’t appear to be… unless you now style them by adjusting some other attributes now?
No biggie to just type it in manually in the code editor, but I just wanted to make sure.
Well! this lot of lines is very nice, on codepen.io (not what you asked but lovely)
But what you will notice, is that they use border-top to style the lines.
hr.style1{
border-top: 1px solid #8c8b8b;
}
that surprised me too
and in Pinegrow, on the left column, the Library
under LIST tab, there is a search box and you can type hr
In there and you will be able to drag a horizontal line to the tree or your page layout and then style it.
you will see there is one for plain html (hr) and another if you are using Bootstrap (Hr)
maybe others with Foundation etc.
so what I just did was, drag the html version (hr) then style it
with the Style(css) tab on the right… by scrolling down to borders in the visual inspector(the one with the rounded corners) and set a thickness and in the top drag down and then, if you click the empty little rectangle box to the right of that line thickness slider, you will see …
The Boarder styles Hurrah!
dashes, dots etc
Job done!
I assume you would use the bootstrap ELEMENT PROPERTIES first if using A bootstrap/framework element.
I can set thickness and color with that but no style, so I guess then you would use the above to fashion it?
Not sure but thats what I just worked out.
so thanks for asking.
I now know too
and if it’s wrong, we will both be told the correct way!
Yep, that’s what it seemed like to me… using the top border. It ‘worked’, but I wasn’t sure if that was just a coincidental thing (ie. it was actually the RIGHT way to do it).
One way I try to learn Pinegrow, when I’m confused about what I need to adjust in the visual editor (as, up to now, I had always hand-coded my sites, before I recently switched over to Pinegrow), is to type in the manual coding that I am familiar with, and then try and spot any ‘active’ attribute changes in the visual editor… sometimes it works, sometimes, it remains a mystery. I’m still battling a bit with the code vs visual editor equivalents… and the fact that many of the videos I just watched about Bootstrap3 are actually obsolete, as apparently a lot has changed from v3 to v4! Slowly getting there, though…
I’ll have to tinker with the < hr > tags some more, but ya, I’m sure you are right about them using the top border. Definitely seemed that way.
hopefully :).I wasn’t 100% sure either, so checked it out. If its wrong, someone smarter will tell us tomorrow maybe. And< yep I do the same as you . Write code, check inspectors!
BUT I have also realised that I was doing a large part of it wrong with regards to styling. I was mixing up the Element properties tab with the Style Tab.
the precedence. It now seems like I should have been using the EP> tab FIRST when using frameworks… and using the frameworks built In styles… ie, Bootstraps Danger warning blocks,
THEN… tweaking them in the Styles tab, and a whole bunch of saving that , or duplicating BS classes , saving in style.css… and overriding the BS ones.
That lot came up answering the last what is the difference between Element Properties/Styles tab convo.
And chugging on through the manual again, for the new interface.
Ha! Ya, that’s where we first ‘met’… you had replied to an older post from some other user, who was asking about the difference between the style and element properties… I had stumbled upon that post, and seeing as no one had seemed to answer you guys, I jumped in, and gave my best theory.
The way I always understood it, the first tab is the basic ‘built in’ attributes for the tags themselves, as well as any settings presented by Bootstrap (ex. a limited preset selection of default colours)… whereas the second tab (CSS) is where you pop open the hood, and go in and pull around at the guts (create your own CSS rules, etc).
Yep, still sometimes a struggle doing things like defining a rule and adding it to the selected element… All seems to make sense, until I realize that (for some unknown reason) the rule DIDN’T apply to the element… and has seemingly disappeared from the existing CSS rules list on top of all that! Never quite figured out what I was doing wrong whenever that happened… Seems to always take two tries! Still some growing pains, adjusting to building the site via the visual editor, compared to just hand coding.
Some good vids out there, but MANY were with the (v2?) Pinegrow… so that was a bit frustrating… even MORE so, since the interface and workflow seemed really clear and logical… and then I went to try it for myself, and most of the things were not there anymore! Obviously, stuff is there, but presented differently… but, it certainly made the transition more of a challenge. Check out The Net Ninja (YouTube). He has really great tutorials. Just watch out… Although his Bootstrap3 video series is excellent, much of it is no longer valid, as I just found out! (so many things got changed/renamed from Bootstrap 3 to 4).
mmm well you could also try doing stuff in version 2.951 its still available for download. I use it on Snow leopard (can’t go any higher with PG on that)… go on… try the classes on there.
I dare you
it …is a little…confusing. TO me anyway.
but I still like it.
its like toothache… you just have to poke it around and OWW… see if it works this Tim>>.OOOW…
Ha! Yep… That’s why I formally gave up on doing websites for people. I was never ‘pro’ by any stretch of the imagination, but I could whip up a nice looking site, doing things all old-school.
But, after struggling with stuff like getting video embedding that worked on all platforms, and CONSTANTLY having to do endless backup code for all of Internet Explorer’s quirks (…I swear, they don’t properly support ANYTHING!), I just gave up on it.
But, I have always done my own sites, and with Flash now ‘gone’ and everyone insisting on mobile friendly sites, I wanted to redo my site… and finally settled on Pinegrow, as it allowed me to both ‘auto-build’ stuff that I would normally be really confused about (or behind the times on)… but also allowed me to get under the hood, and do something other than some pre-made cookie cutter site with none of my personality/style in it.
So, here I am… The live update and sync between the code, display, and visual editor are really great at learning some of the stuff I struggled with previously. I really love being able to just grab blocks of the code in the tree and moving it elsewhere… definitely makes shifting things around (be it on the screen, or in/out of divs or containers) so much less of a nightmare.
Now, if only I could finally nail the whole centering thing… I’m often puzzled by WHAT and WHERE to put the centering attibutes… there’s seems to be so many options/variations (…element itself, the containing column… using text justification, float, flex… ). A little overwhelming, especially when I’m seemingly chasing my tail, adding things and taking things out, trying to figure out which thing is the right way (…or figuring out why sometimes NOTHING seems to work, even though it seems like it should). Always that ‘one little thing’ that kind of messes everything else up.
