This article gives instructions for applying CSS to NS Pro.
Well, let's start with the most common question.
Where to write CSS for NS Pro?
Quick answer: To your Joomla! Active Template's CSS (found in the Template Manager). That's the best place for writing css, anyway!
Custom CSS, or later included sometimes tends to create problems, because you can never guarantee the order in which the CSS is added.
What classes does NS Pro use?
The classes that are used for the fields are:
- inputbox for Input Text Fields
- button for Submit Buttons (and)
- componentheading for Headers in the Component Views
The classes that NS Pro uses in the plugin are:
- nspro for general use, applied to every element (and)
- nsprointro applied to the Plugin Intro Text
The classes that NS Pro uses in the module are:
- modnspro for general use (as in the Plugin) and
- modnsprointro applied to the Module Intro Text
The ids that NS Pro uses in the Edit Lists view are:
- nspro_editlists for the container div of the Edit Lists view
- nspro_editlist_fieldset for the fieldset containing the fields (and)
- nspro_editlist_table for the table used for structuring the fields
The class that NS Pro uses in the Newsletter List and Newsletter View views is:
- nsprotable applied to the table containing the Newsletter data
The classes used in the Unsubscribe view are:
- nspro and unsubscribe applied to all fields, and container div
Examples
Example: "I want to change the color of the module's button"
Solution:
div.modnspro .button {
background-color: #FF0; /* your color here */
}
Example: "I want to change the text color in the plugin's fields"
Solution:
div.nspro .inputbox {
color: #000; /* your color here */
}
Example: "I want to add a border around the form in my article (using the Plugin)"
Solution:
div.nspro {
border: 1px solid #f00; /* your border details here */
}
If you have a CSS query, or want to add another example here, click to contact me.
