Configuring the Web Settings for the Member Directory Control

Tips for styling the Online Member Directory search page:

·            The buttons of the control inherit the color and size from the css classes “btn,” “btn-primary,” “btn-default,” and “btn-lg” from skin.css in the skin package. To change the color and size of the buttons,  you can modify those css classes directly; however, please note that doing so will create changes across all the buttons in the entire site. This should only be done if you want to replace the styling of all the buttons in the site with one that suits your brand.

·            To be more selective in changing the look and feel of the buttons, write control specific css in either custom.css, or in the specific css file for the control.

·            If you have access to the markup, you can also apply pre-existing css classes to the buttons in order to change things. For example, adding the class “btn-lg” to a button makes it larger with a bigger font size. The classes that affect button size are “btn-sx,” “btn-sm,” and “btn-lg.” The buttons that affect color are “btn-primary” (for primary actions like “Search,” “Go,” or “Next”), “btn-default” (for secondary actions like “Previous”) and “btn-link” (for buttons that quit transactions like “Cancel” or “Close”).

·            To change the styling of labels for text boxes and select boxes in “More Search Options,”  target the css class “membership-dir-label”

·            The styling for Directory Title and Directory Description are controlled by the css classes “heading2” and “heading3” respectively. These are standardized classes, like the “btn” classes, that are used throughout the entire site. Developers can modify them directly, affecting all headers throughout the whole site, or write specific css in custom.css or the css file for the control.

·            To change the background color of alternating results that come back from a search, write in your css as a selector “membership-dir-result-item:nth-child(odd)” and include the background color you would like to every odd numbered result to have.

·            To modify the size of the thumbnail photo that shows up in search results, target the css class “membership-dir-result-item-photo” and adjust the width. We recommend only adjusting the width and not the height. This will scale images better.

See also:

·            For an overview of this control, please see the Member Directory Control Overview.

·            For information on the back office configuration required for this control, please see Configuring the Back Office Settings for the Member Directory Control.

To configure the web settings for the member directory control:

1.    Add the "MembershipDirectoryControl" control to the desired page. For more information, please see Adding a .NET Web Control to a Page.
The Control Settings for this control display, as shown below. For a detailed description of each parameter, see the table at the bottom of this topic.

Text fields have a 250 character limit.

2.    Configure the necessary parameters.

3.    Click Save.

Since the name of the directory is defined in the back office via the Directory Title field, it is recommended that you do NOT define a Page Title when adding a new page AND "hide" the DNN Web Control Container title from the module settings.