Once you have created a custom stylesheet, you will need to store it somewhere. It is not recommended that you store it in the plugin folder structure as this may be overwritten in the event of an upgrade.
There are a total of eleven stylesheets included in the plugin download that you may use as a starting point:
- generic-no-float.css (the plugin default, non-floated elements – this is the recommended stylesheet to use)
- generic-rigid.css
- wp-members-2016-no-float.css (non-floated elements in a Twenty Sixteen style)
- wp-members-2015-no-float.css (non-floated elements in a Twenty Fifteen style)
- wp-members-2015.css (based on Twenty Fifteen)
- wp-members-2014-no-float.css (non-floated elements in a Twenty Fourteen style)
Note that there may be additional stylesheets included in the plugin’s css folder, but those not listed here should not be used as they are only maintained in the plugin for legacy purposes.
Loading a custom stylesheet
There are three methods in which you may load a stylesheet.
Choosing a preloaded stylesheet
To choose from one of the four preloaded stylesheets listed above, there is a dropdown selector in the plugin’s Options Tab labeled “Stylesheet:” Choose one of the stylesheets from the list to change the stylesheet that will load with the plugin.
This list can be added to using the wpmem_admin_style_list filter hook. This hook allows you to write a filter function that will add your own custom stylesheet(s) to the dropdown selector.
Specify custom stylesheet location
If you have created a custom stylesheet, the simplest way to set the plugin to load it is to specify its full URL in the “Custom Stylesheet” field in the plugin’s Options Tab.
If you provide a location in this field, your custom styles will be loaded automatically rather than the default styles. When a value is provided in this setting, the plugin will load this instead of any stylesheet from the dropdown list above.
You must provide the full http path to the stylesheet (such as: http://www.mysite.com/wp-content/my-theme/my-wp-members-styles.css). It is recommended that you double check the URL in your browser. If you can’t see the stylesheet in the browser, your URL is incorrect.
See this post for more information on setting up a stylesheet this way so that it can also be edited in your theme browser.
Load the stylesheet using wp_enqueue_scripts
This is the more elegant way of loading a custom stylesheet, and it is more reliable. This post will describe how to do it. If you use the wp_enqueue_scripts method of loading a custom stylesheet, you can still store it in your theme folder to allow online editing as described in the previous method.