Roktopus Scrapbook Documentation

The following is currently intended as a guide for those taking part in the Roktopus Scrapbook beta test. There are still a few gaps here and there, but you may find a lot of the settings to be self-explanatory anyway. Email me if you have any questions.

Special notes relating to the beta test are marked throughout in bold.

Installing the theme

First you will need to install WordPress on your host. Your hosting provider may include a tool to do this automatically. Otherwise you can follow the instructions here. NB. Roktopus Scrapbook is only available for self-hosted (wordpress.org) sites. It is not available on wordpress.com.

You then need to log in to the wp-admin interface (example.com/wp-admin), and head to Appearance > Themes then Add New. Click Upload Theme and select the roktopus_scrapbook.zip file from wherever you have it on your computer.

Those in the know can of course use FTP instead, or set the site up on a local WAMP-type host.

NB. I’ve had a few issues with the “live preview” of the the theme. (Let me know if you experience the same.) You might be best to activate the theme on your site from the get-go.

Customising the theme

All of the basic controls you need to customize the look of your site are contained in the WordPress customizer menu. This can currently be found in the wp-admin interface under Appearance > Customize. The following is an explanation of each of the settings.

*Entries marked with asterisks are standard WordPress features. More info on these can be found at wordpress.org.

Site Identity

Logo*
Upload a logo. If used, this should be a transparent PNG, landscape or roughly square in proportion. It will be displayed in the title bar above the logo. You need to have WordPress 4.5 or higher installed to use this feature.
Site title*
Your site’s title. By default this is what will be read by search engines, whether or not it’s displayed on the site itself.
Tagline*
A subtitle. Again, this will be read by search engines.
Oversized logo?
The oversized logo option allows your logo to be slightly wider than the title bar itself.
Hide title etc.
You can choose whether or not your site’s title and/or subtitle are displayed on different device sizes. If your logo contains the title text, for example, you might want to hide it all round, and if your subtitle is long or just not very crucial, you might want it hidden on mobiles.Would it be useful to hide the logo on some devices too?
Highlight title in black?
Just a little visual effect. The title (where visible) is shown in white text in a black box.

General appearance

Skin
There are six built-in skins to the theme, which dictate both the background texture or colour and other design features, like fonts. If you’re adding your own customisations, try to pick the look that’s closest to the result you’re after. The white and black skins might be thought of as multi-purpose “light” and “dark” skins, ideal for adding your own background.
Display pages on “islands” with alternate/custom background behind?
Island mode allows you to use a more noisy alternate background, while your page text appears on a clean box with the default skin background, with your custom background behind. The skins also all contain an alternate background for when no custom background is specified. On smaller browser sizes, the islands effect is not applied, to save space. NB: Sometimes clicking this box in the customizer doesn’t update the site preview. You need to publish your changes then reload.
Title fonts
Four simple variations are offered, plus defaults dictated by the skin. In some cases these will affect the headings within pages, in others not. Generally this is for some semi-rational aesthetic reason. If you want to use other fonts you can add them with custom CSS, but you knew that already.
Body font
As above, but without any defaults. You must pick one of the four options.
Title bar style
The title bar can take various forms: tab and full height have different appearances depending on the skin and whether island mode is selected; the two translucent optoins have fixed colours. The transparent option is intended for use with the menu at the bottom or bottom/side, the title and subtitle hidden, and no other widgets in the title bar, i.e. if you just want a floating logo and maybe social media links in the corner of your screen but no opaque bar for them to sit on.
Title bar side
The title bar can be displayed on the left or right of the screen, concepts which are hard to express reductively without recourse to ostensive definition. For more on the difference between right and left, see this helpful paper by philosopher Jonathan Bennett. On mobiles it will always appear at the top of the page.
Menu location
The menu can appear in the title bar, at the bottom, or in “responsive” mode. In responsive mode it appears at the bottom on narrower windows and at the opposite side to the menu bar. On mobile devices, the menu always appears in the menu bar at the top of the page. Future releases may include an option to place it at the top too. Thoughts?
Custom background
For the love of God, please just make sure it’s seamless. The rest is up to you.
Featured images position
Pages can be given a featured image, which appears at the top of the page. For example, if you have a separate page for each of your staff or band members, you might put their headshot as the featured image. You can float all these images to the left or right, have them appear at the top of the page (where they will be full width, and therefore quite big), or place landscape images at the top (full width), but portrait images to the side. This might allow you to create unique headers for each of your pages..
Featured images appearance
If you’re using PNGs with transparent backgrounds, perhaps containing illustrations or isolated images, you’ll want to set this to plain. If you’re using photos, like headshots, you might want to use the postcard-style, which adds a white border with a subtle gradient and a drop-shadow.
General image appearance
As with the above, you can customize the look of images within the site. The option to have linked images “postcard-style” and unlinked images plain allows you to use illustrations and isolated images with a transparent background (and no links) to decorate your site, but to give your photos a postcard border and 3D appearance, with a link to the full image (see this distinction in action here).

