Custom CSS

I want to make some changes to the registration form (eg my template adds bullet markers to some items such as payment methods). Tuan was able to add CSS overrides to a previous version, but these have been lost and I'd like to be able to understand it and make the changes myself using the Custom CSS feature.

I'm trying to understand how to find the CSS styles using a Chrome extension but I'd like to understand where the basic Membership Pro CSS comes from but I can't find the CSS files for displaying in the front end.

Has anyone done this and can anyone point out where the CSS files are?

Ah. The main style sheet is here: /media/com_osmembership/assets/css

Alan Henness wrote: I want to make some changes to the registration form (eg my template adds bullet markers to some items such as payment methods). Tuan was able to add CSS overrides to a previous version, but these have been lost and I'd like to be able to understand it and make the changes myself using the Custom CSS feature.

I'm trying to understand how to find the CSS styles using a Chrome extension but I'd like to understand where the basic Membership Pro CSS comes from but I can't find the CSS files for displaying in the front end.

Has anyone done this and can anyone point out where the CSS files are?

I'm afraid I can't help with an extension per se Alan but have you used Chrome's (Firefox have similar) F12 key / developer tools?

developers.google.com/web/tools/chrome-devtools/inspect-styles/

If you right click your mouse on a webpage where you want to inspect / play with CSS changes live but without saving anything and therefore not buggering anything up at that point, then select the 'Inspect' option from the right click menu and follow some of the pointers in the above link.

Pay attention to the 'Live-edit a style' section in the above link. It does take some getting used to and I still fall foul of head scratching many a time but you may just take to it, like a duck to water compared to me.

Once you are sure that you have the correct selection required in the 'Styles' tab, you would then copy and paste what you need from there in to your OS Membership Stylesheet and then add your new styling within that specific element that you're working on / tweaking at that time.

Hope the above is of some help, until others come along and can maybe share their own ways of doing CSS interrogation / changes.

Regards,

Thanks PhoenixUK. I've been trying to use that but it's very confusing and I've not yet found where the line that determines the buttle marker.

I know I need to add somewhere but not managed to figure out where it needs to go yet or where it's inherited from.

Hi Alan

You can go to Membership Pro -> Configuration, there is a tab called Custom CSS. Put the custom css you want into that section and it would solve the issue

If you don't know how to do it, submit a support ticket, send us super admin account of the site and the link to the page

I will have my template developer to look at it and correct it for you

Regards,

Tuan

Thanks Tuan.

I'd like to understand it myself so I can make a few different tweaks by adding in CSS there (and hoping it can all be done with CSS). I'm busy with other things at the moment but will try to figure out the CSS I need next week, but I may be back for your help if I can't!

OK Alan. If you need help, don't hesitate to ask

Regards,

Tuan

I'm just getting back to this but can't see what CSS code I need to add or change.

To recap, there are two issues:

1. Some Membership Pro elements are styled as list elements and my template uses a round bullet graphic for these. Membership Pro uses this in several places including the 'Subscribe' button on the plans and where there are radio buttons. It also uses them before the payments options, hiding the boxes so that the option selected cannot be seen. See attached screenshots.







How can these bullet graphics be removed?

2. When hovering the 'Subscribe' button on a plan, the button changes size and colour. See attached screenshot with the cursor hovering over the button - compare it with the other screenshot.



See: www.healthwatch-uk.org/join

I know Tuan could get his CSS expert to fix these as he has done before, but I would like to be able to simple either disconnect these CSS elements from the template or provide some custom CSS so that the same problem doesn't happen the next time Membership Pro is updated.

Can you help?