There is something kooky with Chrome. I was making changes to my website’s design and editing CSS all day. When it came to “go live”, I uploaded my changes to my server, opened Chrome on my laptop and connected to the website. Lo and behold, the “hr” borders were there but they were all wonky. The color scheme was still the same as before I changed it. I opened the site on my phone (LG G5, running Chrome), same problem. I opened the site again on my laptop, this time using Microsoft Edge. It showed up like it was supposed to, dashed borders, background color changes and all. It seemed my changes only manifested on other browsers. When I inspected the elements in Chrome’s Dev Tools, the CSS window keeps showing “user-agent-stylesheet” with selector settings I don’t even remember making. I dug around the googleverse and discovered that Chrome has a habit of doing this and there seems to be no way to deactivate it (at least within my range of ability). I tried to edit my CSS hoping to figure a workaround to the issue, no dice. I temporarily gave up on it for a bit and continued to work on my website and started noticing that NONE of my new CSS changes were getting through to Chrome at all. Another search in the googleverse using different keywords this time pointed me to stackoverflow and I found this (click here). TL:DR I needed to change the name of the CSS file from style.css to something else (stylesheet.css in this case). Reloaded the website and BOOP! Everything is now working like it should in Chrome. I’m suspecting that Chrome updated something and caused it to start doing this. Anyhoo, back to work I go.
Happy New Year, all! I know it has been a few months since my last post. Life, unfortunately, caught up with me and now I am in school for my post-graduate studies. This means for the next two years or so, not much will be happening other than working full-time AND studying full-time. I’m hoping to squeeze in some web developing and other fun things here and there but I’m not making any promises. Right now, I’m days away from the start of another school term and I thought I would tinker with HTML and CSS just to keep my skills up and maybe dip my fingers into some responsive web design and PHP as well.
Right now, I’m working on a practice project for funsies in an effort to revamp my website in the future to include a shop as well as a more user-lovable gallery and slideshow. I have run into a bit of a conundrum, however. Under the “recent posts” section, I wanted to make the feature image into a sort of background where the title would be floating over it. I opted to use the “featured image” as the background image for the <div> the post title will be in and set the opacity to 0.5 (half). Unfortunately, all the child elements progressively become transparent as well. Apparently, this is one of the issues that the powers that be are working on at the moment. For now, my options are to create a <div> for the image with an overlay on top of it, or edit the image to change its opacity before uploading it into the <div>. The latter option will be tricky since the featured image is only transparent in the main page but not in the blog post.
We will have to wait and see what happens.
Quick update: I used the feature image AND an overlay with an opacity of 0.5 pre-edited in photoshop for the background, set the background-blend-mode to screen, opacity remains default (opacity: 1;) and this happened:
It’s a great option for when the background image will be changing depending on the feature image for the recent blog post. Now I’m off to do the happy dance!