I'm just revisiting the forum today and decided to write some CSS styles for styling it to my preference.
Note: I have now included styles for the Documentation.Help, since it is a useful reference website for FreeBASIC functionality.
I'm sharing the styling code here in case it is useful to anyone else.
Screenshots:
Screenshot of Documentation.help:
Goals:
- Adjust general font styling
- Adjust link styling
- Adjust maximum line length for comfortable reading (not for code)
- Adjust code text styling
- Adjust quote text styling
- Make sticky posts easier to distinguish while browsing
- New: For Documentation.Help: Adjust font, link, and code styling
- New: You can choose whether to only style the FreeBasic forums (default setting) or also style any PHPBB forum you browse to, for example the PureBasic forums.
The Chrome extension I'm using is: Custom Stylesheet & Script
I have also tested and confirmed that the code below works in this Firefox add-on: Custom Style Script (Please note that the ViolentMonkey add-on can conflict with it)
There are probably other browser extensions that can also use this code.
(The code below was updated with new changes since original post. Last updated: Fri 20 May 2022 08:11:39 PM UTC)
The code for the CSS editor (Found in "Options" within the plugin) is here:
Code: Select all
/* For: "Custom Stylesheet & Script" Chrome Extension */
/* This goes in the CSS side, under script's "Options" */
/* The script auto-saves but you need to reload the forum page */
#phpbb.fbstyles .navbar .nav-tabs {
background-color: #3665d5;
}
#phpbb.fbstyles a.topictitle {
font-family: "Open Sans", sans-serif;
font-size: 16px;
color: #153685;
}
#phpbb.fbstyles a.forumtitle, a.topictitle {
color: #153685;
}
#phpbb.fbstyles .forabg ul.topiclist li.header,
#phpbb.fbstyles .forumbg ul.topiclist li.header {
background: #3e6bd6;
}
#phpbb.fbstyles .breadcrumbs .crumb a {
font-size: 16px;
font-weight: normal;
color: #163fa3
}
#phpbb.fbstyles .breadcrumbs .crumb a:hover {
text-decoration:underline;
}
#phpbb.fbstyles .postbody .content {
font-size: 17px;
line-height: 1.3;
overflow-x: auto;
background:white;
font-family: "Open Sans", sans-serif;
padding-bottom:20px;
}
#phpbb.fbstyles .post > .inner {
background:white;
}
#phpbb.fbstyles .postbody h3 {
font-size:22px;
}
#phpbb.fbstyles li.row.sticky,
#phpbb.fbstyles dl.row-item.sticky_unread {
background: #fff7be;
border-top-color: #fff7be;
border-bottom-color: #fff7be;
}
@media only screen and (min-width:1024px) {
#phpbb.fbstyles .postbody .content {
max-width: 640px;
}
}
#phpbb.fbstyles .postlink {
border-bottom-color: #3767db;
color: #2a5bd3;
text-decoration: underline;
}
#phpbb.fbstyles blockquote {
border: 1px solid transparent;
border-radius: 3px;
font-size: 15px;
margin: 15px 12px;
overflow: hidden;
padding: 10px;
position: relative;
background:#e8f1ff;
}
#phpbb.fbstyles blockquote cite {
font-style: normal;
font-weight:normal;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
border-bottom: 1px solid #97b3db;
margin-bottom: 11px;
}
#phpbb.fbstyles .codebox {
background-color: #fdfcf4;
border-color: #c7c7c7;
margin: 18px 10px;
}
#phpbb.fbstyles .codebox code {
color: #333964;
font-size: 16px;
max-height: 500px;
padding: 12px 12px;
}
/* Other Code Display Area Options */
#phpbb.fbstyles .codebox > p {
background: #4b76d8;
color: white;
font-family: monospace;
}
#phpbb.fbstyles .codebox > p > a {
color: #a7efff;
}
/* FreeBASIC Help Site */
#fb_pg_body,
.fb_sect_cont {
font-size:16px;
color: #222;
}
#fb_tab_l,
.fb_sect_title {
font-size:22px;
color:#444;
}
.fb_sect_cont a:link,
.fb_sect_cont a:visited {
color:darkBlue;
}
.freebasic {
font-family:monospace;
color:blue;
}
/* END OF CSS CODE */
Code: Select all
// Version: Fri 20 May 2022 08:11:39 PM UTC
// Style all PHPBB forums, or just the FreeBASIC forums?
let freebasic_only = true;
// Get the current browser url.
const url = window.location.href;
// For debugging only
// console.log(url);
// Select the body tag
const body = document.getElementsByTagName("BODY")[0];
// Check to see if the url contains our custom string.
// Also check to see if we are styling all PHPBB forums or just FB.
if ( (url.indexOf('freebasic') > -1) && (freebasic_only) ) {
body.className += ' fbstyles';
} else if ( !freebasic_only ) {
body.className += ' fbstyles';
} else {
// In the regular case, set a different class
// Currently this will disable all styles for forums.
body.className += ' nonfb';
}