[9] Star Trek LCARS Layout

[lina_trinch]

❖ Mobile friendly! ❖ Stylized control strip & popups ❖ Tag, archive, icon, & comment pages ❖ Navigation, links, tags, page summary, & custom text modules ❖ Entries/links/everything change color

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

❖ This layout is based on Star Trek's in-universe computer system, Library Computer Access/Retrieval System or LCARS. Many things in this layout appear in different colors such as the entry borders, links on hover, etc. Also, note that the page summary and tags modules on the sidebar turn into a small scrolling box if a lot of stuff is put in there to prevent it from overflowing off the screen. In other news, I don't think it's possible for me to become much nerdier than this but time will tell. Anyway, instructions: ❖ 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, under the :root section, is every color used in this layout except for black and white. If you want to change the colors of things for whatever reason, you can easily do so here and will only have to edit it once. ❖ 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=Oswald&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' and 'Link List' are in the 'Main Module Section.' Also make sure that 'Custom Text', 'Page Summary' and 'Tags' are in the 'Secondary Module Section.' You can choose any type of tag display you prefer. #000 #ebd534 #bda70b #6aa6cc #cc6a7e #c079d4 #c48123 #f0b1e7 #fff

Comments

[slurm]

Thank you so much for this one! I love it and it's perfect for my Kirk journal 😎

[riotact]

love this! using it for my kirk journal as well, thank you!!

[muccamukk]

Just found this and tried to implement it, but the bottom where the tags are and the "reply, edit, link, etc" control bars are showing as columns not rows. Any ideas?

ETA: And the menu sidebar thing is severely wonky. Any help would be appreciated, as I really love this layout.

[lina_trinch]

Hi, there! I've encountered this problem before and there's usually a few things that could be wrong. But the usual fix:

Go here, the place you where you put in the layout's css. The first option titled Use layout's stylesheet(s)? Make sure the checkbox is checked. Save, refresh your journal's page, and let me know if that fixes it.

[muccamukk]

That did fix it the column v. row issue (I thought I'd ticked it, but had just entered the style sheet). The menu bar is still only showing me my tags and the page summary. Which are the first two items listed in my secondary section.

[lina_trinch]

This layout only supports so many modules. When arranged in their appropriate places, the Navigation and Link List modules will appear at the top, where the header would be. In the sidebar, the Custom Text, Tags, and Page Summary should appear. All other modules are hidden via the CSS.

Was there any in particular that you wanted or didn't want?

[muccamukk]

Oh okay. I understand now. Is there any way to make the left side of the entry a bit wider? I made the font 120% so it's easier for me to read, and now the side part is so (relatively) narrow that it's clipping a lot of usernames short.

Sorry, it's amateur CCS hour over here. Thank you for being so helpful!

[lina_trinch]

Sure!

First, scroll down to the ENTRIES section of the code and look for a block that's just titled .entry. You can increase the left side's width by adjusting the number in padding-left. Make a note of what you change it to.

Go down one block to .entry .userpic and look for width. Change that number to the same one you used above. Under the right parameter, you'll have to adjust for the same amount.

For example, if you changed both of those other variables to 100px, add that extra 20 to this variable as well, making it 130px.

Scroll down further or use CTRL+F to find .entry-poster. Here, you'll do the same thing. Change the width to the same number and adjust right for the extra pixels.

And that's it! If you want, you can fill in that extra space by making the icon bigger. You can adjust those numbers under .entry .userpic img via the height and width. If you're adjusting everything to the 100px example above, I'd suggest changing those variables to 90px.

Anyway, let me know how that goes! Sorry, it's a lot, lol.

[muccamukk]

That worked perfectly! Thank you so much <3 <3 <3

[lina_trinch]

No problem! Glad I could help!

[boldboimler]

Just wanted to say thanks for this! Picking up Boims and it's a delight to have this.

[lina_trinch]

You're welcome! I'm really glad you like it!

[mytimingisdigital]

Sorry to bother, this is a gorgeous layout, but I keep getting this error:



If you have any idea what I messed up, I would deeply appreciate the help.

[lina_trinch]

Hi! I love that someone is running around with a Data muse so much.

But anyway, I couldn't find on your journal where this error is happening. Have you resolved it or am I looking in the wrong place?

[mytimingisdigital]

Oh it seems it's only broken in preview, how odd. Welp.

Thank you for getting back to me so fast!

[lina_trinch]

np! Glad you like the layout!

[tozka]

This is so cool! I love how niche and nerdy it is. Saving it to my memories for possible future use!

[lina_trinch]

lol thank you so much!! ♥