More website work

I swore I wouldn’t delve into the nitty gritty of CSS and all that with this new web site, but..  (I caved..  but just a little ) I really wanted the little sidebar (seen on the right side) on pages where a single post is displayed to match that displayed on the archive page (the page you see when you click on menu item Blog).  The single post only page is generated by the Elementor plugin as I intend, not the WordPress theme I’m using, and although it can use the the same sidebar (I can drop it on the page), it knows nothing about the style and formatting of the WordPress theme in use. This may seem counter intuitive, but one of the many purposes of Elementor (the Pro version anyway) is to allow you to generate your own theme elements, vs using the theme’s design element. The point being made here – Sometimes a WordPress theme gets you 90% of the way there and you’d like to fix up that last little 10% in a way more to your taste. 

It would be a major undertaking in normal circumstances to further customize things, as WordPress themes are written in PHP,  and also, are littered with JavaScript code.

So, a moment of puzzlement…and then it hit me – “There’s a way within in Elementor to plugin in a custom CSS (cascading style sheet), class for an element, isn’t there?”

Well, sure enough, there is. 

So, I go over to the Blog page, hit F12 to get the Chrome browser’s debug console, locate the sidebar HTML element’s <div>  and ctr-v copy the CSS class names it is using to the clipboard. I now run back over to Elementor’s template generator, I paste in those class name into the custom CSS class dialog, and viola!  Now, if I change themes, this is not gonna work because I’m stealing these classes from a particular theme and, that theme is now no longer there. Still, that’s a minor inconvenience as you expect everything to change (visually) with a theme change anyway. So, that’s not really a hindrance after all. I’m still using ‘drag-and-drop’ page design – all the way baby!