Line width of text in posts - how to increase it to take advantage of monitor resolution

Help Customization
1

Hi! New user currently on the free plan, very much liking the functionality of write.as. Here is one question I have about posts:

Is there a way to increase the text line width to take advantage of monitor resolution? In blog posts, the text width seems to be limited to 576px by CSS class e-content. That leaves a lot of unused white space. I’d like to have the option to display larger line widths. I thought about javascript bookmarklets but that seems somewhat kludgy.

If increased line widths are not something that can be done on the free plan, is it available on paid plans? For example, with CSS styling? If so, what specifically would be the steps needed for creating user customized CSS?

Also, I saw some forum posts about using javascript but it’s not clear to me how to use js in blog posts or anonymous posts.

2

Hey, glad you’re liking it so far!

To answer your question: yes, you can add custom CSS and JS to your blogs on our Pro plan. So to get wider posts, you’d upgrade to Pro and then go into your blog’s customize page, and add this CSS (changing 900px to whatever you want):

#wrapper, #collection article, #post article {
    max-width: 900px !important;
}

You’ll also find a place to add some Javascript on that page, though it shouldn’t be necessary for this. And again, this is only available on blogs and their posts, not anonymous posts – though that might be an interesting thing to add in the future.

Hope that helps! Let me know if you need to make any other changes.

3 Likes
3

Thank you for that info. For the javascript that can be entered on the blog’s customize page, is that then added to each blog page? Can different javascript be added to different pages?

4

Yep, both the CSS and JS is included on every blog page. (The only caveat with the JS is that your Preferred URL in your blog settings has to be yourblog.writeas.com or a custom domain.)

But if you want different code to run on different pages, you’ll check something like the window.location.pathname for what page you’re on, e.g.

if (window.location.pathname == '/') {
    // Blog index page
} else if (window.location.pathname.lastIndexOf('/tag:') == 0) {
    // Blog tag pages
} else {
    // Blog posts
}
3 Likes
5

This was not working for tag page. I have to add the #subpage article selector…

Sample :

#wrapper, #collection article, #post article, #subpage article {
    max-width: 900px !important;
}
6

Good catch, thanks for mentioning it!

7

Hm. Custom JS is only available on W.a, and not on WF.h installs?

Is there a master list somewhere comparing the feature sets?

8

Just made a list of the differences here:

1 Like