Best way to implement CSS overrides

Am finalizing our installation at educationlaw,org. Mostly there has been a lot to like. Now I need to do some custom coding to make Membership Pro match the rest of the site. Is it best to create a custom.css file in the server files as indicated in the documentation? Or, use the back end screen which can be found under Configuration? Can somebody show me an example?
2. I believe that anything I put there will override all the coding in your style.css file which controls most of the component layout in the front and back ends? Correct?
3. However, sometimes your style pulls from template.css or even bootstrap.css. We need to modify that because I myself wrote a lot of custom code to edit it and supplant it where necessary. How would I do that, say, when your app uses the default .button style found in template.css?
Across the site we replace that with this, across all components and plugins which have submit buttons.
.learnmore a { padding: 4px 25px;
box-shadow: 0 1px 1px RGBA(0,0,0,0.2);
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #ecaa4c;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
color: #ffffff;
font-size: 8pt;
}
.learnmore a:hover {
background: #00008e;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #ffffff;
text-transform: uppercase;
}
4. Some of your form layout definitely draws from bootstrap.css. In some forms I need to widen fields for good aesthetics. Obviously I don't want to disturb the core default code because probably a lot of other things are making use of it. So, how do I hack it via your custom.css screen, in such a way that it only applies to Membership Pro? Can someone provide an example?
5. In the plans, after scouring the documentation, I still don't see where and how to publish and use the short description and the long description. They must have a function. How do I make use of them? I should add that I don't absolutely need to, because there are several different ways to display that content. But when I get into a new app I usually like to learn everything there is to know - for the next customer.
As I said, overall, very impressed, and these small issues I am having are nothing at all out of the ordinary. Please point me to other posts where this is discussed; couldn't find them with search.
Thanx
-Jim Gribble

Hi Jim

1. For override css, you should go to Membership Pro -> Configuration, look at Custom CSS tab, insert the css code you want to change the appearance of the page to meet your need. If you have any difficulty, submit a support ticket sending us super admin account, link to the page and tell us the change you want. We will look at it and guide you

2. All of the pages in Membership Pro is surrounded by a div with css class osm-container. So if you want the custom style only affect Membership Pro, add ,osm-container as the first item in the selector

3. If your site template has twitter bootstrap loaded already, you should go to Membership Pro -> Configuration, set Load twitter bootstrap css in the front-end config option to No. That will avoid conflict between twitter bootstrap css loaded by Membership Pro with twitter bootstrap css comes from your site template

4. Normally, on plans list pages, short description will be shown. On plan details page, description will be shown. It does not work like that on your site?

Tuan

Hi Tuan, thanks for all the info. Now I understand use of descriptions. The system works fine.
Is this the answer to my CSS question?
.osm-container .btn a { padding: 4px 25px;
box-shadow: 0 1px 1px RGBA(0,0,0,0.2);
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #ecaa4c;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
color: #ffffff;
font-size: 8pt;
}
Am I on right track?
I have bootstrap off but swear I saw a Bootstrap parameter being loaded to field labels. I could be mistaken. Or it could be that the template itself reaches down to Bootstrap for some things. I have come across that with T3 System.
So I will "have a go" and play around with it tomorrow.
All the best,
-Jim G.

Hello Jim

Without looking at the page, it's hard for me to understand what you are trying to do with that custom css. So for this, maybe you should submit a support ticket sending us:

1. Super admin account

2. Link to the page

3. Tell us exactly what you are trying to do

We will look at it and guide you to do it (or if it's needed, we can help implementing the change for you)

Tuan

Sorry for delay. OK, will open a ticket for you with further details.
-Jim Gribble

OK Jim. We will check it when we receive your ticket

Tuan