Changing Styles (CSS)

WP Symposium Pro uses as few styles as possible, mainly for layout purposes.

It does not apply any aesthetic styles (colours, font sizes, etc), because:

  • It will use your theme styles, so it “looks” similar
  • It gives you control
  • It enhances compatibility with themes and other plugins

Headings tend to use the <h2> tag, with a class attached so you can change it.

To style, you can enter CSS into WPS Pro->Custom CSS via the admin dashboard.

Rather than search through code, the easiest way to identify a ID or class to style is to use (for example) the Firefox browser, right mouse click on a page element, and choose “Inspect Element. Other browsers have similar functionality.

Once you have the ID or class, you can style it. For example, to change the background colour of each profile activity entry, you would add:

.wps_activity_item { background-color: aqua; }

Or to add a line on the directory results:

.wps_directory_item { border-bottom: 1px dotted #999; padding-bottom: 15px; }

My styles are not changing, what to do?

Some themes will force their own styles, which is very bad practice, but does happen unfortunately. However, you may be able to work around them.

Let’s say you’re trying to change the textarea at the top of the profile activity page (using  wps-activity-post  short code), the ID is “wps-activity-post”, and so you would normally add the following custom CSS:

#wps-activity-post { background-color: aqua; }

If that doesn’t work, you can try adding the !important flag:

#wps-activity-post { background-color: aqua !important; }

Or if that still doesn’t work, you can try using the parent element first, and then including the textarea:

#wps_activity_post_div textarea { background-color: aqua; }

Experiment! 🙂

What is the Custom CSS on this site?

For reference, the following is the custom CSS used on

/* Theme */

h2 { margin-top: 40px; color: #900}
h3 { margin-top: 20px; color: #090}
h5.subtitle { color: #090; }

/* Specific buttons */

.wps_pending_friends_accept_reject input { 
 margin-top: 5px; 
 padding: 0 0 0 0 !important;

/* Avatars */

.avatar { border-radius: 48px; }
.avatar-300 { border-radius: 0px; }

/* Forum */

.wps_forum_post_sticky { background-color: #FFFACD; }

.wps_forum_search_title {
 font-size: 1.4em;
 line-height: 1.4em;
 font-weight: 100;

.wps_forum_get_title {
 font-size: 2.0em;
 line-height: 2.0em;
 font-weight: 300;

pre {

.wps_forum_get_title {
 line-height: 1.2em;

/* Forum signature */

.wps_forum_signature {
 border-top: 1px solid #afafaf;
 padding-top: 6px;

/* Show Posts */

.wps_show_post_date {
 font-size: 0.8em;
 font-style: italic;

Failing all that, you may have to consider using a different theme 🙁