Sharing My Forum Styles for Chrome & Firefox Browsers

General discussion for topics related to the FreeBASIC project or its community.
Post Reply
misterc
Posts: 15
Joined: Sep 04, 2018 18:41

Sharing My Forum Styles for Chrome & Firefox Browsers

Post by misterc »

Hi everyone,

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:

Image

Image

Screenshot of Documentation.help:


Image

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.
There are lots of changes that could be made for various tastes & options, but I'm just sharing here what I have had time for :D

Image The Chrome extension I'm using is: Custom Stylesheet & Script

Image 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 */
JS Code (This goes in the right side pane of the Chrome extension's options page). You can set the "freebasic_only" variable to false if you also want to change styles on every PHPBB forum, for example the PureBasic forums, etc.

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';
}
Last edited by misterc on May 20, 2022 20:16, edited 5 times in total.
coderJeff
Site Admin
Posts: 3927
Joined: Nov 04, 2005 14:23
Location: Ontario, Canada
Contact:

Re: Sharing My Forum Styles for Chrome

Post by coderJeff »

misterc wrote: May 19, 2022 20:12Make sticky posts easier to distinguish while browsing
I really like the style change on the sticky posts.
New: For Documentation.Help: Adjust font, link, and code styling
Maybe a typo in your original post? Sorry, it's a trigger word for me and jumped out at me ... the web site of the same name posts fbc documentation that is now 7 years old. I've tried contacting the website several times requesting they update their pages; no response ever.
misterc
Posts: 15
Joined: Sep 04, 2018 18:41

Re: Sharing My Forum Styles for Chrome

Post by misterc »

I'm glad you like the sticky post style change.
Sorry, it's a trigger word for me and jumped out at me ... the web site of the same name posts fbc documentation that is now 7 years old. I've tried contacting the website several times requesting they update their pages; no response ever.
Ugh, that's a pain. It would be helpful if they'd add a note to the site. "BTW this info is 7 years old and I can't be bothered" :roll:

What's another website with the same keyword-focused information, indexed as separate pages? I'll check it out.

The site in question here is highly placed in search results for FB so it easily gets attention while searching for various FB keywords...
coderJeff
Site Admin
Posts: 3927
Joined: Nov 04, 2005 14:23
Location: Ontario, Canada
Contact:

Re: Sharing My Forum Styles for Chrome

Post by coderJeff »

I didn't try the extension.

Does it replace the entire stylesheet? Or just augment some elements?

If we wanted to add some of your suggestions to the site, we'd need to make adjustments upstream where the forum stylesheet is generated (there is a template that produces the stylesheet).
misterc
Posts: 15
Joined: Sep 04, 2018 18:41

Re: Sharing My Forum Styles for Chrome

Post by misterc »

Yes, it is an add-on stylesheet, not a replacement.

You reminded me of my own trigger words I guess! I ran a FOSS graphics forum for 12 years and a forum for law enforcement some years after that...used to be a template monkey and still use PHP templates all over the place, but these are simple CSS & JS additions not meant to restyle everything. I figure they are useful for me even if I'm the only one using them, and admins don't have to suffer through the related troubles...

I certainly remember that making adjustments to the upstream template can be a pain, plus it adds to an ongoing technical debt burden in some cases.

Similar to customizing plugins. I remember this well :D So, please don't feel any change pressure from my end.
Imortis
Moderator
Posts: 1865
Joined: Jun 02, 2005 15:10
Location: USA
Contact:

Re: Sharing My Forum Styles for Chrome

Post by Imortis »

misterc wrote: May 20, 2022 19:21 What's another website with the same keyword-focused information, indexed as separate pages? I'll check it out.
https://www.freebasic.net/wiki/CatPgFullIndex
misterc
Posts: 15
Joined: Sep 04, 2018 18:41

Re: Sharing My Forum Styles for Chrome

Post by misterc »

Thank you for this link! I had to check why it hasn't ever come up for me.

Code: Select all

<title>CatPgFullIndex: FBWiki</title>
Aha :shock: :D

This is really unfortunate, the FreeBASIC keyword isn't even in the HTML title element.

And instead of the proper page title ("Alphabetical Keywords List") or proper keyword being in the title, the abbreviated camelcase page title is placed there ("CatPgFullIndex").

All of the pages are templated in this way. Not sure why. But it's no wonder it is not placed well in search engines. It might as well be in 日本語

Still, knowing to use the "fbwiki" search term instead of "freebasic" helps, so I appreciate the link for sure. :D
paul doe
Moderator
Posts: 1641
Joined: Jul 25, 2017 17:22
Location: Argentina

Re: Sharing My Forum Styles for Chrome

Post by paul doe »

misterc wrote: May 20, 2022 22:09 Thank you for this link! I had to check why it hasn't ever come up for me.
...
If you search for 'FreeBasic Manual', it's the first page returned on all the search engines I've tested with. The issue seems to stem from searching for something like 'FreeBasic Documentation', which brings about that link.
misterc
Posts: 15
Joined: Sep 04, 2018 18:41

Re: Sharing My Forum Styles for Chrome

Post by misterc »

paul doe wrote: May 20, 2022 22:52 If you search for 'FreeBasic Manual', it's the first page returned on all the search engines I've tested with. The issue seems to stem from searching for something like 'FreeBasic Documentation', which brings about that link.
This seems true as long as you are searching for the front page rather than a keyword page, and are using Google...

...of course neither of these happen to fit what & how I'm searching 8) :D

Edit: I will plan to update the code in the thread to accommodate this situation, if I have time.
coderJeff
Site Admin
Posts: 3927
Joined: Nov 04, 2005 14:23
Location: Ontario, Canada
Contact:

Re: Sharing My Forum Styles for Chrome

Post by coderJeff »

misterc wrote: May 20, 2022 22:09 All of the pages are templated in this way. Not sure why. But it's no wonder it is not placed well in search engines. It might as well be in 日本語
Simple answer is I didn't know better. Thank-you. I'll try some code that should help improve this.
Post Reply