saga: (Default)
h e l p ([personal profile] saga) wrote in [community profile] tofuhouse2015-11-16 05:04 pm
Entry tags:

layout (tectonic) - blame it on me

[ click to see full size of default. live preview @ [community profile] tofuhouse ]

This time, something that allows you to change the colours without changing the patterns! If you want those patterns anyway.

Blame It On Me is named after "Blame It On Me" by George Ezra. Randomised aww yisss.

It's a patterned layout that's a lot easier than it looks:
- Screen Width: Aim for bigger than 1024+, but should be any cos it's--
- Fluid Width: Also phone friendly.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing. And patterns.
- Custom Pattern Colours: You can change the colour of the patterns using just colour hexcodes.
- Optimal on: Firefox and Chrome (and consequently their forks and Opera). Works on Internet Explorer and Safari too (at least I think so when I clicked around).
--- Decently passable on phone screens because I tried to make sure, but I'd still prefer to use it on a normal computer sized screen. Nothing borks though yay.

- Journals + Communities (of any kind)
- Anything you want patterns for.
- Feeling like you wanna change colours a lot.
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

1. Select Tectonic: Fission. (by [personal profile] momijizukamori)
2. Customise
2.1 Scroll down and choose a Page Set Up: Choose any side bar position.
--- NOTE: The default was made on "2 Columns (sidebar on the right)"
--- NOTE 2: It works on one column too, but I personally like the sidebars more.

2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Fission css. My code just overlaps extra on top of it.
--- This method keeps all these layouts practically mobile responsive.
--- I dare you to uncheck the box. Do it. The layout will look super hideous.

2.3 Copy and paste the following code into "Use embedded CSS"

3. Modules: Choose as you see fit.
4. And just so people can find and use this layout too, credit [community profile] tofuhouse somewhere on your journal or profile page!
--- Helpful code to copy and paste: <a href="">layout</a> @ <user name="tofuhouse">

OPTIONAL STUFF This is super customisable again, though you don't have to do much to get what you want.

PATTERN COLOURS: I said before that you can change the pattern colours without uploading new images. WOW! That also means you can mix and match. Anyway, near the top of the code I already left an area where you can change the colours.

1. Find where the colour code to the patterns of Main and Header (as labelled in the code)
2. Replace them with the colour codes of your preference
--- NOTE: You might have to go one or two shades lighter, but just check it first.

Currently, the default colours are:
Header: #333333
Main: #ffffff (it's white)
Which are the ones you see in the full-sized image preview. So mess around with the colours yourself for the perfect combo!

These two files are the patterns, in case you want to save them and upload them somewhere:

