Skip to main content

Help » Creating epic group advanced styles

Table of Contents

What are advanced group styles?

Groups with epic status that want to go beyond simply picking colors, fonts and button shine have the opportunity to create 100% custom layouts, completely or partially overriding how groups look by default.

Advanced group styles are created through the use of CSS. CSS is the same tool professional web designers use, and allows for fine control over nearly every element on your group profile. With CSS, the number of looks you can create is infinite.

If you don't know CSS, there are hundreds of resources to help you learn online. You may also be able to get help or simply hire a designer on the Art & Creativity forums.

You may not use custom styles to hide or cover important interface elements. Misleading layouts may be removed for the safety of all members. Because advances styles are created by group founders/editors, they are not officially supported by the RPR, and the responsibility of fixing and maintaining them falls on the group founder.

If you're curious to try advanced group styles, you may create and preview them even in groups without epic status. However, you won't be able to activate your custom style for everyone to see without epic status.

How do I create an advanced group style?

Go to Your Stuff » Groups, then click the pencil next to the name of your group to begin editing it. You will be taken to the group editing overview page.

Click "Style" (The paintbrush icon ), then switch to the "Custom CSS" tab at the top of the page.

Click the button "Create New Style"

You may name your style -- this is only for your reference, it will not be displayed to group members.

You may make use of up to three Google Fonts in your custom design, if you desire. Make your selections from the drop-downs "Google font #1," "Google font #2" and "Google font #3". If you do not end up using google fonts in your design, we strongly suggest you set these back to blank to speed up how fast your group profile loads.

By default, some basic CSS that defines the general structure of all group pages will be pre-loaded, so you can focus on the customization that you want to do and nothing else. However, if you'd like to start completely from scratch, you may check the boxes "Do not load the default CSS" and "Do not load the default widget CSS" This is for super-advanced users only!

And now you're ready to start writing your custom CSS!

Remember to save when you're done.

I know CSS, but what should I know about the group box model to get started?

Refer to the following diagram to get a sense of how the HTML for group profiles is laid out.

div#profile-container
div#top-toolbar
ul#toolbar
div#banner
h1#groupName
div#navbar
ul#groupnav
div#main-contentcontainer .container-withSidebar/.container-noSidebar
h2#pageTitle
div#content .noSidebar/.withSidebar
.row
.col-12
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
.row
.col-6
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
.col-6
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
div#sidebar
div.inUseSidebarWidgets
li.widget
h3.widgetTitle
div#footer
p.tagline
ul.footernav

How do I preview my advanced group style?

Go to Your Stuff » Groups, then click the pencil next to the name of your group to begin editing it. You will be taken to the group editing overview page.

Click "Style" (The paintbrush icon ), then switch to the "Custom CSS" tab at the top of the page.

Click the "Preview" button next to the name of the style you want to preview.

How do I activate my advanced group style?

Only groups with epic status can activate advanced group styles.

Go to Your Stuff » Groups, then click the pencil next to the name of your group to begin editing it. You will be taken to the group editing overview page.

Click "Style" (The paintbrush icon ), then switch to the "Custom CSS" tab at the top of the page.

Click the "Activate" button next to the name of the style you want to preview.

Alternatively, click the name of the advanced style that you want to activate to be taken to the editing page. Scroll to the bottom of the editing page and put a check in the box "Make this the current active style, for everyone to see"

What happens to my advanced group styles if my group is no longer epic?

If your group epic status expires, your advanced styles will not be deleted. Instead, they will simply be deactivated until such time that your group becomes epic again.

Related Articles