[12] Blurry Layout

[lina_trinch]

❖ Mobile friendly! ❖ Stylized control strip ❖ Tag, archive, icon, & comment pages ❖ Images & text change from gray to color on hover

code here!
temporary live-preview here!

❖ The blur effect will not work on Firefox. In fact, I think it only works on Chrome. However, the background is still quite dark if a bit transparent. What I'm saying is, it'll work well on other browsers, but it won't produce the blur effect on all of them. Go check out the live preview to see what I mean. Never mind, it appears to work on every browser, barring Firefox on Android. Let me know if you find something different. Thank you! ❖ Go to Select a New Theme and select Tabula Rasa, the Plain version. ❖ Copy and paste the code into the Use embedded CSS field under Custom CSS. ❖ In the code, at the top, you'll see :root. This portion of the code will change almost everything you want (so long as that's colors and fonts). You only have to change it once and it'll work for the whole layout. ❖ I left in the original background so that it's ready to use immediately. However, if you want to change the background, look at the top of the code under body. Replace the image's url on the first line to your chosen background. ❖ Under Choose Page Setup (at the bottom), select "1 Column (modules at top and bottom; no sidebar)," aka the second one. ❖ Make sure Use layout's stylesheet(s) is checked. In the Custom stylesheet URL field, paste in: https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap ❖ Go to the Presentation tab. Select "text-only" for the following options: • Select whether user interaction links are printed as text or using the available icons • Select whether entry management links are printed as text or using the available icons • Select whether comment management links are printed as text or using the available icons ❖ Go to the Modules tab. Make sure 'Navigation' is in the 'Main Module Section.' ❖ If you want to change the transparency, look for the bit of code labeled opacity. For example, if you don't like those entries being hard to read unless you've clicked on/hover over them, scroll down to the ENTRIES section, search for the .entry block near the top, and change opacity from 0.4 to 1. If you have other snags, hit me up. rgba(27, 67, 50, 0.8) rgba(8, 28, 21, 0.8) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.7) #ebebeb

Comments

[bluedreaming]

Blurry effect works on mobile in Safari! 👍

[lina_trinch]

Thanks for letting me know! 8D

[luckyzukky]

love this!