Social media links

Here you can add social media links to the title bar of your site. Instructions are included on the menu itself. You need the full URL for all except Skype and email, where you just need the respective address. You can also select the RSS feed check box if you want to party like it’s 1999.

Beta test note: Are there any missing that you’d like to see?

Spotlight

The spotlight effect overlays a circular gradient onto the site that is darker at the edges than the center, giving a moody cinematic feel. Darkness values (the opacity of the black) of between 0.05 and 0.2 work well for sites with light backgrounds. For darker backgrounds, you could push it as high as 0.5. You could go up to 1 if you wanted a specific horror or night-time feel, but just experiment with what works for your site.

The effect can also be turned off completely.

Menus

You need to specifiy a menu to function not only as the main menu, but also to dictate which pages are loaded into the the site’s “helicopter navigation”. If you want to… [working on this text… sorry!]

If you have a lot of pages in your site (more than say, ten) you might want to limit the scope of which are loaded in the Advanced section.

Widgets

There are two widget areas: one in the title bar, and one in the blog post sidebar.

For some reason only the title bar widget area appears on the customizer menu at the moment. This is a non-trivial issue that will need to solved. In the mean time both can be found in Appearance > Widgets.

The title bar is pretty prime real estate, as, depending on the dimensions of your logo and the size of your menu, there isn’t much room here. One thing you can put here is a secondary menu with less important pages – like T’s & C’s maybe – that you don’t want to include in the main navigation. See the Menus section for more about that. You could also include a social media feed here or a short text blurb. If you’re a restaurant, maybe you could place a booking plugin here – whatever you want to catch the eyes.

Static Front Page

A standard WordPress feature. Read the codex for more info.

Music Player

The theme has a built in music player, powered by SoundCloud…

SoundCloud embed code
Button shape
Button style
Playlist style

Dividers

Text to come…

The dividers themselves are a mixed bag and it’s

Advanced

Custom colophon text
The colophon is the text at the bottom of the screen with a credit or copyright information. By default it reads, “© Your Site YEAR | contains Roktopus.” (The year is automatically the current year.) You can change it to say anything you like…
Hide colophon?
…or you can hide it altogether.
Limit the scope of pages loaded from the menu?
If you have a lot pages in your site – more than, say 10 or 12 – you might want to use this setting. As all the pages in the main menu normally get loaded onto the site at once, this can mean that the navigation becomes cumbersome. Instead you can load only a subset each time: either only siblings of the first loaded page, or in groups of parents and children (where a parent menu item page will load with its children, and a child item will load with its siblings and its parent). The following diagram should hopefully provide some elucidation. Supposing you have three parent-level pages in your menu, with three children each: family-diagramYou can decide which is best for you based on where users are likely to navigate to from a given page.
Framerate cutoff
On certain devices, the between-page animations will not run very smoothly. When this is the case, the theme will stop showing animations and will instead move instantaneously between the pages. You can adjust the lower framerate threshold at which this will kick in, depending on your own personal threshold of frustration.
Disable lightbox effect?
If you’d rather use a third-party lightbox plugin, or would prefer images simply load freshly in the browser, you can disable the theme’s inbuilt lightbox effect here. (The lightbox effect is what happens when you click on an image and the full size version pops up on top of the other content.)
Disable tumbling on blog pages?
You might not like the tumbling animation when blog pages are loaded from the blog or an archive (such as a category or author page). If so, you can switch it off.
Disable helicopter navigation?
Selecting this will disable all AJAX loading of pages, and animations between pages.
Don’t load fonts?
If you’re adding your own custom fonts to the site via CSS, then you don’t need to load the default ones, so you can switch this off here.