1. Replace all the pattern files with patterns of your own.
--- Dreamwidth's internal file service is also here: Upload New | Manage Existing
(It's been working for mobile uploads if you email it, but now it does have file uploading from an internet browser)

COLOUR: It's all in grey scale cos it's easier to customise that way, but I made sure that all the colours used for text are pretty much different (so actual 50 shades). Don't worry about #000000 getting replaced all; anything that uses black as a shadow or background has been renamed "black" instead of the colour code, so you can Find+Replace as you please.
Main Font Colour: #222222
Link Colour: #888888
Hover Link Colour: #000000
Title Colour (and Links): #000000
Title Link Colour when hovered: #888888

CUSTOM ICON PAGE: Check it out, it's pretty cool. I even put in more than one icon now cos it looked so lonely before. How do you get this thing working? Go to Settings: Display, and make sure you check the box "Show my journal's icons pages in my chosen style instead of the site layout".

While you're there...

CUSTOM COMMENT PAGE: I coded it to work, but I'm gonna be honest and say that it's easier to turn it off and use dreamwidth's default look. The comment system and nesting is much more cleaner on the default site skin, that's why. So go to Settings: Display, and make sure you uncheck the box "Show my journal's entry pages in my chosen style instead of the site skin".

And that's pretty much it! Have fun with my further masochistic attempts at productivity (⊙◞౪◟⊙)
escaliers: by wistful_icons on LJ ([CCS] Princesses)

[personal profile] escaliers 2015-11-17 12:11 am (UTC)(link)
Really cool! I'm saving this for later.
eonflamewing: lady hayakawa | samurai warriors (hello!)

[personal profile] eonflamewing 2015-11-19 12:09 pm (UTC)(link)
emiri: (look ma! no hands!)

[personal profile] emiri 2015-11-23 08:17 am (UTC)(link)
Ahhh, this is great, thank you!

Snagging this for my personal journal. Credit is in the sidebar! Ty ty.
usanomimi: (pic#9766945)

[personal profile] usanomimi 2015-11-26 08:46 pm (UTC)(link)
super cute! i'm gonna use it for mayu here o7
cpt_kirk: <user name=cpt_kirk> (Default)

[personal profile] cpt_kirk 2015-12-05 01:21 am (UTC)(link)
Very nice! What is the color you're using for your header?
lockheart: tifa lockhart (Default)

[personal profile] lockheart 2015-12-08 05:19 am (UTC)(link)
Lovely theme, thanks so much for sharing! Edited a bit and am using on this account (with credit)! \o/
ditz: nagisa hazuki | i'm an arteest (04.)

[personal profile] ditz 2015-12-22 01:48 pm (UTC)(link)

This is Auste, I just yoinked this layout for my RP drabbledeedoo comm. IT'S WONDERFUL and no I did not uncheck the box.
Edited 2015-12-22 13:48 (UTC)
ditz: yomiko readman | the bookstore was sold out (09.)

[personal profile] ditz 2015-12-22 02:12 pm (UTC)(link)
Nnnnnope, I've had enough of borked codes to last a lifetime (a.k.a. Auste is so bad at installing codes)
lunairetic: (yukiko: sly boots)

[personal profile] lunairetic 2016-01-18 08:57 pm (UTC)(link)
Thank you so much! I'm using this now and it looks beautiful.
isleofapples: (text // gotta be kitten me)

[personal profile] isleofapples 2016-01-22 06:35 am (UTC)(link)
Hey! :)

This layout is pretty! I'm using it on my personal journal [personal profile] nashira, so thanks.

While I was browsing around I found this site of transparent patterns. You might know about it already, but I thought it could be useful anyway.
isleofapples: (text // moon of my life)

[personal profile] isleofapples 2016-01-22 08:22 am (UTC)(link)
Purple is the best. :3 It's my favourite, but I don't add it to many layouts for some reason. MORE PURPLE!

No problem. I was looking for some for a post code I'm making and when I found a whole website full of them I was like !!!!!!! MUST TELL SAGA FOR THAT ONE LAYOUT. So here we meet again. :)
isleofapples: (disney // ariel (flirty))

[personal profile] isleofapples 2016-01-22 10:07 pm (UTC)(link)
Tbh I even use the purple site layout for DW so I'm not actually sure why I'm not using more purple... though, to be fair I was mostly modifying layouts for my game before and that wasn't a very purple game.

:D There's so many resources online you can never find them all.
isleofapples: (star wars // leia (annoyed))

[personal profile] isleofapples 2016-01-25 02:24 am (UTC)(link)

isleofapples: (rent // sisters? we're close)

[personal profile] isleofapples 2016-01-25 02:50 am (UTC)(link)
I think the problem is it's seen as too girly. WHICH SEEMS TO BE NOT OKAY? Idk. I was trying to come up with layouts for something last week and they all got "too girly". COMING SOON TO A THEATRE NEAR YOU: PRETTY PURPLE PRINCESS, THE LAYOUT.

Anyway. I was toying with the transparent background images, as I said, only I wanted to use a css gradient beneath it, and it's DW so I can't do the sensible thing and add a div. BUT THEN I REMEMBERED #CANVAS WOULD WORK. Though now the only problem is I have to have the top of the layout have 0 margin. BUT I THINK IT LOOKS FINE. (it's on this journal)
isleofapples: (star trek // ezri (dammit))

[personal profile] isleofapples 2016-01-25 04:05 am (UTC)(link)
I was trying to demonstrate to my friends by repeatedly changing the gradient and pattern earlier, like look Ma, no photoshop! and they weren't excited :P But this works better on different screen sizes and I only need to play with a gradient generator to change the colours or pick a different pattern.

Not going to lie, though, the thing I hate most about DW is not being able to code the layout from scratch, so I can make it do what I want without trying to find work-arounds for whatever the original coder did. I have a layout I'm trying to work on on codepen and it's just testing my patience.
isleofapples: (star trek // borg queen (green))

[personal profile] isleofapples 2016-01-27 02:20 pm (UTC)(link)
quietly hjacks all your layout posts with discussion


I wish we had more modern style system, but to be entirely honest I'm not sure that dreamwidth will last long enough for the tiny amount of staff there is to get around to coding one from scratch and programming really isn't my style of coding to pitch in and help. :/ But something with an easier variables system (like tumblr, or wordpress) would probably make people more inclined toward making base styles, which would be nice.

Might attract more people back, too.
isleofapples: (disney // tinkerbell (oof!))

[personal profile] isleofapples 2016-02-11 07:54 am (UTC)(link)
Wordpress is sorta nightmarish... but there's always a quick answer on google if you know where to look. Often not the case with s2, sadly. :/ WP did start out a lot simpler to code for, though, as I made layouts for it once upon a time and lord knows 15 year old me wouldn't have bothered if it was too frightening. I mean sometimes I still look at table coding and go: WHY???!!! I am a baby.

I mean, it'd be nice to have people back because then comms might be used for more than museboxes and posts with one or two replies (or things like personal comms for graphics, etc.) though all of those uses are fine, I do remember quite well how active comms used to be on LJ and I miss it. :/ The biggest complaint seems to be that the site is inconsistent on the phone and there's no app for it. And it kinda is inconsistent on the phone, tbh, though a lot of the layouts are coded well to adjust for smaller screens, the site pages themselves seem to be a bit here and there...

Oh well. :3

Now I need to go see if I can be bothered to work out why this layout of mine shuffles to the left a bit when on a smaller screen... also organise the damn code. It's in a frightful state.
isleofapples: (p&p // jane (happiness))

[personal profile] isleofapples 2016-02-11 09:36 am (UTC)(link)
Ahah. The other thing is, Wordpress is written in a standard language (PHP) which basically means there's always a dev out there who can work out just why you fucked up your layout. But then I've coded layouts for forums, which is much more traumatising so I suppose it seems... better by comparison. Still the devil, just a better-documented one. :D

UGH yes. Actually, I keep thinking about the HP comms back in the day where you could get sorted and there were all these events and discussions and I know there's Tumblr, I use Tumblr. It's not the same. Talking is too much effort, people are oddly angry, a bunch of random and annoying things. Tumblr is honestly made for sharing pictures and sucks at pretty much anything else. :/

AND CHALLENGE COMMUNITIES! OMG I WANT THOSE BACK. I mean there's a few here, but there were so many!

THANKS :D I figured I should probably bother to code something myself, though this one will hate you if you don't set it up just so.... oh well.
isleofapples: (star trek // janeway (sigh))

[personal profile] isleofapples 2016-02-13 09:00 pm (UTC)(link)
If you can handle DW, you could handle a lot of forums. Just not some of the older ones. MyBB uses HTML and CSS with variables to make it's layout, and though it's complicated a bit it's not much harder than editing a normal page with CSS/HTML. SMF's layouts, however, are little bitches. D:<

Like I heard you left out a semi-colon, now the entire webpage won't load kind of bitch.

I was in HP ones, but yes that's the idea. Tumblr feels different to me, but I think a large portion of that is the discussions being hard thing. I, too, tumblr'd before it was super popular! Lmao it was so different. :l

TBH I'm not sure I'd make another layout with this base (Planet Caravan), as I don't especially enjoy the title/subtitle bouncing around the navigation at will.
striven: (Default)

[personal profile] striven 2017-04-08 01:14 am (UTC)(link)
This is beautiful, thank you very much! Using it on this journal. :)
liadtbunny: Disney Cartoon Lion (Silver bright)

[personal profile] liadtbunny 2017-04-15 02:58 pm (UTC)(link)
Woo! Nice layout!
starfleetbrat: (Default)

[personal profile] starfleetbrat 2017-05-15 01:24 pm (UTC)(link)
Hi, I really like this layout! Thank you.

Quick question though, how do I change the font color of the word "sticky" on a sticky post? I had a quick look through the code but can't figure it out.
torncurtain: (Default)

[personal profile] torncurtain 2017-07-09 09:34 am (UTC)(link)
Using this layout, will credit <3
Edited 2017-07-09 09:38 (UTC)
reijamira: ([Stock] Ink heart I like)

[personal profile] reijamira 2017-07-28 12:00 pm (UTC)(link)
This is gorgeous! Thanks for sharing! I've snagged it and tweaked it a bit. Hope it's ok. I've credited you in my profile. Thanks a bunch!

[personal profile] sarcasticlittlewallaby 2017-08-05 08:01 pm (UTC)(link)
I absolutely LOVE it. Thank you!
xsmoke_flamesx: (Default)

[personal profile] xsmoke_flamesx 2018-12-09 03:21 am (UTC)(link)
Using this layout, it looks awesome. Credit added to profile.

Thank you.