The incredible arduous task of revising all of my blog posts once more, is and even greater project than it was the last time. I can only guess that the total number of pots has grown by 15 to 30, but that is not the only reason I have struggled. I wanted to significantly improve my blog to make it more readable and be a bit more clear about what kind of file or the origins of details. I began the task with the newset posts first.
My initial idea was to add some images to as many posts as I could, but as a technical blog it is not always possible to tie an image to a subject. The last time I tried to add images to my blog posts, the battle was against software and how blogger handles its image files. I had figured it out once before, and I thought I had a way to avoid the online blogger "add image" function in the editor. Last time my web browser conspired with the blogger site to deny me the ability to upload or if I used google drive, I was unable to reference the files to insert them into the blog. This time, I had no troubles with librewolf and I chose to simply use the online blogger editor to add the images, then I cut and pasted the chunk of html into bluefish to build around or to insert it in the appropriate location.
Fiddling with CSS can be a challenge but its slightly more complex with blogger, since the theme is also the layout and that includes some links and content that is part of the sections that surround the blog post. I have known for a while that the layout and the stylesheets were combined, after the first few times that links I added to a sidebar widget either vanished entirely or lost relatively new links. I have been much more careful since.
After each successive blog entry, going further backwards in time, I would recognize another area that I could improve, a new feature to add into my custom CSS style for the site. One of the first fancy things I added was the representation of my conversation with Grok about mudlet. Getting the main div elements styled was easy enough, but then I wanted to create a similar box for the make edits grok reminded me about. My initial plan to handle it was to use tables, and it did seem to work but getting it to appear precisely styled the way I wished was challenging. I found mention of using a number of divs and something that felt like brand new tech, the grid system comprised of multiple div containers.
Fiddling with CSS can be a challenge
It took time but eventually I had multiple containers with at least four different purposes and each with a little different color and styling. Some of my early efforts lead me to struggles later on when my choice to re-style the pre tag and the div tag, although at the time I didn't know it would later bite me. It seemed like more often than not, I was unable to get an element within my blog post to be positioned as I wished, and sometimes even if the positioning was good, there was size or spacing issues.
The worst mistake was one I couldn't see and that lead me to other changes and attempts to allieviate the issue which failed. A large chunk of my efforts was accomplished during third shift, so while everyone else slept I was depriving myself of sleep. This was fine and dandy until while editing both the content of a blog post and the CSS for the blog, I mistakenly pasted the CSS into the blog content online editor tab. Suddenly the page wouldn't render. I was reminded of when I used to edit a wiki, and an error broke all rendering. I looked at the files, the text and the CSS to see if there was a weird typo that would explain it. I may have corrected things that didn't need correction but luckily I don't think I made things worse. When I finally discovered that I pasted the CSS into the wrong place, and reverted it with another editor, it was all ecstatically restored. I think I did that CSS paste into the wrong editor tab at least twice, but after I knew what I did it was easier to correct it.
That was one mistake. Another mistake is even worse but it went a long time before it was discovered and when I made the adjustment it took a bit to get things back to normal. What I was trying to do, was to style the sizes of the fonts and was fighting a seemingly impossible battle to see any results. It took a lot longer than it should have for me to remember that there is a setting in the browser to control font sizes. This was not quite what I needed to change, but in the settings, in an advanced toggle underneath the font size, is what I had to change. In the advanced menu there it includes proportional, serif, sans-serif, monospace, sizes for serif and monospace, a tickbox to allow pages to choose their own, and a dropdown for minimum font size. This minimum font size dropdown goes from 9 to 72, but most importantly has an option for 'none' which cured my problem. My br9owser was continuously showing a size 9 or 12 or something font which I had configured, and this prevented me from seeing any changes to the font sizes on my blog.
My mistakes of redefining the div and pre tags to any degree but especially regarding formatting such as spacing or padding or margin, are what caused other css adjustments to surreptitiously inherit those changes. I eventually noticed both, and slowly changed both to affect less and then completely removed the css that modified them, curing it completely.
As much time as it took to setup the div container grid system for a named box, and a series of different named boxes, it took me all that time and more to get a fancy blockquote to look how I wanted. I found a site online that gave many examples of blockquote styling. I grabbed an svg quote symbol from one to add to other styling of my own. I was able to add the svg image to my css, and even could get it to appear. This was only a small temporary success, since I soon after wanted to have two quote symbols with their curled bits turned toward the inside of the quote at the corners of the blockquote. This example below is technically gratuitous but illustrates one of the fancier additions to the blog, the other is a revision of it above for a pull quote. I realized while I was writing this and inserting that block quote, that I could create a left or right positioned pull quote.
I found another site that allowed me to manipulate the svg to flip it along two axis to get the desired effect and then later to enlarge it. What I discovered shortly after was that the syntax it used was not exactly the right style for my purposes. Eventually I figured out that I should swap double quotes for single ones, and then it would work fine. This was only getting me all of the components for my fancy blockquote. I still had, I would discover, about 8 hours of fiddling to finally perfect the layout to be consistent. When I had the size of the blockquote box how I preferred, then somehow it was no longer centered, and then when I finally got the blockquote box correct, I struggled to get the quote symbols where I wanted them. It took a bit, but I eventually went from three columns, to five columns to a grid with fifteen boxes and then simplified down to a three by three grid of nine boxes.
As I write this, I am hopeful that I have perfected enough fancy stylish things that I can adapt them for further needs, or that I have exhausted need of further fancy things. One fancy thing that I added long before I touched the blockquote styling, was to add a hover text for my embedded images, so that viewers can be subtly be informed that the image can be clicked to enlarge. Other subtle changes are all over the blog posts that use them, such as changes to colors of the text or changes to the highlight or the notice or other indicators. I am not yet done with all the potential changes, but I am maybe twentyfive done out of eighty five, and could get inspired for more fancy things. Surely if I can determine an appropriate image, I would add it to a post.
I have to edit what I thought was a completed post about my efforts to overhaul the style of my blog to add this paragraph to describe one more thing I solved. I was consistently struggling to get all of the non-text content to be centered, I suspect even the purportedly centered images were not actually properly centered. This is because after all of this effort, I finally decided to check to see if there could be anything "off" with the layout which I did not yet determine. What I discovered was a padding difference for the post-outer class that is applied to a div surrounding the body of the text for the blog. Instead of this having equal left and right padding, it had 15 on the left and 20 on the right. This small difference is large enough to be noticed, and causes the standard method of centering to fail visually. This centering method is setting left-margin and right margin to auto. Since this is now solved, I had to find all of my unequal adjustments and convert any appropriate things to use the auto margin method.
A number of resources have helped me in my quest to use CSS effectively but none more so than the CSS and html resources at W3Schools, and the browser support and testing results at the caniuse site. Specifically recent sites and sites with tools related to the block quote examples and svg adjustments were also quite helpful. There are plenty of resources all over the web, W3Schools has a lot more than just CSS and HTML, and color pickers or other references or related tools, there are other web related languages described with nearly the same amount of detail. Even the humble inspector built into the firefox/mozilla family of browsers has even greater capability than I thought.
The last time I did an overhaul of all the posts of my blog, it was mostly to cleanup the formatting so that it was a bit more consistent. I made some of the scattered stylish bits more uniform, more consistently applied. It was a much less involved process and took a lot less time. I was mostly fixing manually broken lines to be a series to strung together sentences exploiting the auto 'wrap text' feature of my editor. Right now it is entirely possible that the CSS has changed in ways that older posts are broken or do not display properly. You may view or refresh a blog post to discover it no longer looks the same, possibly a little different with each refresh of the page. I hope to get the arduous task accomplished sooner than later but it is a long process. Some of the older posts may be broken or display improperly for a while, I can only say that I am working on it. I hope that this round of improvements makes the blog more enjoyable or easier to follow.
Just because the site that hosts your blog has templates, has a way to make limitied adjustments to those theme templates, doesn't mean that there may not also be a way to be even more creative. If there is an option like on blogger, to edit the theme or CSS (and possibly html) directly, or to import your own, then maybe it is something to consider. My blog began by using a theme, adjusting it with the built-in mechanisms of sliders and tickboxes, eventually choosing to remove the background image because of its non-uniform colors. I went from there to refine some adjustments inside the CSS theme editor, and after many more changes and additions, and now further refinements and embellishments, we have what A little Daemon on my Desktop has become. I still write about what I have been doing, but lately given much more free time to tinker, I have had more opportunity to record it all in my blog. My improvements are not yet complete, but check back in a while and surely I will have finished.
No comments:
Post a Comment