?

Log in

 
 
06 November 2016 @ 05:06 pm
Layout: Lost in Translation  
OK, so this is supposed to be penderies' layout request, who wanted a "nature-y minimalistic theme". (Hope you like it!) "Lost in Translation" is inspired by one of sireesanwar's latest layouts, Oasis. Yep, I really really liked it.
With this layout, I've experimented new CSS techniques: the navigation is actually hidden under the LJ control strip and will only appear when scrolling the page down. The link list trick was the most difficult one to pull off. You don't have to enable it if you don't want to though.

PS: the second version of this layout is actually meant for you, wilding.

010 - Preview

010. Layout - Lost in Translation
↳ Live [ 1 / 2 ] ▪ Code [ 1 / 2 ]

BASIC INFO
S2 Flexible Squares.
Basic, plus and paid.
1024x600+.
Best view with Firefox.
FEATURES
Custom comment pages, navigation and sidebar.
DISABLED
Title, entry date, mood themes and everything in the sidebar except for the blurb and the link list.

HOW TO INSTALL
「 Select Journal Style 」

Apply any S2 Flexible Squares layout (except Circular and Circular Brown).

Scroll down to Choose a Page Setup: set the ads to horizontal or between entries, and select 2 Column (sidebar on left).

「 Text 」

Under Navigation, replace the Recent Entries text with Recent only.

「 Sidebar 」

Choose the following ordering: Default Userpic, Blurb, Link List.

「 Custom CSS 」

Set all drop-down boxes to NO and paste the code. Save changes.

OPTIONAL
「 Replace the Sidebar Picture 」

In the Global section, find this:

Replace the current URL with your picture URL. The recommended picture size is 1280x1920px.

「 Replace the Link List 」

If you want the links in the sidebar's link list to show up as in the preview, replace each of your links' text with I., II., III., etc.

Paste this code at the end of the CSS stylesheet for each link you have:

Replace ? with the number of your link (1, 2, 3, etc.), and instead of Text, enter the text as you want it to appear when hovering the link.

APPENDIX
「 Credit & Comment 」 Credit is nice; please link back to revolumna.
Don't redistribute or claim as your own.
Comments aren't required, but are appreciated!
「 Resources 」 Preview icons from recycle.
 
 
Current Mood: bored
Current Music: BTS - Blood Sweat and Tears
 
 
 
R.: with the twilight but no flame burnspenderies on November 6th, 2016 04:32 pm (UTC)
HOLY CRAP SO BEAUTIFUL! Putting it in now ^_^
ニン: Nishinoya Yuuneen on November 6th, 2016 04:54 pm (UTC)
THANK YOU! (#゚ロ゚#) I'm really glad you like it.
I actually changed the sidebar picture several times because I couldn't make up my mind. Feel free to change it if you want.
R.: with the twilight but no flame burnspenderies on November 6th, 2016 05:00 pm (UTC)
NO IT'S PERFECTION! I already changed my layout ^_^
ニンneen on November 6th, 2016 09:07 pm (UTC)
Thank you for using it. ♥
ihsarafesihsarafes on November 6th, 2016 06:44 pm (UTC)
Will you ever NOT amaze me with your layouts??? Lovely as always! ♥
ニン: Bokuto Kōtarōneen on November 6th, 2016 09:09 pm (UTC)
OMG, I'm blushing so hard right now. Thank you for always dropping by! ♥
riotpunkdanceriotpunkdance on November 6th, 2016 08:22 pm (UTC)
This is gorgeous!! Memming!
ニン: Iwaizumi Hajimeneen on November 6th, 2016 09:11 pm (UTC)
Thank you, thank you! (/^▽^)/
Christina: me- dichen- gonna turn oystersfly_meaway on November 6th, 2016 09:14 pm (UTC)
That layout is gorgeous. I'm definitely going to put this post in my favourites as I may come back to use it one day. It looks so pretty. Thank you for sharing!
ニン: Kozume Kenmaneen on November 7th, 2016 02:20 pm (UTC)
Thank YOU for the positive feedback! (^∇^)
kate: wendy's hair ♕wildling on November 6th, 2016 09:46 pm (UTC)
oh my gosh! i love both versions! i know one is specifically for me but i might just end up alternating, anyway: both are so beautiful *_*

thank you ♥
ニン: Kuroo Tetsurōneen on November 7th, 2016 02:15 pm (UTC)
Well, that's unexpected. (*・∀-)☆ But I'm glad you like both versions. Thank you!
Sofiatturners on November 8th, 2016 04:01 pm (UTC)
This is absolutely gorgeous, thanks for sharing! :D
ニン: Tsukishima Keineen on November 9th, 2016 04:01 pm (UTC)
Thank you very much. ♥
juneghost on November 19th, 2016 12:51 am (UTC)
I will use this! Just a one question: How I add custom moodtheme for this? and what size this http://i.imgur.com/WGtKFYJ.gif sidebar gif have to be?

And I'm very sorry that I was bothered to you.

Edited at 2016-11-19 02:54 am (UTC)
ニン: Kageyama Tobioneen on November 19th, 2016 01:53 pm (UTC)
Thank you for using it!

I do not recommend using a custom mood theme with this layout, that's why I've disabled this option. But if you really want it, you'll need to find this bit of code in the CSS stylesheet (it's in the "Date, Subject, Currents" section):
.meta-mood-img {
    display: none;
}
Replace display: none; with margin-right: 2px; and it should do the trick!

