I’m trying to copy the bootstrap button behavior of my webpages to a custom form I’m making but without all the other behaviors that the bootstrap.css controls. So I’m trying to add just the “btn btn-primary” class (I believe this is what controls bootstrap’s button behavior?) from the generic bootstrap.css to my custom style.css so the button on my custom form behaves like the buttons do on my other pages. (i.e., my custom form’s button does not color-change when I hover over it).
Is there a tutorial that covers how to add or modify classes in PG Pro 5.1? I haven’t found any.
(but your saved from a whitty remark there as its NOT for version 5! which is per your actual request)
And since PG is basically ALL ABOUT …styling and positioning…
But I do know what you mean with regards some of the docs but,
C’mon Randy… must try harder, search is your friend.
4/10
…there will be homework and questions to follow!
nb, you need to start to have some idea about how to edit and strip out bootstrap etc.
and inherience of classes
This is qutie good .
and for instance in your above post, you mention the “btn btn-primary” class, well… that’s 2 classes, with the 2nd being more specific than the first.
You can’t just write the magic words btn btn-primary as . you have to go and find those 2 actual class in your bootstrap.css file and copy them out BUT>>>>>>>>>
where ELSE is btn class?
So, using Pinegrow, …do this to check out just WHERE you find ALL THE BUTTON classes…
Kind of overwhelming. but you just need the bits…you…er…need.
have a vid!
If no one else has stuck up some better vid then Ill do one for you tmrw.
but basically what you want do do is click on a button whose behaviour you WANT TO REPLICATE BUT.
…it WONT just be the button class, because the button is an element
elements are ALSO styled in Bootsrap for repsonsiveness etc. and many thing.s
I see that it’s also affected by other style sheets too.
and a button is made of various bits
they are styled…
and the button is contained within…something! rows, columns, containers of some forrm
and guess what? yep! these TOO are styled…by some mysterious dark forces somewhere
*oh! unless you use Pinegrow to see where *
each time I go away from Pinegrow…I forget all this myself.
so you need to repicate all these OTHER BITS corrctly too.
right im Uber tired.
good night and thanks for reminding me of some stuff.
hopefully someone else will give you a better go of it before me tomorrow
When you say “behavior” do you mean the way the color of the button slowly changes as you hover over it, and then changes back when you move the pointer off it? This is accomplished easily with CSS transitions. You don’t have to go digging through Bootstrap classes to make this happen. There is a transition panel when you can add this behavior.
oh well done.
It is a bit bonkers, getting your head around all the styling, and just how to do it with Pinegrow as well.
I just spent 3 hours doing what turned into a glitch/bug report, to add what would have been one line!
To add a text shadow
did you check out the link on how to create a class?
Also, the tutorial I just followed is good (showing an introduction to media queries too) but I may have found a bug. not sure if that or operator error (that being me )
its a half an hour Walkthrought tutorial.
ive been on it for about 4 hours
its gone 3am now
Welcome to PineLand!
Also I was just looking for some docs on how to add your inline styles to separate stylesheet, have you checked out
particularly , points 3 and 4 @randyrie
and cheers for reminding me of sooooo much stuff I have to relearn.
while you are happy knocking out websites, I’m being considerably less productive, so well done It will all come for you I’m pretty sure
and this is a REALLY GOOD explanation…of something that can be had bending when getting to grips with Pinegrow, styling and css and the Bootstrap CSS styles (which you wish to replicate)
ive been looking for it for ages again, just found it for you
this vid
and the part at 27:20 in, about the difference between Properties Panel and styling panel, and when to use what, if playing with a framework, like Bootstrap or Foundation.
WHICH…are you supposed to use and when and why. This Is a pretty good explanation.
this is. link straight to that bit
*
