1. Home
  2. CommunityAlly
  3. How to Use CSS to Customize CommunityAlly

How to Use CSS to Customize CommunityAlly

Skill Level: Intermediate

This article contains information on using CSS to change the look of CommunityAlly items on your WordPress pages.

Watch This Video

If you are new to using CSS the video below will show you the basics.

Learn To Code: Teach Yourself HTML and CSS

How to Inspect Page Elements

We recommend using the Chrome browser as it has an option to view and inspect page elements.

Chrome Browser – View > Developer > Inspect Elements

Inspect Elements

Where to Place the Code

You’ll add your custom CSS to AccessAlly to prevent WordPress theme updates from overriding your coding.

AccessAlly > Settings > Styling

Scroll to the bottom to the CSS section as shown in the image below. Always place your newest code at the bottom of this box.

CSS Section in AccessAlly

CommunityAlly CSS

You can copy/paste the coding below in the Custom CSS box shown above. Always place new code at the bottom of the box.

1. Group Header Image Name Text

Header Image Text

Change the group header text to capitalize and 48 px.

h1.communityally-group-header-image-name {
font-size: 48px;
text-transform: capitalize !important;
}

2. Group Name Text

Group Name CommunityAlly

Change the group name text to uppercase and 24 px in size.

h1.communityally-group-name {
font-size: 24px;
text-transform: uppercase !important;
}

Active Menu Link

Change the active link color (shown as #f15a29 orange.)

body #buddypress * li.selected a {
font-weight: bold;
color: #f15a29;
}

All Links in CommunityAlly

Change ALL links to the same color (shown as #ff3f84 pink.)

body #buddypress * li.selected a {
font-weight: bold;
color: #f15a29;
}

5. Button Color

Button Styling CSS

Change the button color (shown in green) and button text color (shown in yellow.)

.buddypress .buddypress-wrap .communityally-comment-form-buttons input[type="submit"] {
background-color: #008800 !important;
text-color: #fff000 !important;
}

 

Frequently Asked Questions

Can you send me the CSS code to use?

We hope this article inspires you to learn how to code. We are not able to provide you with CSS code beyond what is in this article. If you need help with coding we recommend watching this video or posting in our #hirehelp thread.

I tried the code and it didn't work.

Join an upcoming free Tune Up call to show us your site. Here’s the link to our call schedule > https://access.accessally.com/accessally/accessally-tune-ups/

Updated on July 5, 2022

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Opt-In-Laptop.png

AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.