Custom Css For BB Press
Table of Contents
What Is BB Press ?
BB Press is forum plugin which is used in worpress to enable forum system in website .
there is lots of features including creating topics , members , private chat , subscribe forum etc
But there is not too much customization for bb press until you used a paid theme which support bb press and also have own css for bb press .
In this article i am sharing professional custom css for the bb press which works with almost all the theme until you don’t have much colour full theme
Custom css for Bb press Installation
Installation is easy as creating a blog on blogger
- First Login to wordpress dashboard
- Go to Appearance
- Go to Customize
- Now go down and select custom css
- Now copy this custom css and paste it there and preview it.
Now if you have basic knowledge then you can edit html colour codes to adjust the look
Here is some example of colour codes
Copy First The Decrypt Code
SS for bbPress Forum */
/* Forum container */
bbpress-forums {
background-color: #f8f8f8;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Forum title */
.bbp-forum-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
/* Forum description */
.bbp-forum-content {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
color: #555;
}
/* Forum link/button */
.bbp-forum-link {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s;
}
.bbp-forum-link:hover {
background-color: #0056b3;
}
/* Topic container */
.bbp-topic-content {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Topic title */
.bbp-topic-title {
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
/* Topic content */
.bbp-topic-content-text {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
color: #555;
}
/* Topic link/button */
.bbp-topic-link {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s;
}
.bbp-topic-link:hover {
background-color: #0056b3;
}
/* Pagination */
.bbp-pagination {
margin-top: 20px;
}
/* Additional custom styles for specific elements / .custom-element-class { / Your custom CSS properties here */
}
/* Custom style for a specific ID */
custom-element-id {
/* Your custom CSS properties here */
}Advance Css For BB Press
Added more aspects of bb press elements
- author information
- last post information
- reply elements
Copy First The Decrypt Code
Conclusion
In this post i show how to customize bb press with custom css . bb press is most famous platform for forum . If you like our work then don't forget to donate us some money to keep website active .