Tips

A few pointers to make the most of the unique features or Roktopus Scrapbook.

HRs

HRs are horizontal rules or lines, which break up blocks of text. The can be inserted into your pages or posts using the button in the WordPress visual editor to the right of the big quotation mark.

In Roktopus Scrapbook these lines take the form of a dashed or dotted hand-drawn line, a special feature which you should encourage yourself to use liberally.

Images and Galleries

It’s recommended that you use medium sized images throughout your site, and that you float them left or right as appropriate (they’ll center themselves on mobile view).

Roktopus Scrapbook hijacks the standard WordPress gallery, making it look nice with a masonry effect and a few extra formatting additions, so it’s recommend that you use this (by selecting Create Gallery in the Insert Media dialog box when editing pages), rather than any third-party gallery plugins. You should select large sized images for a two-column gallery, and medium sized imaged for any other number. You can select thumbnail size, but these will all be square, which is not as nice really. Set them to link to the media file (not the attachment page). The in-built lightbox effect will handle the rest. (Tip: Try not to use gigantic images. Reduce them down to a maximum width of 2000 pixels or height of 1500 before uploading them.)

Previewing the appearance on a mobile

Roktopus Scrapbook loads the site responsively based on the device width, not just the browser width. This means it displays differently on a mobile device than it will on a desktop computer with the browser window shrunk to the same size. To preview the appearance of your site on mobile devices, you can use your browser’s developer tools to resize the display area. Once resized, you’ll need to refresh the page.

Google Analytics

The theme supports Google Analytics, which can be added by adding the relevant code to the Appearance > Custom code section

At present you need to specify the ga.js library as the new analytics.js library is not yet supported.

Not sure if this is set up properly in the beta. (!)

Description lists

Description lists have their own unique appearance in Roktopus Scrapbook. A shortcode will be introduced in future release of the theme to make this easy to implement in the Visual Editor. In the mean time you can punch them into the text editor using HTML markup.

Hero pages

The hero page is a somewhat experimental feature. It is similar but distinct from the standard “hero image” that has become a staple of a lot of web design over the past few years. Where a conventional hero image covers the entire screen (with detail lost around the edges), the hero page in Roktopus Scrapbook is contained within the screen.

Setting one up is simple. Create a new page, and under Page Attributes select “hero page” as your template. Add a featured image that will serve as the page’s content. It should be a decent size: at least 1000 pixels square, perhaps a little wider than tall. The

A hero page might make a great homepage, with a well designed image.

CSS

See the tips under the Custom CSS section.

Menus

The main menus page located under Appearance > Menus is still probably the best place to edit your site’s menus (though the same functionality exists within the customizer at Appearance > Customize > Menus).

You need to create one main menu to dictate the pages that form the grid layout of your site. If you want to include other pages in your site that are not.

Adding an extra menu as a widget

See menu widgets.

Adding widgets

You can add any of the many myriads of WordPress plugin widgets to the title bar, but be aware that space is at a premium here. A simple text widget might be useful if you want to include a short blurb or call to action.

See wordpress.com for more background info.

Menu widgets

You can add a separate menu of more minor pages to the bottom of the title bar by including a menu widget. These pages will not be included in the layout of the main site. Instead, they will load separately with the rest of the site off to their right, just as individual blog posts will when accessed directly through a link.

Custom CSS

You can add custom formatting for individual pages by referenceing their slug, which is added as a class, prefixed with the post-type and a hyphen. For example, your Contact Me page will have the class .page-contact-me, where contact-me is that page’s slug. So to add custom formatting to that page only, you can try:

.page-contact-me {font-weight: bold;}

Feel free to leave any comments on this page if you have corrections or clarifications. I may delete your comments if I add a correction you’ve suggested. Please don’t take offence.

Leave a Reply