Bludit Tipps #1
Since I decided to run my blog using the Bludit flat-file system instead of WordPress, I’ve gained some experience over the past few weeks, and I’d like to share some of it in this article. To get Bludit working the way I want it to, a few adjustments were—and still are—necessary.
At least in my case, this isn’t unique to Bludit—it applies to other CMS systems as well. In fact, I’ve wanted or needed to make customizations to every system I’ve used so far (WordPress, Piwigo, Zenphoto). Bludit is no exception.
Please enter the code snippets without line breaks—and always remember to make backups :-)
Become a Patreon supporter
This isn't really a tip, but if you've decided to use Bludit, you should consider becoming a Patreon member right away. For just 1–2 euros a month, you can get the Pro version, which—unlike the standard version—includes the Timemachine X plugin. This makes it pretty easy to roll back the system to a previous point in time if you happen to have made any incorrect settings.
Editorial Theme
The Editorial Theme is one of my favorites among the Bludit themes. It’s easy to add menu items for the legal notice and other sections to the left-hand navigation. However, the menu is hidden by default in the mobile view.
To ensure that the links to the legal notice and privacy policy are displayed in the mobile view without the user having to click on a menu item, I solved this as follows.
The "HTML Code" plugin was installed and activated. The following code was entered in the "Footer" section/field:
<style>
.showonmobile { display: none; }
@media only screen
and (max-device-width: 736px)
{ .showonmobile{ display: inline;}}
</style>
<div class="showonmobile" >
<center><p style="background-color:#f5f6f7; margin-bottom:45px;">
<a href="/link_to_legal_notice" style="color: #7f888f; text-decoration: none; border-bottom: none;" >
Legal Notice </a> | <a href="link_to_privacy_policy" style="color: #7f888f;
text-decoration: none; border-bottom: none;" > Privacy Policy</a></p></center></div>
Of course, you’ll need to adjust the links to match your site.
The code ensures that, at resolutions up to 736 pixels, the links to the legal notice and privacy policy are displayed in the footer. At higher resolutions, the links do not appear.
The value of 736px is specified because, up to this resolution, the Editorial theme hides the standard menu and displays a “hamburger” menu (the three horizontal lines).
Snicker Comments
With the Snicker Comments plugin, you can add a comment feature to Bludit—and it’s even privacy-friendly, provided you enable the option in the GDPR tab.
What’s missing, however, is a notification for new comments.
You can add this feature by editing the following file (don’t forget to make a backup first).
In the plugin’s “System” directory, you’ll find the file “class.comments.php.” Please pay attention to the “Comments” in the filename, as there is also a “class.comment.php.”
Now open class.comments.php in a text editor. On line 432, you’ll find the line “return $uid.”
Insert a new line before this line with the following code:
mail("empfaenger_mail@eure-domain.de", "A new comment on the blog",
"The new comment still needs to be reviewed and, if necessary, approved.",
"From: absender_mail@eure-domain.de");
You'll need to update the email addresses; you can leave the text as is or customize it as you like.
Now, whenever a new comment is posted, you'll receive an email.
I don't know why this feature isn't enabled by default in the plugin's settings.
Google Fonts
You can look at this issue however you like. Currently, loading fonts from Google’s servers is viewed critically from a data protection perspective. To my knowledge, there have already been warnings issued regarding this. The fonts are usually loaded by the theme or plugins.
Unfortunately, some Bludit themes also use Google Fonts, such as Editorial and Blekathlon.
While there are special plugins for WordPress that automatically “host” the fonts locally, Bludit requires manual configuration.
You can use several tools to check whether your theme loads fonts, such as the Google Fonts Checker:
https://sicher3.de/google-fonts-checker/
To be on the safe side, you should check not only the homepage but also blog pages and the contact page.
If the Font Checker alerts you that Google Fonts are being loaded, take a look at your theme’s PHP files.
In the Editorial theme, you’ll find the following entry on line 15 of “head.php”:
<link href="https://fonts.googleapis.com/css2?family=
Open+Sans:ital,wght@0.400;0.600;1.400;1.600
&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">
Delete this line, and Google Fonts will no longer be loaded—as confirmed by another check using the Font Checker.
You now have two options:
You can simply do nothing else and leave everything as is after deleting the line. Your website will still display without any issues, but it may look slightly different on various computers.
The second option:
You host the fonts locally.
The line you deleted specifies which fonts the theme normally loads from Google’s servers.
In the example above, these are: Roboto Slab and Open Sans.
Here’s how I set up local font loading on my site:
- In the root directory of the Bludit installation, I created a directory named "webfonts."
- On the page: https://gwfh.mranftl.com/fonts I selected and downloaded the necessary fonts.
- Below the CSS file on the page, you'll see the entry "Customize folder prefix." I entered /webfonts/ in that field. This causes the system to look for fonts in the "webfonts" directory, starting from the root directory of the Bludit installation. If you have a different folder structure, you’ll need to adjust the path accordingly.
This page has some helpful explanations on this topic:
https://css-tricks.com/quick-reminder-about-file-paths/
Unzip the downloaded fonts and then upload them to the Webfonts directory.
- Copy the CSS code displayed and paste it into a new text file. Save this file as "GoogleFonts.css" and upload it to the Webfonts directory as well.
- If you haven't already, activate the "HTML Code" plugin. In the plugin's head section, enter the link to the CSS file:
<link rel="stylesheet" type="text/css" href="https://eure_domain/webfonts/GoogleFonts.css">
This will cause the theme's fonts to be loaded directly from your website.
You can find more interesting articles here.
Comments
No Comments
Add a comment:
Subscribe to comments