I'm not sure I understand your question.
(1) Do you want to use this picture as a full sidebar picture? In that case, your picture isn't big enough. The recommended picture size is actually 1280x1920px, so that it can fit most screen resolutions.
(2) Or, do you want to use this picture in the sidebar's blurb? In that case, there is no problem. The picture height doesn't matter, but its width shouldn't exceed 210px.

Edited at 2016-11-19 01:55 pm (UTC)
juneghost on November 21st, 2016 03:20 am (UTC)
thank you for help! it looks gorgeous! :)
juneghost on November 21st, 2016 03:45 am (UTC)
what do you think about it? :)
ニンneen on November 21st, 2016 10:37 am (UTC)
It looks good to me. :)
stoic kendamananalane on January 3rd, 2017 03:25 pm (UTC)
This is beautiful & I've used it for my latest layout :D
ニンneen on January 9th, 2017 04:29 pm (UTC)
Thank you for both liking it and using it. ♥
crouchingbarty: bfqoty - goth detectivescrouchingbarty on January 9th, 2017 04:13 pm (UTC)
I LOVE this theme! It's absolutely stunning.
ニン: Bokuto Kōtarōneen on January 9th, 2017 04:28 pm (UTC)
Thank you! (^∇^) Also, thank you for using it.
Neeichiigo_nee on April 10th, 2017 03:49 pm (UTC)
I'm loving this layout lots, thanks for sharing^^
ニン: Nishinoya Yuuneen on April 12th, 2017 11:19 pm (UTC)
Muito obrigada! ♡ (I noticed you were also Portuguese. fufu)
Neeichiigo_nee on April 12th, 2017 11:45 pm (UTC)
Ah~ não reparei que eras portuguesa! Nesse caso, obrigada por partilhares este layout ♡
ニン: Bokuto Kōtarōneen on April 13th, 2017 10:19 am (UTC)
Eu nasci e fui criada em França mas os meus pais são Portugueses. :)
Obrigada pelo comentário!
Neeichiigo_nee on April 13th, 2017 02:18 pm (UTC)
Hmm estou a ver ^^ deve ser interessante crescer no meio das duas culturas, e não tens de quê!
christinawickdshy on May 13th, 2017 06:49 am (UTC)
This is a great layout! Thank you for sharing! One thing tho, I'm having trouble with replacing the link list...no matter what I do I can't get the hover to work right. I don't know if I'm adding the CSS wrong or what, but I can't get it to work. Please help?

Thanks! :)
ニン: Iwaizumi Hajimeneen on May 13th, 2017 12:21 pm (UTC)
Well, thank you. ♥
Looking at your source code, the reason it's not working is that you've added the CSS incorrectly. I'm sorry, it's my fault. Maybe I wasn't clear enough when I explained that part.

I don't know which links you want to add so I'm just guessing here.
First, you need to replace each of your links' text with I., II., III., etc. You'll end up with something like this.
Then back at your CSS stylesheet, please copy/paste the line of code provided above for each link you have, so that it will look like this:
#sidebar_linklist .sbaritem:nth-child(1) a:hover:after {
    content: 'People';
}
#sidebar_linklist .sbaritem:nth-child(2) a:hover:after {
    content: 'Icons';
}
#sidebar_linklist .sbaritem:nth-child(3) a:hover:after {
    content: 'Comms';
}

And you're done! If you still have questions, do not hesitate to ask me. :)
christinawickdshy on May 14th, 2017 05:21 am (UTC)
I got it to work, thank you so much! I missed these guys -> } the first time, lol. ♥
ニンneen on May 14th, 2017 01:46 pm (UTC)
Yay! I'm glad it worked.