[10] Single Column Layout

[lina_trinch]

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

code here!
temporary live-preview here!

❖ Imgur has really been hating on me lately so no photo album this time, folks. Anyway- ❖ 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, CTRL+F for HEADER_IMAGE. This is where you put in the url of your chosen header image. ❖ 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 'Link List' is in the 'Main Module Section.' #000 #ebebeb #fff rgba(0,0,0,0.5)

Comments

[reflash]

This layout is great! Using it on this journal.

Is there a way to make the header image go from grey to color on hover?

[lina_trinch]

Hi! Sorry for getting back to you so late. I've been having some internet issues. But yes! There should be!

Scroll down to the HEADER section of your code. Find the portion that's called #header (not #header .inner that's right after it), and replace that block with this code below.

If that doesn't work, let me know! I don't have access to the internet for long today so I didn't get to test it first.

#header { background-image: url("HEADER_IMAGE") !important; background-size: cover; background-position: top center; background-repeat: no-repeat; height: 40vh; outline: 1px solid #ebebeb; border-top: 1px solid #ebebeb; filter: grayscale(100%); transition: all 0.5s; } #header:hover { filter: grayscale(0%); }

[reflash]

That works wonderfully! Thank you!