autumndufresne@ij.com

WTF?

This is happening on a free account?

Fucking YEP! And guess what? You can also customize different views for your recent entries, day views, and friends page. You can go pretty bananas if you'd like but there a few small things that are pretty irritating.

Why are you using the calendar page?

The truth is you can do this to any view. When it comes to completely overwriting a whole page, though? Let's all be honest: the calendar/archive view serves no meaningful purpose so you lose nothing by completely overwriting it. I suppose the .lj-view-tags class, which styles the list of all tags is equally disposable but basically:

Additionally, for some reason, this useless view is included in the navigation links (both the strip in the header and the list in the navigation sidebar module) and you can rename this link very easily. Look to the top of this page? "custom view". All I had to do was type it. No messing around with pseudo selectors to try and insert something that looks seamless, just name the link whatever the hell you want.

All right, let's get to it.

WUT?

S2 Complete Style is crazy flexible, in part, because html elements are selected in very specific ways.1 Part of how this is achieved is styling the whole body of a pageview with two separate classes. One identifies how many columns and where your sidebars are (for this journal, I'm using two columns with the sidebar on the left, identified as class .layout-two-column-left). The body tag is also used to identify what view your journal should be displaying. For S2 Complete Style, there are a total of 7 of these classes.2 The most relevant for our purposes are:

  • .lj-view-archive - calendar page
  • .lj-view-recent - recent entries, individual tag pages
  • .lj-view-friends - friends page
  • .lj-view-day - day view

Because these classes are assigned to the body tag, it means by throwing it in front of other selectors, we can specifically target a single view in its entirety. For instance, in S2 Complete Style, entries are divs with the class .entry affixed. This means all styles we apply to .entry will apply across all views. That is, unless we more specifically target the entries on a specific view.

Continuing with the example using entries, If I style .entry to have a background color of #fff but also include .lj-view-friends .entry with a background of #000, then my friends page will have entries with a black background while all other views will have entries with a white background. This is because I've overwritten the white background with a more specific style for my friends view.

1 For an amazing, detailed breakdown of S2 Complete Style, check out tessisamess' complete documentation/full explanation here.

2 For a full list, you can also look at this section of Tess' S2 Complete Style breakdown.

HOW?

Basically, you magic erase everything except one of the custom text modules available in your sidebar, then make that custom text module cover the whole damn page and fill it up with whatever you want. You can style the html elements that you include there via the CSS in the console to customize your journal. Then, you just hide it in every view except the page where you want it (tell it, hey, display: none) and only have it displayed on the view where you want it (set the display property back to initial). BOOM! Custom view on a free account. (bonus: no more infuriatingly useless calendar view).

Here's where the little warning above comes back in: the custom text modules are kind of jerks. You cannot use lj-raw. This means that if you want complete control over your linebreaks, you either need to comment out any linebreaks you include in your html OR delete them and enter all of the html into the custom module as a single line of text. As a person who relies heavily on line breaks and indents to understand the structure of code I'm working on, this is a ginormous pain in the butt for me. As this is the case, you really want to stick to HTML and content for the custom module and do your styling via CSS. I know we're all prone to in line styling because we're often coding in entries using lj-raw but minimizing the need to tweak the text you're throwing in the custom module will save you a ton of frustration.

Magic!

I'm not putting this in a textarea because this is just an illustration of how you might go about this. Truth be told, there are probably multiple ways to get here.

If you're using S2 Complete Style, chances are there are some things you're telling to go kick rocks via the display property. You're going to want to include the custom text module you're using for your faux custom view with these elements. The classes for the two custom text modules available are: .module-customtext or .module-customtext2. Which you use really does not matter. Then, you're going to resurrect it on the one view where you want it (.lj-view-archive .customtext{display: initial;} or .lj-view-archive .customtext2{display: initial;}).1

Okay, so you've got this ninja website hiding in the shadows waiting to assassinate your calendar page. All you have to do is give it the signal. .lj-view-archive #alpha{display:none;} will vanquish the main container that contains the calendar.2 Next up is telling beta to take over the page: .lj-view-calendar #beta{float: none; width: 100%; height: 100%;} should do the trick.3

Now, all you have to do is style the html you've plugged into the custom text module(s). I would highly recommend taking full advantage of using your own, unique selectors in your html. It will allow you to easily style elements without having to create super long strings of selectors. Just make sure your class names are actually unique! If something is behaving in a way that makes no sense, definitely use the inspect function to see if you've accidentally used a class name that already exists in IJ's html/css.

1If your mind is going greedy places and you're thinking "how do I get more than one custom view out of this?", you could use this to magic erase the page that shows all tags (you can display these via a sidebar module, which is likely more useful in most layouts) and/or your day view (you can use tags to group content instead of dates so that magic erasing your day view doesn't eliminate functionality). This will take another layer of switching on and off certain items and though I have not yet hit a character limit for the custom text modules, I'm sure one exists and IDK if you can fit enough to do all three of these!

2If you're using the three column version of the layout (2 sidebars), you're going to also want to tell either the #beta or #gamma div to disappear in the same way (and yes, this means potentially you could style the same sidebar module two different ways, one via beta and one via gamma). I'm pretending gamma doesn't exist from here on out.

3 If you use the trick of setting your sidebar's position to fixed so that it will fill 100% of the page height, you need to set it back to initial. Otherwise, your visible content will be limited to the viewport.

???

Questions?
Drop Me A Line

Drop Me A Line

Questions? Requests?

DEATH TO TABLES FOR LAYOUT
@autumndufresne
Following

Kill all the tables, @rpresources #tableFree.

9:38 AM ‐ 12 Jun 2018

Code + Guide Here

Autumn, ∞
1 mile away

It's a tinder that's not a table!

Code + Guide Here

∞ likes

autumndufresne All the images. Yo @rpresources, you can have all the images #multiimginsta

Just Now

Code + Guide Over Here

Bio: Slider Toy

Bio: Slider Toy
Live Preview + Code + Guide

Tags: