Skip to content

Instantly share code, notes, and snippets.

@cdils
Last active January 21, 2019 21:21
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cdils/ac1f5cf0b64977046d66314b1758109f to your computer and use it in GitHub Desktop.
Save cdils/ac1f5cf0b64977046d66314b1758109f to your computer and use it in GitHub Desktop.
This is quick, sassified version of the default bbPress stylesheet. I did not sassify the media queries at this point (I intend to re-work those as mobile-first for my project). Also note that I kept the original stylesheet organization. There's repition of some selectors that could be avoidded if the current organization was disregarded. :) As …
/**
* 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-search-author,
&.bbp-footer .bbp-search-author,
&.bbp-header .bbp-forum-author,
&.bbp-footer .bbp-forum-author,
&.bbp-header .bbp-topic-author,
&.bbp-footer .bbp-topic-author,
&.bbp-header .bbp-reply-author,
&.bbp-footer .bbp-reply-author {
float: left;
margin: 0;
padding: 0;
width: 120px;
}
&.bbp-header .bbp-search-content,
&.bbp-footer .bbp-search-content,
&.bbp-header .bbp-forum-content,
&.bbp-footer .bbp-forum-content,
&.bbp-header .bbp-topic-content,
&.bbp-footer .bbp-topic-content,
&.bbp-header .bbp-reply-content,
&.bbp-footer .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 h3,
div.bbp-topic-title h3,
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,
.bbp-author-role,
.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,
body.topic-edit,
body.reply-edit ,
body.single-forum,
body.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) {
#bbpress-forums div.bbp-topic-tags {
clear: left;
float: left;
}
div.bbp-search-form input,
div.bbp-search-form 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;
}
#bbpress-forums .bbp-forums-list li {
display: block;
font-size: 11px;
}
#bbpress-forums .bbp-body div.bbp-reply-author {
margin: -15px 10px 10px;
min-height: 100px;
padding-left: 80px;
position: relative;
text-align: left;
width: 100%;
}
#bbpress-forums div.bbp-reply-author a.bbp-author-name {
clear: none;
display: inline-block;
margin-left: 0;
word-wrap: break-word;
}
#bbpress-forums div.bbp-reply-author img.avatar {
position: absolute;
top: 15px;
left: 0;
width: 60px;
height: auto;
}
#bbpress-forums div.bbp-reply-author .bbp-author-role {
font-size: 12px;
font-style: normal;
}
#bbpress-forums .bbp-body div.bbp-reply-content {
clear: both;
margin: 10px;
padding: 0;
}
#bbpress-forums div.bbp-reply-content p {
margin-bottom: 1em;
}
div.bbp-submit-wrapper {
float: left;
}
#bbpress-forums fieldset.bbp-form {
padding: 0 10px 10px;
}
#bbpress-forums #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;
}
#bbpress-forums li.bbp-header li.bbp-forum-info,
#bbpress-forums li.bbp-body li.bbp-forum-info,
#bbpress-forums li.bbp-header li.bbp-topic-title,
#bbpress-forums li.bbp-body li.bbp-topic-title {
width: 100%;
}
#bbpress-forums li.bbp-header li.bbp-forum-info,
#bbpress-forums li.bbp-header li.bbp-topic-title {
text-align: center;
text-transform: uppercase;
}
#bbpress-forums li.bbp-header li.bbp-forum-topic-count,
#bbpress-forums li.bbp-header li.bbp-forum-reply-count,
#bbpress-forums li.bbp-body li.bbp-forum-topic-count,
#bbpress-forums li.bbp-body li.bbp-forum-reply-count,
#bbpress-forums li.bbp-header li.bbp-topic-voice-count,
#bbpress-forums li.bbp-header li.bbp-topic-reply-count,
#bbpress-forums li.bbp-body li.bbp-topic-voice-count,
#bbpress-forums li.bbp-body li.bbp-topic-reply-count {
width: 20%;
}
#bbpress-forums li.bbp-header li.bbp-forum-freshness,
#bbpress-forums li.bbp-body li.bbp-forum-freshness,
#bbpress-forums li.bbp-header li.bbp-topic-freshness,
#bbpress-forums li.bbp-body li.bbp-topic-freshness {
width: 58%;
}
#bbpress-forums li.bbp-body li.bbp-forum-topic-count,
#bbpress-forums li.bbp-body li.bbp-forum-reply-count,
#bbpress-forums li.bbp-body li.bbp-forum-freshness,
#bbpress-forums li.bbp-body li.bbp-topic-voice-count,
#bbpress-forums li.bbp-body li.bbp-topic-reply-count,
#bbpress-forums li.bbp-body li.bbp-topic-freshness {
margin-top: 7px;
}
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
font-size: 10px;
}
#bbpress-forums li.bbp-header div.bbp-reply-author {
text-align: left;
width: 25%;
}
#bbpress-forums li.bbp-header div.bbp-reply-content {
margin-left: 25%;
}
#bbpress-forums div.bbp-template-notice img.avatar,
#bbpress-forums p.bbp-topic-meta img.avatar {
width: 14px;
height: auto;
}
#bbpress-forums div.bbp-the-content-wrapper td.mceToolbar {
padding: 1px;
}
#bbpress-forums div.bbp-the-content-wrapper td.mceToolbar td {
width: 20px;
height: 20px;
}
#bbpress-forums div.wp-editor-container {
width: 100%;
overflow: auto;
}
#bbpress-forums input#bbp_topic_title,
#bbpress-forums input#bbp_topic_tags {
width: 95%;
}
}
/* =Extra Small Mobile
-------------------------------------------------------------- */
@media only screen and (max-width: 240px) {
#bbpress-forums li.bbp-header li.bbp-forum-topic-count,
#bbpress-forums li.bbp-header li.bbp-forum-reply-count,
#bbpress-forums li.bbp-body li.bbp-forum-topic-count,
#bbpress-forums li.bbp-body li.bbp-forum-reply-count,
#bbpress-forums li.bbp-header li.bbp-topic-voice-count,
#bbpress-forums li.bbp-header li.bbp-topic-reply-count,
#bbpress-forums li.bbp-body li.bbp-topic-voice-count,
#bbpress-forums li.bbp-body li.bbp-topic-reply-count,
#bbpress-forums li.bbp-footer div.bbp-reply-author,
#bbpress-forums li.bbp-footer div.bbp-reply-content {
width: 45%;
}
#bbpress-forums li.bbp-header li.bbp-forum-freshness,
#bbpress-forums li.bbp-body li.bbp-forum-freshness,
#bbpress-forums li.bbp-header li.bbp-topic-freshness,
#bbpress-forums li.bbp-body li.bbp-topic-freshness,
#bbpress-forums li.bbp-header div.bbp-reply-author,
#bbpress-forums li.bbp-header div.bbp-reply-content {
clear: both;
width: 100%;
}
#bbpress-forums li.bbp-header li.bbp-forum-freshness,
#bbpress-forums li.bbp-header li.bbp-topic-freshness {
text-align: center;
}
#bbpress-forums li.bbp-body li.bbp-topic-freshness,
#bbpress-forums li.bbp-header div.bbp-reply-content {
margin-left: 0;
text-align: left;
}
#bbpress-forums li.bbp-body li.bbp-topic-freshness p.bbp-topic-meta {
display: inline-block;
}
#bbpress-forums li.bbp-header {
overflow: hidden;
}
#bbpress-forums li.bbp-footer div.bbp-reply-content {
display: inline-block;
margin-left: 0;
}
#bbpress-forums li.bbp-body div.bbp-reply-author {
min-height: 60px;
padding-left: 60px;
}
#bbpress-forums div.bbp-reply-author img.avatar {
width: 40px;
height: auto;
}
}
@89gsc
Copy link

89gsc commented Mar 19, 2018

Thanks!

@seothemes
Copy link

See https://gist.github.com/seothemes/73a954b2af07e58a07aed1279c643a92 for an updated version with media queries also sassified.

@tfriel
Copy link

tfriel commented Jan 21, 2019

i have been trying for several days t o find a solution to my problem.
i am trying to use bbpress to create a forum on my site.
when i create a forum page the headings and the content columns are not formatting properly ... they wrap
http://www.screencast.com/t/qO5tRut4o

i am using the rise theme and thrive architect to build my site. i don't know much about css.
i don't know how to modify the headings, and can't find anyone who had and solved the same problem.

i stumbled on your post and hoped that you might be able to help me, or point me to someone who can.

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment