Coding With David

 I came across an article that said you can actually style the file upload button, so I decided to apply styling to my new File upload project. As it turns out, this is quite easy:      input[type=file]::file-selector-button {          border: 2px solid #6c5ce7;          padding: .2em .4em;          border-radius: .2em;          background-color: #a29bfe;          transition: 1s;      }      input[type=file]::file-selector-button:hover {          background-color: #81ecec;          border: 2px solid #00cec9;      } As you can see you just use the input[type=file] CSS selector to select the upload button.  Once you have the element selected, just like any other HTML element, you apply your styling. [source]

I found a really good YouTube video  from Google Chrome Developer channel that I am piggybacking off of for this post.  I found the content very interesting and I wanted to see what it would take to first port it s Blazzor application, then how to implement the layouts in a Blazor component library where I can use them in any project.   Please note, even though I am a fan of Bootstrap and other CSS frameworks, I have been on a push lately to write my own CSS.  These layouts are pure HTML and CSS. I won't cover the details of the 10 different layouts and the 1 kay line that makes them work, I do highly recommend you watch the video, it is very educational on CSS layouts. To demonstrate the 10 layouts, I have created a razor page to display the layout.  You can review the source code provided for the details 10 Layouts: 1. Center - All child content is centered within the parent container                     ...

I am working on a project where I want to white label the application so each customer can utilize their won colors and layouts.   This is straight forward to do, each customer has their own custom CSS style sheet ad based on the call customer you dynamically change the style sheet.   Seems easy enough. Another good user case is be able to support a light and dark theme.   When the users select either the light or dark theme, we just change out the style sheet.   The first part of solving this, know who which customer is calling is fairly easy.   We can use a query string parameter to tell us who is calling.   Something like this: @page "/light/{style}" There are 3 steps to implementing this solution.   Set element id We need to set the ID on the style sheet link element.   We will be using this to select and edit that element.   This will need to be done in _Host.cshtml for server side Blazor and in index.html for Client side Blazo...