[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

[neuralnet]

Hi Lina! It's Chris, using another one of your awesome layouts, over here!

Have a bit of an issue I noticed with this one, though... When you hover over the "Links" link, and the links list box pops up, it doesn't stay up for you to be able to move your mouse to click on any of the links. As soon as you move your mouse away from "Links," the box disappears.

Any thoughts on how to fix?

[lina_trinch]

Oh no! It must be a browser or screen size issue. I thought I worked all that stuff out. x.x

I'm going to fiddle with it but it might take some time for me to get a real fix that'll work universally. In the meantime, you can use the mobile version of the links module on your regular layout. It'll make your links appear beneath the "Links" header.

Go into your code and beneath the /*-- MODULES --*/ portion, you're going to find a section labeled with .module-typelist .module-content and one right beneath it with .module-typelist:hover .module-content. Take all that out and replace it with:

.module-typelist .module-content { padding-bottom: 1px; }

That should make your links appear.

I'm going to look for a fix to the floating issue in the meantime. Thanks for bringing it up!

[neuralnet]

Great, thanks for the quick fix!

[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!

[zoomieyo]

Hi there! I stumbled on your layouts and fell in love with this one because it was exactly what I was looking for. I’m currently having a problem that my titles are too long so on mobile the date messes up the way the entry looks. Any advice? (other than to stop being so wordy haha!)

[lina_trinch]

Hello! Thank you for using my layout and I'm really glad you like it. Thankfully, I've learned a lot more about css since I've made this, so I can absolutely help. C:

Ctrl+F in your code for .entry .header and replace that block with this:

.entry .header { display: flex; justify-content: space-between; border-bottom: 1px solid #ebebeb; padding: 5px 10px; } .header .inner { width: 100%; }

This way, when your entry titles are particularly long, the date/time will move a line below it without wrecking the page layout. Like so!

I hope that helps!

[(Anonymous)]

thats lovely but how i can add this https://i.imgur.com/bFxooBH.png header?

[juneghost]

this was me =)

[lina_trinch]

Hi! This is an old code of mine, but as per the instructions:

"In the code, CTRL+F for HEADER_IMAGE. This is where you put in the url of your chosen header image."

If you've tried this and it doesn't work, let me know! It'll just take me a day or so to get back to you about it what with the holidays, lol.

[juneghost]

Thanks but where i put heigh and width? how i make the header size 700x220?

[lina_trinch]

The header width is controlled by the canvas, so changing it will change the width of the whole layout. But you still could!

The width is under #canvas at the top, change the "50vw" value to what you need. The height property is under #header and you'll change the "40vh" value. It may be best to just change the height to a size suitable for your header, though, but that's up to you.

Hope that helps!

[juneghost]

i change it but size is still not 700x220 and header is not high quality

[lina_trinch]

Hi! I'm so sorry for the wait. The holidays were kind of insane on my end.

But in the meantime, I've found the issue! There was some hidden padding, so all we have to do is remove that. Under #header, add in "padding: 0;" and that should resolve your issues.

Sorry again that this took forever! Please let me know if this doesn't work.