[4] Just Entry Headers Layout

[lina_trinch]

❖ Mobile friendly! ❖ Stylized control strip ❖ Tag & archive pages ❖ Navigation, links, and custom text modules ❖ Modules scroll out from the side on hover ❖ Intended to create a flat page with no scrolling ❖ Links change text/background/underline color on hover

code here!
temporary live-preview here!
imgur album preview here!

❖ This layout only features subject headers of entries and no content. It's intended to be a layout that entirely removes the need for a navigation entry/code. Of course, use it to the best of your potential and feel free to edit. I'd love to see what you do with it. ❖ 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. ❖ At the top of the code, replace BACKGROUND_URL with the url of your chosen background image. I recommend something that's at least 1400px wide so it'll look okay on all devices. ❖ Under Choose Page Setup (at the bottom), select "1 Column (modules at bottom; no sidebar)," aka the first one. ❖ Make sure Use layout's stylesheet(s) is checked. In the Custom stylesheet URL field, paste in: https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap ❖ OPTIONAL STYLE SUGGESTION. Go to the Text tab. Way at the bottom, remove the # symbol on the following options: • Text to show in a link to skip back through entries • Text to show in a link to skip forward through entries ❖ I know I chose like the worst background for the preview considering where the entries line up at but that's why I added that little hover effect. Not to mention, it shouldn't show up like that on smaller screens. I just didn't want to find another bg for Gambit again. #ebebeb rgba(0,0,0,0.0) rgba(0,0,0,0.2) rgba(0,0,0,0.6) rgba(0,0,0,0.8) rgba(0,0,0,0.9) rgba(0,0,0) rgba(235, 235, 235,0.4) rgba(235, 235, 235,0.7) rgba(235, 235, 235,0.9) rgba(255, 255, 255,0.9)

Comments

[madehischoices]

Hey there! This is Beth and I am using the layout here I had a couple of questions. Is there a way to resize the image so that Castiel's name shows in its entirety? And How do I get the blurb to show up on the side?

[lina_trinch]

Hello!

For your background image, at the top of the code, you should see a portion that says body, that place where you put the background url.

In that whole bit, tack on:

background-position:bottom;

You can replace the word bottom with some percentages to play with the placement if you like.

However, I can't make the image resize in order to show everything without it getting too small. If you want to see what I mean, look at the portion that says background-size: cover; and replace cover with contain.


As for the blurb, it looks like I totally left that out in the instructions, oops. x.x To get that going, go to your Modules tab where you edit your layout and make sure that Custom Text is checked and under the Main Module Section. Then go to your Text tab and add your blurb in the space that's labeled for "Custom Text." The module won't show up at all if that section's empty.


If you have further troubles, let me know! I hope that helps. ♥

[madehischoices]

thank you! I switched the background and it looks great!