Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a quick, sassified version of the default bbPress stylesheet.
/**
* bbPress specific CSS
*
* @package bbPress
* @subpackage Theme
*/
/* =bbPress Style
-------------------------------------------------------------- */
body.reply-edit .reply {
float: none;
}
span.bbp-author-ip {
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
font-size: 11px;
font-weight: bold;
color: #aaa;
}
#bbpress-forums {
background: transparent;
clear: both;
margin-bottom: 20px;
overflow: hidden;
font-size: 12px;
hr {
margin: 0 0 24px 0;
}
div.even,
ul.even {
background-color: #fff;
}
div.odd,
ul.odd {
background-color: #fbfbfb;
}
div.reply {
height: auto;
width: 100%;
}
div.bbp-forum-header,
div.bbp-topic-header,
div.bbp-reply-header {
border-top: 1px solid #ddd;
background-color: #f4f4f4;
clear: both;
margin-bottom: 0;
overflow: hidden;
padding: 8px;
}
.status-trash.even,
.status-spam.even {
background-color: #fee;
}
.status-trash.odd,
.status-spam.odd {
background-color: #fdd;
}
.status-closed,
.status-closed a {
color: #ccc;
}
ul {
background: none;
list-style: none;
margin: 0;
padding: 0;
&.bbp-threaded-replies {
margin-left: 50px;
}
&.bbp-lead-topic,
&.bbp-topics,
&.bbp-forums,
&.bbp-replies,
&.bbp-search-results {
font-size: 12px;
overflow: hidden;
border: 1px solid #eee;
margin-bottom: 20px;
clear: both;
}
}
li {
background: none;
margin: 0;
list-style: none;
&.bbp-header,
&.bbp-body,
&.bbp-footer {
clear: both;
}
&.bbp-header,
&.bbp-footer {
background: #f3f3f3;
border-top: 1px solid #eee;
font-weight: bold;
padding: 8px;
text-align: center;
}
&.bbp-header {
background: #eaeaea;
ul {
overflow: hidden;
&.forum,
&.topic {
border-top: 1px solid #eee;
overflow: hidden;
padding: 8px;
}
}
div.bbp-topic-content span {
&#subscription-toggle,
&#favorite-toggle,
&#subscription-toggle,
&#favorite-toggle {
float: right;
}
}
}
&.bbp-forum-info,
&.bbp-topic-title {
float: left;
text-align: left;
width: 55%;
}
&.bbp-forum-topic-count,
&.bbp-topic-voice-count,
&.bbp-forum-reply-count,
&.bbp-topic-reply-count {
float: left;
text-align: center;
width: 10%;
}
&.bbp-forum-freshness,
&.bbp-topic-freshness {
text-align: center;
float: left;
width: 22%;
}
&.bbp-header,
&.bbp-footer {
.bbp-search-author,
.bbp-forum-author,
.bbp-topic-author,
.bbp-reply-author {
float: left;
margin: 0;
padding: 0;
width: 120px;
}
}
&.bbp-header,
&.bbp-footer {
.bbp-search-content,
.bbp-forum-content,
.bbp-topic-content,
.bbp-reply-content {
margin-left: 140px;
padding: 0;
text-align: left;
}
}
&.bbp-body div.hentry {
margin-bottom: 0;
overflow: hidden;
padding: 8px;
}
}
.bbp-forums-list {
margin: 0 0 0 5px;
padding-left: 15px;
border-left: 1px solid #ddd;
li {
display: inline;
font-size: 11px;
&.bbp-footer p {
margin: 0;
line-height: 1em;
}
}
}
div.bbp-forum-title,
div.bbp-topic-title,
div.bbp-reply-title {
h3 {
background: none;
border: none;
font-size: 16px;
line-height: 1em;
margin: 8px 0;
padding: 0;
text-transform: none;
}
}
div.bbp-forum-author,
div.bbp-topic-author,
div.bbp-reply-author {
float: left;
text-align: center;
width: 115px;
img.avatar {
border: none;
max-width: 80px;
padding: 0;
margin: 12px auto 0 auto;
float: none;
}
a.bbp-author-name {
clear: left;
display: block;
margin: 0 12px;
word-break: break-word;
display: inline-block;
}
.bbp-author-role {
font-size: 11px;
font-style: italic;
}
}
div.bbp-forum-author a.bbp-author-name {
//clear: left;
//display: block;
}
}
/* =Topic and reply content
-------------------------------------------------------------- */
#bbpress-forums {
div.bbp-forum-content {
margin-left: 130px;
padding: 12px 12px 12px 0;
text-align: left;
}
div.bbp-topic-content,
div.bbp-reply-content {
margin-left: 130px;
padding: 12px 12px 12px 0;
text-align: left;
/* Clearing hack */
&:after {
clear: both;
content: ".";
display: block;
float: none;
height: 0;
font-size: 0;
visibility: hidden;
}
a {
background: none;
border: none;
display: inline;
font-weight: normal;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: none;
line-height: 1em;
margin: 24px 0;
padding: 0;
}
img {
max-width: 100%;
}
ul,
ol {
margin: 0 15px 15px;
padding: 0;
}
ul li {
list-style-type: disc;
}
ol li {
list-style-type: decimal;
li {
list-style-type: lower-alpha;
li {
list-style-type: upper-roman;
}
}
}
code,
pre {
font-family: Inconsolata, Consolas, Monaco, Lucida Console, monospace;
display: inline-block;
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 0 5px;
max-width: 95%;
vertical-align: middle;
margin-top: -3px;
}
pre {
display: block;
line-height: 18px;
margin: 0 0 24px;
padding: 5px 10px;
white-space: pre;
overflow: auto;
code {
border: none;
padding: 0;
margin: 0;
background-color: transparent;
overflow-wrap: normal;
max-width: 100%;
}
}
}
}
/* =Reply to
-------------------------------------------------------------- */
#bbpress-forums div {
&.bbp-reply-to {
margin-left: 130px;
padding: 12px 12px 12px 0;
text-align: right;
}
&#bbp-cancel-reply-to {
text-align: right;
}
}
/* =Breadcrumb and Tags
-------------------------------------------------------------- */
div.bbp-breadcrumb {
float: left;
}
div.bbp-topic-tags {
float: right;
}
div.bbp-breadcrumb,
div.bbp-topic-tags {
font-size: 12px;
p {
margin-bottom: 10px
}
}
#bbp-topic-hot-tags {
clear: both;
}
/* =Search
-------------------------------------------------------------- */
#bbpress-forums {
#bbp-search-form {
clear: left;
.hidden {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
background: none;
left: -999em;
}
#bbp_search {
display: inline-block;
width: auto;
}
}
div.bbp-search-form {
float: right;
}
}
/* =Admin Links
-------------------------------------------------------------- */
span {
.bbp-admin-links {
float: right;
color: #ddd;
a {
color: #bbb;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
text-decoration: none;
}
}
}
fieldset span.bbp-admin-links {
float: left;
}
tr td span.bbp-admin-links a:hover {
color: #ff4b33;
}
td.bbp-topic-admin-links,
td.bbp-topic-counts {
width: 50%;
}
.bbp-forum-header,
.bbp-topic-header,
.bbp-reply-header {
a.bbp-reply-permalink {
float: right;
margin-left: 10px;
color: #ccc;
}
}
/* =Toggles
-------------------------------------------------------------- */
.bbp-row-actions {
#favorite-toggle {
text-decoration: none;
padding: 0 3px 1px;
color: #7c7;
border: 1px solid #aca;
background-color: #dfd;
font-weight: bold;
font-size: 13px;
a:hover {
color: #5a5;
border-color: #7c7;
background-color: #beb;
}
span.is-favorite a {
color: #faa;
border: 1px solid #faa;
background-color: #fee;
&:hover {
color: #c88;
border-color: #c88;
background-color: #fdd;
}
}
}
#subscription-toggle {
text-decoration: none;
padding: 0 3px 1px;
color: #7c7;
border: 1px solid #aca;
background-color: #dfd;
font-weight: bold;
font-size: 13px;
a:hover {
color: #5a5;
border-color: #7c7;
background-color: #beb;
}
span.is-subscribed a {
color: #faa;
border: 1px solid #faa;
background-color: #fee;
&:hover {
color: #c88;
border-color: #c88;
background-color: #fdd;
}
}
}
}
#bbpress-forums {
.bbp-forum-info .bbp-forum-content,
p.bbp-topic-meta {
font-size: 11px;
margin: 5px 0 5px;
padding: 0;
word-wrap: break-word;
}
p.bbp-topic-meta span {
white-space: nowrap;
}
}
/* =Pagination
-------------------------------------------------------------- */
.bbp-pagination-count {
float: left;
border: 1px solid transparent;
}
.bbp-pagination-links {
float: right;
list-style: none;
display: inline;
a,
span.current {
display: block;
float: left;
padding: 0px 5px;
margin-left: 5px;
border: 1px solid #efefef;
text-decoration: none;
}
a:hover,
.bbp-pagination-links span.current {
background: #eee;
opacity: 0.8;
border: 1px solid #ddd;
}
span.dots {
display: block;
float: left;
padding: 1px 4px;
margin-left: 5px;
}
}
.bbp-pagination {
float: left;
width: 100%;
margin-bottom: 15px;
}
.bbp-topic-pagination {
display: inline-block;
margin-left: 5px;
margin-bottom: 2px;
a {
font-size: 10px;
line-height: 10px;
padding: 1px 3px;
border: 1px solid #ddd;
text-decoration: none;
}
}
/* =Forms
-------------------------------------------------------------- */
#bbpress-forums fieldset.bbp-form {
clear: left;
border: 1px solid #eee;
padding: 10px 20px;
margin-bottom: 10px;
legend {
padding: 5px;
}
label {
margin: 0;
display: inline-block;
}
p,
textarea,
select,
input {
margin: 0 0 8px;
}
textarea {
#bbp_reply_content,
#bbp_topic_content,
#bbp_forum_content {
width: 97%;
box-sizing: border-box;
}
#bbp_forum_content {
height: 210px;
}
}
}
#bbp-edit-topic-tag.bbp-form fieldset.bbp-form label,
#bbp-login fieldset label,
#bbp-register fieldset label,
#bbp-lost-pass fieldset label {
width: 100px;
}
#bbpress-forums fieldset.bbp-forum-form-attributes {
width: 200px;
float: right;
clear: none;
margin-left: 25px;
}
/**
* Fix for too-long forum names, usually from conversion
*/
#bbpress-forums fieldset select#bbp_forum_id {
max-width: 200px;
}
.bbp-topic-form,
.bbp-reply-form,
.bbp-topic-tag-form {
clear: left;
}
body {
&.page,
&.topic-edit,
&.reply-edit,
&.single-forum,
&.single-reply {
.bbp-topic-form,
.bbp-reply-form {
div.avatar img {
margin-right: 0;
padding: 10px;
border: 1px solid #ddd;
line-height: 0;
background-color: #efefef;
}
code {
font-size: 10px;
background-color: #f0fff8;
border: 1px solid #CEEFE1;
display: block;
padding: 8px;
margin-top: 5px;
width: 369px;
}
}
}
}
#merge_tag,
#delete_tag {
display: inline;
}
div.bbp-submit-wrapper {
margin-top: 15px;
float: right;
clear: both;
}
p.form-allowed-tags {
max-width: 100%;
}
/* =TinyMCE in themes
-------------------------------------------------------------- */
#bbpress-forums {
div.bbp-the-content-wrapper {
margin-bottom: 10px;
textarea.bbp-the-content {
width: 100%;
margin: 0;
font-size: 12px;
}
table,
tbody,
tr,
td {
border: none;
padding: 0;
margin: 0;
width: auto;
line-height: 1em;
}
input {
font-size: 12px;
padding: 5px;
margin: 0 2px 0 0;
line-height: 1em;
}
div.quicktags-toolbar {
padding: 5px;
min-height: 26px;
}
td {
&.mceToolbar {
padding: 4px 4px 8px;
}
&.mceStatusbar {
line-height: 16px;
}
}
}
div.wp-editor-container {
margin: 0;
padding: 0;
line-height: 0;
}
}
/* =Edit User
-------------------------------------------------------------- */
#bbpress-forums {
#bbp-your-profile {
fieldset {
padding: 20px 20px 0 20px;
div {
margin-bottom: 20px;
float: left;
width: 100%;
clear: left;
}
select {
margin-bottom: 0;
}
input,
textarea {
margin-bottom: 0;
width: 60%;
background: #f9f9f9;
border: 1px solid #ddd;
box-shadow: none;
padding: 5px 8px;
border-radius: 0;
&:focus {
border: 1px solid #ccc;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
outline-color: rgba(240, 255, 240, 0.1);
}
}
legend {
display: none;
}
label[for] {
float: left;
width: 20%;
padding: 5px 20px 5px 0;
text-align: right;
cursor: pointer;
}
dl label[for] {
text-align: left;
width: 60%;
}
&.bbp-form input.checkbox {
width: auto;
}
span.description {
margin: 5px 0 0 20%;
font-size: 12px;
font-style: italic;
float: left;
clear: left;
width: 60%;
padding: 5px 8px;
border: #cee1ef 1px solid;
background-color: #f0f8ff;
}
fieldset {
margin: 0;
border: none;
padding: 0;
clear: none;
float: none;
&.password {
width: 60%;
display: inline;
input,
span {
width: 100%;
}
span.description {
margin-left: 0;
margin-bottom: 20px;
}
}
&.capabilities dl {
margin: 0;
}
}
&.submit button {
float: right;
}
}
}
}
/* =Notices
-------------------------------------------------------------- */
div.bbp-template-notice,
div.indicator-hint {
border-width: 1px;
border-style: solid;
padding: 0 0.6em;
margin: 5px 0 15px;
border-radius: 3px;
background-color: #ffffe0;
border-color: #e6db55;
color: #000;
clear: both;
}
div.bbp-template-notice {
p {
margin: 0.5em 0 6px 0 !important;
padding: 2px;
font-size: 12px;
line-height: 140%;
}
a {
color: #555;
text-decoration: none;
&:hover {
color: #000;
}
}
&.info {
border: #cee1ef 1px solid;
background-color: #f0f8ff;
}
&.important {
border: #e6db55 1px solid;
background-color: #fffbcc;
}
&.error,
&.warning {
background-color: #ffebe8;
border-color: #c00;
a {
color: #c00;
}
}
}
/* =Stickies
-------------------------------------------------------------- */
.bbp-topics-front ul.super-sticky,
.bbp-topics ul.super-sticky,
.bbp-topics ul.sticky,
.bbp-forum-content ul.sticky {
background-color: #ffffe0 !important;
font-size: 1.1em;
}
/* =Revisions
-------------------------------------------------------------- */
#bbpress-forums {
.bbp-topic-content ul.bbp-topic-revision-log,
.bbp-reply-content ul.bbp-topic-revision-log,
.bbp-reply-content ul.bbp-reply-revision-log {
border-top: 1px dotted #ddd;
width: 100%;
margin: 0;
padding: 8px 0 0 0;
font-size: 11px;
color: #aaa;
li {
list-style-type: none;
}
}
}
/* =Widgets
-------------------------------------------------------------- */
.bbp-login-form {
fieldset legend {
display: none;
}
label {
width: 140px;
display: inline-block;
}
.bbp-username,
.bbp-email,
.bbp-password {
input {
padding: 5px;
}
}
.bbp-username,
.bbp-email,
.bbp-password,
.bbp-remember-me,
.bbp-submit-wrapper {
margin-top: 10px;
}
.bbp-remember-me {
}
.bbp-login-links {
a {
float: left;
clear: left;
}
}
.bbp-submit-wrapper {
text-align: right;
}
}
.bbp-logged-in {
img.avatar {
float: left;
margin: 0 15px 0 0;
}
h4 {
font-weight: bold;
font-size: 1.3em;
clear: none;
margin-bottom: 10px;
}
}
#sidebar .bbp-login-form label {
width: 70px;
}
/* =Avatars
-------------------------------------------------------------- */
#bbpress-forums {
p.bbp-topic-meta,
ul.bbp-reply-revision-log,
ul.bbp-topic-revision-log,
div.bbp-template-notice,
.widget_display_topics,
.widget_display_replies {
img.avatar {
float: none;
margin-bottom: -7px;
border: 3px double #ddd;
}
}
}
fieldset div.avatar {
float: right;
}
/* =BuddyPress Activity Streams
-------------------------------------------------------------- */
.activity-list li.bbp_topic_create,
.activity-list li.bbp_reply_create {
.activity-content .activity-inner {
border-left: 2px solid #eaeaea;
margin-left: 5px;
padding-left: 10px;
}
}
/* =User Pages
-------------------------------------------------------------- */
#bbpress-forums {
h1 {
clear: none;
font-size: 1.8em;
line-height: 1em;
padding-bottom: 10px;
}
#bbp-user-wrapper {
float: left;
width: 100%;
h2.entry-title {
font-size: 1.4em;
margin: 0;
padding-bottom: 10px;
padding-top: 0;
clear: none;
}
ul {
&.bbp-lead-topic,
&.bbp-topics,
&.bbp-forums,
&.bbp-replies {
clear: none;
}
}
fieldset.bbp-form {
clear: none;
}
}
.bbp-user-section {
overflow: auto;
}
#bbp-single-user-details {
margin: 0;
width: 150px;
float: left;
overflow: hidden;
#bbp-user-avatar {
margin: 0;
width: 150px;
img.avatar {
border: none;
height: 150px;
padding: 0;
margin: 0 0 20px 0;
width: 150px;
}
}
#bbp-user-description {
float: none;
margin-left: 180px;
}
#bbp-user-navigation {
float: none;
margin: 0;
li {
margin: 0;
&.current a {
background: #eee;
opacity: 0.8;
}
}
a {
padding: 5px 8px;
display: block;
border: 1px solid transparent;
text-decoration: none;
}
}
}
#bbp-user-body {
margin-left: 180px;
}
}
body.my-account #bbpress-forums {
border-top: none;
padding-top: 0;
margin-bottom: 0;
}
/* =User Capabilities
-------------------------------------------------------------- */
#bbpress-forums {
dl.bbp-user-capabilities {
display: inline-block;
vertical-align: top;
dt {
margin: 0 0 10px;
text-transform: capitalize;
}
dd {
margin: 0;
padding: 0;
}
}
}
/* =BuddyPress Group Forums
-------------------------------------------------------------- */
#bbpress-forums {
div.row-actions {
font-size: 11px;
visibility: hidden;
}
li:hover > div.row-actions {
visibility: visible;
}
}
/*--------------------------------------------------------------
Media Queries
--------------------------------------------------------------*/
/* =Standard Mobile Landscape
-------------------------------------------------------------- */
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-text-size-adjust: none;
}
@media only screen and (max-width: 480px) {
div.bbp-search-form {
input,
button {
font-size: 11px;
padding: 2px;
}
}
li.bbp-forum-info,
li.bbp-topic-title {
width: 45%;
}
li.bbp-forum-topic-count,
li.bbp-forum-reply-count,
li.bbp-topic-voice-count,
li.bbp-topic-reply-count {
width: 15%;
}
span.bbp-reply-post-date {
float: left;
}
span.bbp-admin-links {
clear: left;
float: left;
}
div.bbp-submit-wrapper {
float: left;
}
#bbpress-forums {
div.bbp-topic-tags {
clear: left;
float: left;
}
.bbp-forums-list li {
display: block;
font-size: 11px;
}
.bbp-body div.bbp-reply-author {
margin: -15px 10px 10px;
min-height: 100px;
padding-left: 80px;
position: relative;
text-align: left;
width: 100%;
}
div.bbp-reply-author a.bbp-author-name {
clear: none;
display: inline-block;
margin-left: 0;
word-wrap: break-word;
}
div.bbp-reply-author img.avatar {
position: absolute;
top: 15px;
left: 0;
width: 60px;
height: auto;
}
div.bbp-reply-author .bbp-author-role {
font-size: 12px;
font-style: normal;
}
.bbp-body div.bbp-reply-content {
clear: both;
margin: 10px;
padding: 0;
}
div.bbp-reply-content p {
margin-bottom: 1em;
}
fieldset.bbp-form {
padding: 0 10px 10px;
}
#bbp-user-body {
clear: both;
margin-left: 0;
word-wrap: break-word;
}
}
}
/* =Standard Mobile Portrait
-------------------------------------------------------------- */
@media only screen and (max-width: 320px) {
#bbpress-forums {
div.bbp-search-form {
margin-bottom: 10px;
}
li {
&.bbp-header,
&.bbp-body {
li {
&.bbp-forum-info,
&.bbp-topic-title {
width: 100%;
}
}
}
&.bbp-header {
li {
&.bbp-forum-info,
&.bbp-topic-title {
text-align: center;
text-transform: uppercase;
}
}
}
&.bbp-header,
&.bbp-body {
li {
&.bbp-forum-topic-count,
&.bbp-forum-reply-count,
&.bbp-topic-voice-count,
&.bbp-topic-reply-count {
width: 20%;
}
}
}
&.bbp-header,
&.bbp-body {
li {
&.bbp-forum-freshness,
&.bbp-topic-freshness {
width: 58%;
}
}
}
&.body {
li {
&.bbp-forum-topic-count,
&.bbp-forum-reply-count,
&.bbp-forum-freshness,
&.bbp-topic-voice-count,
&.bbp-topic-reply-count,
&.bbp-topic-freshness {
margin-top: 7px;
}
}
}
&.bbp-header,
&.bbp-footer {
font-size: 10px;
}
&.bbp-header div.bbp-reply-author {
text-align: left;
width: 25%;
}
&.bbp-header div.bbp-reply-content {
margin-left: 25%;
}
}
div.bbp-template-notice img.avatar,
p.bbp-topic-meta img.avatar {
width: 14px;
height: auto;
}
div.bbp-the-content-wrapper td.mceToolbar {
padding: 1px;
td {
width: 20px;
height: 20px;
}
}
div.wp-editor-container {
width: 100%;
overflow: auto;
}
input {
&#bbp_topic_title,
&#bbp_topic_tags {
width: 95%;
}
}
}
}
/* =Extra Small Mobile
-------------------------------------------------------------- */
@media only screen and (max-width: 240px) {
#bbpress-forums {
li {
&.bbp-header,
&.bbp-body {
li.bbp-forum-topic-count,
li.bbp-forum-reply-count,
li.bbp-topic-voice-count,
li.bbp-topic-reply-count,
div.bbp-reply-author,
div.bbp-reply-content {
width: 45%;
}
}
&.bbp-header,
&.bbp-body {
li.bbp-forum-freshness,
li.bbp-topic-freshness,
div.bbp-reply-author,
div.bbp-reply-content {
clear: both;
width: 100%;
}
}
&.bbp-header {
li.bbp-forum-freshness,
li.bbp-topic-freshness {
text-align: center;
}
}
&.bbp-body li.bbp-topic-freshness,
&.bbp-header div.bbp-reply-content {
margin-left: 0;
text-align: left;
}
&.bbp-body li.bbp-topic-freshness p.bbp-topic-meta {
display: inline-block;
}
&.bbp-header {
overflow: hidden;
}
&.bbp-footer div.bbp-reply-content {
display: inline-block;
margin-left: 0;
}
&.bbp-body div.bbp-reply-author {
min-height: 60px;
padding-left: 60px;
}
}
div.bbp-reply-author img.avatar {
width: 40px;
height: auto;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment