[2] Minimal Rainbow Layout

[lina_trinch]

❖ Mobile friendly! ❖ Stylized control strip ❖ Comment, tag, archive pages ❖ New images for user & community names ❖ Navigation links at the bottom ❖ Links turn rainbow on hover

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

❖ 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. ❖ 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=Sawarabi+Mincho&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 ❖ Images for the user and community links provided by Icons8. If you'd like to replace the images, here are the urls to CTRL+F for. About 10-12 pixels is your target size. These are both 11px. https://img.icons8.com/office/11/000000/rainbow.png https://img.icons8.com/office/11/000000/rgb-circle-2.png Activating Entry Interaction/Management Links Click here for image preview of entries with interaction/management links. ❖ First, CTRL+F for the text below and remove the whole thing the first time you find it in the code, including that comma at the start. , ul.entry-interaction-links, ul.entry-management-links ❖ Next, scroll down to the bottom of the code. CTRL+F this text and remove that, too. /*--If you want entry interaction & management links to appear in the layout, remove this. ❖ You're done! If you hit a snag, let me know. #fff #999 #858585 Links rgba(241,133,133) rgba(213,210,121) rgba(154,228,145) rgba(144,180,222) rgba(233,130,222) Entry & comment border rgba(241,133,133,0.5) rgba(213,210,121,0.5) rgba(154,228,145,0.5) rgba(144,180,222,0.5) rgba(233,130,222,0.5) Text boxes, drop downs, & archive days backgrounds rgba(241,133,133,0.2) rgba(213,210,121,0.2) rgba(154,228,145,0.2) rgba(144,180,222,0.2) rgba(233,130,222,0.2) Blockquote background rgba(241,133,133,0.1) rgba(213,210,121,0.1) rgba(154,228,145,0.1) rgba(144,180,222,0.1) rgba(233,130,222,0.1) Guide to RGBA Colors! Guide to Gradients! Guide to Percentages in Gradients!

Comments

[railise]

Hi! I realize this is an older post, but this is a beautiful theme-- I love it! :)

One question: is it possible to have the entry titles display?

Thank you!

[lina_trinch]

Sure thing! If you do a quick little ctrl+f in the code and find .entry .entry-title, you'll see it in a block of code that's set it to not display. Just remove .entry .entry-title and that first comma from the code and the titles will display!

BUT If you want them to be a little pretty, we can do that, too! Paste this somewhere into your code.

.entry .entry-title { background: #fff; margin: 0; padding-left: 5px; } .entry .entry-title a { background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; background-image: linear-gradient(90deg, rgba(241,133,133) 0%, rgba(213,210,121) 25%, rgba(154,228,145) 50%, rgba(144,180,222) 75%, rgba(233,130,222) 100%); -webkit-background-image: linear-gradient(90deg, rgba(241,133,133) 0%, rgba(213,210,121) 25%, rgba(154,228,145) 50%, rgba(144,180,222) 75%, rgba(233,130,222) 100%); -moz-background-image: linear-gradient(90deg, rgba(241,133,133) 0%, rgba(213,210,121) 25%, rgba(154,228,145) 50%, rgba(144,180,222) 75%, rgba(233,130,222) 100%); }

Let me know how that works for you!

[railise]

Got it-- thank you so much!!

While it's currently an empty community, we'll be using your layout at johnnys_west_7. I've credited you on the community profile. :)

Have a great day!

[lina_trinch]

Thank you! Glad it worked!

[inkcharm]

Hiiiii, I'm finally able to use this gorgeous, gorgeous layout somewhere, and will happily show you once I've got that fully set up. I was wondering if there was a way to display tags in the entries themselves without breaking things/things looking awkward? I have no clue about coding tbh otherwise I'd mess around with it xD

[hatejakku]

ROLLS UP IN AN RP ACCOUNT hey boo ♥

SO! You're going to want to start by looking under the ENTRIES section. At the very bottom, there's a lot of things set to display: none;. Find .tag, in there and remove it.

And then add this anywhere in the code!
.tag { background: #fff; padding: 10px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-family: Sawarabi Mincho; }

You should get entries with tags that look like this. Let me know if you have any problems!

[adore]

hello! this is beautiful! is it possible to have icons display alongside the posts?

[lina_trinch]

Sure! Try adding this at the end of your layout.

.userpic { display: block; background: #fff; padding: 10px 0 0 10px; height: 50px; } .userpic img { width: 75px; height: 75px; border-radius: 50px; }

It'll look like this.

Alternatively:

.userpic { display: block; background: #fff; padding: 10px 0 0 10px; height: 0; } .userpic img { width: 75px; height: 75px; border-radius: 50px; position: relative; right: 120px; }

This one will look like this.

Let me know if you'd like a different look!

[adore]

lovely, thank you so much!