saga: (Default)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-11-03 02:50 am
Entry tags:

layout (Blanket) - silent picture


[ click to see full size. live preview (nav version/2) @ [personal profile] riotking + reading page + archives/archive day view, etc ]
[ example code in image: the fool @ [community profile] cawaii ]


I've seen a lot of dreamwidth accounts used as portals, but I also heard that people want a functioning reading page at the same time. I recently found out how to do that, so now we can have the best of both worlds. It's actually a very fast layout because the base is essentially this older one, but way simplified. There are still working modules at the bottom of the layout with full working functionality in the normal version, or in the other pages of the other version.

Silent Picture is named after "Silent Picture" by baroque. There's no link to the full song, but listen to the samples of the entire album. It's like sound candy and audio heaven.

ABOUT THE LAYOUT
There's two versions! One you can use as a portal (with functional everything once you hit Reading and everywhere else), and one that you can use as a simple layout. Either way, it's practical (even the portal as long as you follow all my instructions), and you can use some functions Dreamwidth (circa 2015) can offer. SO:
- Screen Width: 1024px+ This is because it has a--
- "Fixed" Width: Max width of 800px (excluding icon). Once your screen starts getting smaller than a certain width (like phones), it'll revert to a smaller version.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Front Page/Recent Page: You can use this as a portal or a listing.
- Optimal on: Firefox and Chrome. 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.

WHAT CAN YOU USE THIS FOR?
PORTAL VERSION:
- Anything that requires a Navigation Portal: (Introduction Accounts, Fanfiction Navigational Accounts you wanna restrict browsing flexibility so they follow a strict order, Roleplay Journals, etc)
- But with a functional Reading Page, Archive, Tags, Icons Page, etc. And modules.
--- Where you can also browse on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

NORMAL VERSION:
- Journals + Communities (of any kind)
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Blanket: Peach. (by [personal profile] sforzinda)
2. Customise
2.1 Presentation: Scroll down to Select whether entry management links are printed as text or using the available icons: Choose "text-only"
2.1.5 Repeat for Select whether comment management links are printed as text or using the available icons : Choose "text-only"
--- NOTE: It's not "Select whether user interaction links are printed as text or using the available icons" which I know is the first in the list of these crazy icon vs text things! Leave that one as icons.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Peach 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"
NORMAL VERSION


NAVIGATIONAL PORTAL VERSION: USE THIS AFTER FURTHER INSTRUCTIONS.

3. Modules for your bottom module section: 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="http://tofuhouse.dreamwidth.org/3393.html">layout</a> @ <user name="tofuhouse">



FURTHER STEPS AND INFORMATION (for the portal version)

The Portal Version of the layout is very highly customisable...mostly. Follow the following steps to get an awesome Navigation Portal.

(PREFERABLY) BEFORE INSTALLING CSS CODE
1. Customise
1.1 Presentation: Change Number of journal entries to show on the Recent Entries page: Type in "1"
--- NOTE: it's Recent Entries, not Reading Page. You can have as many as you want on Reading Page.
2. With the post you want as navigation, you need to Edit the date.
2.1 Open the post and click Edit like you usually would to a post.
2.2 Change the year to something absurdly deep into the future. Basically the dates have to be "more recent" than your current (and potential future) posts. Another ten years should do it (so like if 2015, then 2025, for example).
2.3 Check the box "Don't show on Reading Pages"
2.4 Save Entry.

ONCE INSTALLED, EDIT CODE
1. AT THE TOP OF THE CSS CODE, CHOOSE A BACKGROUND COLOUR FOR YOUR NAVIGATION:
--- By default, I have switched it to "transparent". Remember to keep !important there.
2. AT THE TOP OF THE CSS CODE, CHOOSE A BACKGROUND COLOUR FOR THE ENTIRE PAGE:
--- You can use images, I left that option in there.
--- By default, I have left it as #F5F5F5
--- Don't worry about such a bold change: The reading page and modules are still functional because their section backgrounds will remain white.
3. IF BACKGROUND COLOURS (ENTRY) ARE CHOSEN, you might need to change the text colours. Do so in the codes following the bg codes.
--- This won't affect the colours in the other pages.

THE OPTIONAL EDIT
You can switch on "Previous Number of Pages" link (usually found after all the entries). If you want to navigate through all your pages instead of having just one navigational page, just:
1. Near the top of the code, remove: .page-recent div.navigation.bottomnav {display: none;}
2. Change the background colour of .page-recent div.navigation.bottomnav right after if need be (it is set at transparent)
3. Change the link colour of .page-recent div.navigation.bottomnav right after if need be (it is set at #000000)

REMEMBER:
- Navigation bar at the top must be switched on, because you need to access the "Reading" link up there. Otherwise, access your profile and look for "Read" in the menus. Ditto with Archives and Tags.
- No Sticky Entries: They will double/triple/etc up otherwise.
- The width of your fancy navigational portal code must be a maximum of 800px. Preferably less to avoid breaking.
- Height can seriously be whatever.
- If you're wondering why your code isn't center: Center your code. The entry isn't going to automatically center all your code for you (so the original can still work).
- Make a note to have all your links and fonts all hardcoded in your navigation code, otherwise it'll look like the default this layout.
- If you got your code anywhere, remember to credit the code somewhere. Unlike my layout code where it has the name of the community in it, not all codes have them because it could interfere with the design. Profile is a good place to credit (so the rest of us can find it cos I totally would love to find more.)
--- [community profile] dreamcodes has great sources for any type of code, like navigation codes


CAN I...
- Use it for another function? Sure you can. Like a muselist, stock exchange, whatever the heck you want!
- Have more than one entry on the front: Yes, you just do the same things but put the number of entries you wanna see in Recent to more than one.


HOW TO EDIT NOW THERE'S NO FREAKING LINKS:
With everything practically switched off in recent view, it's nearly impossible to edit unless you go the long way:
Route version 1: Edit Journal Entries
Route version 2: As I said, there's a functional Archives Page. Click the absurdly futuristic year you set the post and click the day for archive view.
Route version 3: Just click your links as long as you have them hyperlinked on your main navigation page, and edit will be in there.




OPTIONAL STUFF

LINK COLOUR: There's only one link colour that's consistent in the entries, that's #790000, if you want to change it (with a find + replace all)

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 even in the navigational portal version, 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 because this time it was simultaneously simple (cos old base) AND a nightmare (cos wtf am I doing) (⊙◞౪◟⊙)

Post a comment in response:

From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.