Change forum color
-
Hi,
I need help to change my forum color.
http://brabet.se/spelforum/forumet-3/
If u look at my forumpage its very hard to see the text.
Sorry for my bad english.
/Richard
-
How familiar are you with CSS? This is something you will need to tweak in your theme’s CSS – essentially override the styles that bbPress is using.
Not familiar at all im afraid, but i managed to change the forum text with this help:
.forum a { color: black !important; }
.bbp-forum-info { color: black !important; }
.bbp-forum-topic-count { color: black !important; }
.bbp-forum-reply-count { color: black !important; }
.bbp-forum-freshness { color: black !important; }
Is it possible to change the background?
Unfortunatly I can’t give you a 100% complete answer, but what you are trying to do is definitely the right direction.
Here is something to get you started:
.forum a { color: white !important; }
.bbp-forum-info { color: black !important; }
.bbp-forum-topic-count { color: black !important; }
.bbp-forum-reply-count { color: black !important; }
.bbp-forum-freshness { color: black !important; }
.bbp-forums,
.bbp-topics {
border: 1px solid rgba(125, 125, 125, .5);
color: white !important;}
.bbp-forums a { color: white !important; }
table.bbp-forums th, table.bbp-topics th, table.bbp-topic th, table.bbp-replies th {
background-color:black;
color: white !important;
}
table.bbp-forums thead tr {
border-top: 1px solid rgba(125, 125, 125, .5);
}
#content table tbody tr.odd td {
background-color:#222;
color: white !important;
}
#content table tbody tr.even td {
color: white !important;
background: #111;
}
#content table.bbp-forums tfoot td, #content table.bbp-topics tfoot td, #content table.bbp-topic tfoot td, #content table.bbp-replies tfoot td, #content table.bbp-replies tr.bbp-reply-header td, #content table.bbp-topic tr.bbp-topic-header td {
background: black;
color: #fff !important;
}
Thank you very much!
HI Jared,
This seems to be the issue I am facing as well for my friend’s website http://www.revivechallenge.com
Entire website is in black and she wants to stick to albiaza theme, however when we go to forum, the links are red (which we can dead with)
But background and text are white and one cannot read the text unless you hightlight the area.
I am not a ‘programmer’ so to speak, are you able to guide me as to –
1) which file will the above code go in?
2) Do I copy paste or do I edit these values in existing coding in that file?
I am familiar with GoDaddy FTP service and know how to get to files and directories and edit text if need to but unsure about where should above text go.
I know … I am very novice so ANY guidance you can give will be very amazing and much appreciated.
Thanks
Szebastian
And I used this advice of yours …. nothing happened
https://wordpress.org/extend/plugins/bbpress-custom-css-file/
My friend’s website is
http://www.theReviveChallenge.com
I have created a username and password for you to see the forum
username jared
password test123
That URL doesn’t load for me it seems.
I should have actually updated that I worked it out. If you can leave this topic open, I will post the exact change I made which I hope will help others too. It is 0539 Hours here and I must rest up – been up since 48 hours. I will be sure to post a detailed update within 24 hours.
And my bad – it is http://www.revivechallenge.com !!!! (Shows I have been up too long)
SzebastianOne,
Are you able to post the code for the changes you made? That would be very helpful as I have the same issue that you were working on (a theme with dark background that causes problems with the forum).
I’d really appreciate it.
Hi Sharq219,
Before I post, I must say, I am no code-maestro rather a novice at it all. However this is what I did –
In FTP Panel,
• Followed this page – %Root Folder of the website in question%wp-contentpluginsbbpressbbp-themesbbp-twentytencss
• Edited the file bbpress.css (attached the edited version)
• You’ll notice in top few lines and bottom few lines I changed the background colour hexademical code from #efefef to #0B0808
• Be careful though, do not change it at all places. I practically changed one place at a time and saved and refreshed to check until I got the results. Best to compare the file I am sending you with your file and see if you can relate & make changes in right places.
• I suggest to start from the bottom up in the file, you are likely to see it resolve in the end.
Here is the code of the file I edited – – –
/**
* bbPress specific CSS
*
* @package bbPress
* @subpackage Theme
*/
/* =bbPress Style
*/
#content hr,
#container hr {
margin: 0 0 24px 0;
}
#entry-author-info {
margin: 10px 0 0 0;
border-bottom: 1px solid #fff;
}
#content table.bbp-topics,
#content table.bbp-forums,
#content table.bbp-replies,
#container table.bbp-topics,
#container table.bbp-forums,
#container table.bbp-replies,
#main table.bbp-topics,
#main table.bbp-forums,
#main table.bbp-replies {
clear: left;
table-layout: fixed;
width: 100%;
}
/* =Breadcrumb and Tags
*/
div.bbp-breadcrumb {
float: left;
}
div.bbp-breadcrumb,
div.bbp-topic-tags {
font-size: 12px;
}
#content div.bbp-breadcrumb p,
#content div.bbp-topic-tags p {
margin-bottom: 10px
}
div.bbp-topic-tags {
float: right;
}
/* =Tables
*/
#content table tbody tr.even td {
background-color: #0B0808;
}
#content table tbody tr.odd td {
background-color: #0B0808;
}
#content table tbody tr.status-trash.even td,
#content table tbody tr.status-spam.even td {
background-color: #0B0808;
}
#content table tbody tr.status-trash.odd td,
#content table tbody tr.status-spam.odd td {
background-color: #0B0808;
}
#content table.bbp-topics tbody tr.status-closed td,
#content table.bbp-topics tbody tr.status-closed td a {
color: #ccc;
}
table.bbp-topic tbody tr td,
table.bbp-replies tbody tr td {
background-color: #0B0808;
}
table.bbp-forums th, table.bbp-topics th,
table.bbp-topic th, table.bbp-replies th {
background-color: #0B0808;
}
table.bbp-forums th span, table.bbp-topics th span,
table.bbp-topic th span, table.bbp-replies th span {
float: right;
}
#content th.bbp-topic-author,
#content th.bbp-reply-author {
text-align: center;
width: 120px;
}
#content th.bbp-topic-content,
#content th.bbp-reply-content {
text-align: left;
padding: 9px 10px 9px 15px;
}
#content table.bbp-forums tfoot td, #content table.bbp-topics tfoot td,
#content table.bbp-topic tfoot td, #content table.bbp-replies tfoot td,
#content table.bbp-replies tr.bbp-reply-header td,
#content table.bbp-topic tr.bbp-topic-header td {
background-color: #0B0808;
color: #888;
font-size: 12px;
font-weight: bold;
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
padding: 4px 10px;
}
span.bbp-author-ip {
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
font-size: 11px;
font-weight: bold;
color: #aaa;
}
#content .bbp-forum-info {
width: 55%;
text-align: left;
}
#content .bbp-forum-topic-count,
#content .bbp-forum-reply-count,
#content .bbp-topic-reply-count,
#content .bbp-topic-voice-count,
#content .bbp-topic-action {
width: 10%;
text-align: center;
padding: 6px 0px;
}
#content td.bbp-topic-author,
#content td.bbp-reply-author {
padding: 20px;
text-align: center;
vertical-align: top;
}
.bbp-topic-title {
width: 55%;
text-align: left;
}
.bbp-topic-freshness,
.bbp-forum-freshness {
text-align: center;
width: 25%;
}
#content tbody .bbp-topic-content,
#content tbody .bbp-reply-content {
vertical-align: top;
padding: 15px 10px 10px 15px;
overflow: auto;
}
#content .bbp-topic-content img,
#content .bbp-reply-content img {
max-width: 100%;
}
/* =Admin Links
*/
span.bbp-admin-links {
float: right;
color: #ddd;
}
span.bbp-admin-links 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%;
}
a.bbp-topic-permalink,
a.bbp-reply-permalink {
float: right;
margin-left: 10px;
color: #ccc;
}
/* =Toggles
*/
.bbp-topic-action #favorite-toggle a {
text-decoration: none;
padding: 0px 3px 1px;
color: #7c7;
border: 1px solid #aca;
background-color: #dfd;
font-weight: bold;
font-size: 13px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.bbp-topic-action #favorite-toggle a:hover {
color: #5a5;
border-color: #7c7;
background-color: #0B0808;
}
.bbp-topic-action #favorite-toggle span.is-favorite a {
color: #faa;
border: 1px solid #faa;
background-color: #0B0808;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.bbp-topic-action #favorite-toggle span.is-favorite a:hover {
color: #c88;
border-color: #c88;
background-color: #0B0808;
}
.bbp-topic-action #subscription-toggle a {
text-decoration: none;
padding: 0px 3px 1px;
color: #7c7;
border: 1px solid #aca;
background-color: #0B0808;
font-weight: bold;
font-size: 13px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.bbp-topic-action #subscription-toggle a:hover {
color: #5a5;
border-color: #7c7;
background-color: #0B0808;
}
.bbp-topic-action #subscription-toggle span.is-subscribed a {
color: #faa;
border: 1px solid #faa;
background-color: #0B0808;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.bbp-topic-action #subscription-toggle span.is-subscribed a:hover {
color: #c88;
border-color: #c88;
background-color: #fdd;
}
#content p.bbp-topic-meta {
margin-bottom: 0;
font-size: 11px;
}
#content p.bbp-topic-meta span {
white-space: nowrap;
}
/* =Forums
*/
#content table tbody tr .bbp-forum-description p {
margin-bottom: 0;
font-size: 13px;
font-style: italic;
}
#content table tbody tr ul.bbp-forums {
list-style: none;
font-size: 12px;
margin: 0 0 0 10px;
padding: 0 0 0 10px;
border-left: 1px solid #aaa;
}
#content table tbody tr ul.bbp-forums li {
display: inline;
}
/* =Pagination
*/
.bbp-pagination-count {
float: left;
}
.bbp-pagination-links {
float: right;
}
.bbp-pagination {
float: left;
width: 100%;
margin-bottom: 20px;
}
.bbp-topic-pagination {
display: inline-block;
margin-left: 5px;
margin-bottom: 2px;
}
.bbp-topic-pagination a {
font-size: 10px;
line-height: 10px;
padding: 1px 3px;
border: 1px solid #ddd;
text-decoration: none;
}
/* =Forms
*/
#content fieldset.bbp-form,
#container fieldset.bbp-form,
#wrapper fieldset.bbp-form {
clear: left;
}
#content fieldset.bbp-form,
#container fieldset.bbp-form,
#wrapper fieldset.bbp-form {
border: 1px solid #eee;
padding: 10px 20px;
}
#content fieldset.bbp-form legend,
#container fieldset.bbp-form legend,
#wrapper fieldset.bbp-form legend {
padding: 5px;
}
#content fieldset.bbp-form label,
#container fieldset.bbp-form label,
#wrapper fieldset.bbp-form label {
width: 250px;
display: inline-block;
}
#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;
}
#content fieldset.bbp-form p,
#container fieldset.bbp-form p,
#wrapper fieldset.bbp-form p,
#content fieldset.bbp-form textarea,
#container fieldset.bbp-form textarea,
#wrapper fieldset.bbp-form textarea,
#content fieldset.bbp-form select,
#container fieldset.bbp-form select,
#wrapper fieldset.bbp-form select,
#content fieldset.bbp-form input,
#container fieldset.bbp-form input,
#wrapper fieldset.bbp-form input {
margin: 0px 0px 10px;
}
textarea#bbp_reply_content,
textarea#bbp_topic_content {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.bbp-topic-form,
.bbp-reply-form,
.bbp-topic-tag-form {
clear: left;
}
body.topic-edit .bbp-topic-form div.avatar img,
body.reply-edit .bbp-reply-form div.avatar img,
body.single-forum .bbp-topic-form div.avatar img,
body.single-reply .bbp-reply-form div.avatar img {
margin-right: 0;
padding: 10px;
border: 1px solid #ddd;
line-height: 0;
background-color: #efefef;
}
body.page .bbp-reply-form code,
body.page .bbp-topic-form code,
body.single-topic .bbp-reply-form code,
body.single-forum .bbp-topic-form code,
body.topic-edit .bbp-topic-form code,
body.reply-edit .bbp-reply-form 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 {
float: right;
}
p.form-allowed-tags {
width: 462px;
}
input[type="password"] {
background: #f9f9f9;
border: 1px solid #ccc;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
padding: 2px;
}
/* =Edit User
*/
#bbp-your-profile fieldset {
margin-top: 20px;
padding: 20px 20px 0 20px;
}
#bbp-your-profile fieldset div {
margin-bottom: 20px;
float: left;
width: 100%;
clear: left;
}
#bbp-your-profile fieldset select {
margin-bottom: 0;
}
#bbp-your-profile fieldset input,
#bbp-your-profile fieldset textarea {
margin-bottom: 0;
width: 400px;
background: #f9f9f9;
border: 1px solid #ccc;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
padding: 2px;
}
#bbp-your-profile fieldset legend {
display: none;
}
#content #bbp-your-profile fieldset label,
#container #bbp-your-profile fieldset label {
float: left;
width: 150px;
padding-right: 20px;
text-align: right;
}
#bbp-your-profile fieldset span.description {
margin: 5px 0 0 170px;
font-size: 12px;
font-style: italic;
float: left;
clear: left;
width: 383px;
padding: 5px 10px;
border: #cee1ef 1px solid;
background-color: #f0f8ff;
}
#content #bbp-your-profile fieldset fieldset,
#container #bbp-your-profile fieldset fieldset {
margin: 0;
width: 260px;
border: none;
padding: 0;
clear: none;
float: none;
}
#bbp-your-profile fieldset fieldset span.description {
margin-left: 0;
margin-bottom: 20px;
}
#bbp-your-profile fieldset.submit button {
float: right;
}
/* =Notices
*/
div.bbp-template-notice {
border-width: 1px;
border-style: solid;
padding: 0 0.6em;
margin: 5px 0 15px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #ffffe0;
border-color: #e6db55;
color: #000;
clear: both;
}
div.bbp-template-notice a {
color: #555;
text-decoration: none;
}
div.bbp-template-notice a:hover {
color: #000;
}
div.bbp-template-notice.info {
border: #cee1ef 1px solid;
background-color: #f0f8ff;
}
div.bbp-template-notice.important {
border: #e6db55 1px solid;
background-color: #fffbcc;
}
div.bbp-template-notice.error,
div.bbp-template-notice.warning {
background-color: #0B0808;
border-color: #c00;
}
div.bbp-template-notice.error a,
div.bbp-template-notice.warning a {
color: #c00;
}
div.bbp-template-notice p {
margin: 0.5em 0 6px 0 !important;
padding: 2px;
font-size: 12px;
font-color: #0B0808
line-height: 140%;
}
/* =Stickies
*/
.bbp-topics-front tr.super-sticky td,
.bbp-topics tr.super-sticky td,
.bbp-topics tr.sticky td,
.bbp-forum-content tr.sticky td {
background-color: #0B0808 !important;
font-size: 1.1em;
}
/* =Revisions
*/
#content .bbp-topic-revision-log,
#content .bbp-reply-revision-log,
#main .bbp-topic-revision-log,
#main .bbp-reply-revision-log,
#container .bbp-topic-revision-log,
#container .bbp-reply-revision-log {
border-top: 1px dotted #ddd;
list-style: none;
width: 100%;
margin: 0;
padding: 8px 0 0 0;
font-size: 11px;
color: #aaa;
}
/* =Widgets
*/
.bbp-login-form fieldset legend {
display: none;
}
.bbp-login-form .bbp-username input,
.bbp-login-form .bbp-email input,
.bbp-login-form .bbp-password input {
padding: 5px;
}
.bbp-login-form .bbp-username label,
.bbp-login-form .bbp-password label {
width: 70px;
display: inline-block;
}
.bbp-login-form .bbp-username,
.bbp-login-form .bbp-password,
.bbp-login-form .bbp-remember-me,
.bbp-login-form .bbp-submit-wrapper {
margin-top: 10px;
}
.bbp-login-form .bbp-remember-me {
}
.bbp-login-form .bbp-submit-wrapper {
text-align: right;
}
.bbp-login-form .bbp-login-links {
}
.bbp-login-form .bbp-login-links a {
float: left;
clear: left;
}
.bbp-logged-in img.avatar {
float: left;
margin-right: 15px;
}
.bbp-logged-in h4 {
font-weight: bold;
font-size: 1.3em;
clear: none;
margin-bottom: 10px;
}
/* =Avatars
*/
#content p.bbp-topic-meta img.avatar,
#content ul.bbp-reply-revision-log img.avatar,
#content ul.bbp-topic-revision-log img.avatar,
#content div.bbp-template-notice img.avatar,
#content .widget_display_topics img.avatar,
#content .widget_display_replies img.avatar,
#content p.bbp-topic-meta img.avatar,
#main ul.bbp-reply-revision-log img.avatar,
#main ul.bbp-topic-revision-log img.avatar,
#main div.bbp-template-notice img.avatar,
#main .widget_display_topics img.avatar,
#main .widget_display_replies img.avatar,
#main p.bbp-topic-meta img.avatar,
#container ul.bbp-reply-revision-log img.avatar,
#container ul.bbp-topic-revision-log img.avatar,
#container div.bbp-template-notice img.avatar,
#container .widget_display_topics img.avatar,
#container .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-content .activity-inner,
.activity-list li.bbp_reply_create .activity-content .activity-inner {
border-left: 2px solid #EAEAEA;
margin-left: 5px;
padding-left: 10px;
}hope this helps.
Be Well, Do Well and Spread Smiles
SzebastianOne
Thanks so much! That worked perfectly. And knowing where those are in the code, it is easy to tweak them in the future with different colors and shading. Much appreciated.
Hey there, may you can help me, so i got a website where i got a bbpress forum installed, but when i want to write to a topic my letters is grey, and its really hard to see in the dark red background, i want to change this text color, where i can change it?
http://killingfloor.info/topics/ask-about-the-game/
to see my problem please logon with this,
user: test123 pwd: test123
Thank you.I want to change the horrible green colour in the forum, but looking in bbpress.css, I’m getting nothing like the following which I saw on here. I’ve searched aplenty on this forum but just can’t find it. How do I change the colours, please?
.forum a { color: white !important; }
.bbp-forum-info { color: black !important; }
.bbp-forum-topic-count { color: black !important; }
.bbp-forum-reply-count { color: black !important; }
.bbp-forum-freshness { color: black !important; }
Anyone, please?
post a link to your site
Sorry for the delay. Got a bit sidetracked. Here it is:
http://rush-hour-crush.co.uk/Thanks for any help.
ok this CSS changes every link color in bbPress to black
#bbpress-forums a { color: black; }and this CSS is for if you want any links in the topic/reply content to be a different color like blue, just like blog posts usually have.
#bbpress-forums div.bbp-topic-content a, #bbpress-forums div.bbp-reply-content a { background: none repeat scroll 0 0 transparent; border: medium none; display: inline; font-weight: normal; margin: 0; padding: 0; color: blue; }also use some of the CSS that i posted here since you have a dark background.
Hi, I can’t figure out how to create a new topic so i’m choosing this topic to post in because its topic title is the closest to what I’m needing help with.
I’ve changed the background color in my bbpress forum but for some reason the background color is not affecting the padding (or so it seems). I’ve searched online and found I may need to add overflow:hidden and even overflow:auto. I’ve tried to add this to many many variations and combinations of IDs and CLASSes (there are so many!) but I can’t figure it out.
I’m using a child theme from the 2014 WordPress theme but didn’t change too much.
My forum is at: http://www.pippenings.com/rv-living/rv-motorhome-life-forum/
Here is the CSS styling I’ve added to the forum so far (minus the child theme’s styling which was mostly used for changing colors…)
Can you please help me out?
#forums-list-0 .bbp-forum-title { font-size:1.6em; text-decoration:none; } #forums-list-0 .bbp-forum-title a:link { text-decoration:none; } #entry-content #bbpress-forums { background-color:#232d36; overflow:auto; } #bbpress-forums ul, #bbpress-forums li { background-color:#232d36; overflow:auto; } #bbpress-forums ul.bbp-replies, bbp-body, #bbpress-forums p { background-color:#232d36; } #bbpress-forums ul.forums-list-0 li.bbp-body { background-color:#232d36 !important; overflow:auto; }Sorry for the mis-posting. I figured out I need to go into one of the categories to post a new topic. So, I’ve done so. I would delete this post here but now I can’t figure that out either. 😐
- You must be logged in to reply to this topic.
