Random Thoughts#
Finally, I'm back home for the Lunar New Year after a long journey. After returning, I've been busy with projects at work. Due to a shortage of manpower, we had to resort to outsourcing. However, the results of outsourcing were not very good. As the deadline approached, I discovered that the product owner hadn't done any testing. It's really unacceptable. That's why this article is delayed.
By chance, I came across xLog and found it to be a very interesting project. The only problem is that the interface is all in English, which felt a bit awkward at first. After all, my work environment is already in a foreign language, and coming home to see something non-native is a bit uncomfortable. Anyway, these are just random thoughts, you can ignore them.
To be honest, this project is quite appealing. Coincidentally, I'm also working on a small Next.js project and have submitted a few PRs. This project seems to have a lot of potential for playability, but it lacks some explanations. It's interesting to dive into the code, like how to handle multiple users. I've also done such a SaaS platform myself, such as automatically issuing SSL certificates. At that time, I came up with many solutions, and maybe I'll write an article about it.
Main Content#
This article mainly explains how to customize themes by making simple CSS modifications. As a full-stack engineer, we can easily edit CSS styles. However, the default theme of xLog doesn't match my personal style, so I decided to create a clean and concise theme that I like. When choosing colors, I prefer blue. I tried to find the CSS naming conventions of xLog and found that they mostly start with "xlog-xxx". So I created my own blue-themed style.
Yesterday, I finally had time to take a look at the news about xLog and discovered that it now supports i18n. So here, I would like to congratulate and applaud them. However, a problem arose: are my previously modified CSS styles still there? Obviously, due to some changes in the new version, my styles now look a bit ugly. DIYgod also kindly included images. So, let me share how to transform that not-so-pretty site into one that better suits personal preferences. Due to slight changes in the frontend code, the images have become larger. For example, the previous logo size was "100px * 100px", and now it has become "120px * 120px".
Getting Started with Modifications#
If you want to run the code locally and enable custom CSS functionality, you can pull the code back to your local machine. First, you need to connect to your Dashboard (also known as the backend). If you don't know how to connect, you can directly log in to xlog.app and click the button near your avatar. Then click on "Site Settings" to see the option for custom CSS.
Before defining CSS environment variables, please note that the colors defined by these variables will apply to all themes, and the colors in the backend will also change accordingly.
:root {
--theme-color: #0ea5e9;
--theme-color-dark: #0284c7;
--header-height: 100%;;
--banner-bg-color: #fff;
}
For example, using the var syntax, you can use the colors defined above.
.xlog-site-name {
color: var(--theme-color); // Referencing the previously defined color
font-size: 1.5rem;
line-height: 2rem;
}
Now, where did you find the xlog-site-name? This is where you need to use the Developer Tools. It is recommended to use Chrome for this. Follow the steps below: press F12 to open Chrome's console, use the element selector to select the element you want to modify.
Based on the screenshot, find the class starting with xlog and remember this class. You can modify it in the custom CSS later. In the element.style section, you can add your own elements for testing. After testing, you can save the changes.
This is just a simple example. All classes can be overridden. If your custom styles are being overwritten, you can use !important to force them.
I still like the mobile version, after all, there are more mobile users than desktop users.
Afterword#
After writing so many words, I found that xLog has made many changes during this time, especially the writing experience has improved a lot. For example, now you don't need to find an image hosting service when uploading images while writing. The xLog team is still quite active, with a report almost every week. It's interesting to see the updates and product improvements.
Thoughts and Reflections#
When launching a product, we need to consider the situation of existing user data. Today, we launched a new feature called "online apply", but a problem arose: the data structure is inconsistent between the preprod and prod databases, and when adding new fields, null values must be allowed. If null values are not allowed, there will be issues when existing users save data if there are checks in place. Actually, during the development process, we have tried our best to avoid this situation, but this project has been delayed for half a year and the decision to launch it was made at the last minute, which is really frustrating. Fortunately, I have a habit of recording all the details...
Alright, that's the end of my random thoughts~