The previous article covered a lot of ground in describing how to manage content for the different types of sections that a site based on this framework can have, but did so based on the example of my own website. Here I will explain how the framework can be configured to the needs of different sites.
We need to cover:
Clearly the framework puts a big title at the top of every page and you will want your website to have a different title to mine! But there are other aspects to the 'identity' of the website that you will want to change. Some (like the title) are visible and obvious, other aspects are behind the scenes and help your site to have a unique identity in the eyes of the various cyberbots that we live with these days.
Obviously the 'domain URL' (in my case www.antsmith.net) has a big impact on your site's identity - but that is a matter between yourself and the internet directories (e.g. your domain registration provider). The framework has no influence over this!
Site Name: the big title you see atop every page
Informal Name: this is used where we need to 'self-refer' (e.g. in the page footer when inviting folk to contact)
Formal Name:: this is used in metadata for Author and Copyright assertion
Site e-mail: so that contacts from the site can be sent to you
Site Protocol: will be http or https depending on your server set-up
Site Address: your base URL, eg. antsmith.net
About you and the site
Foreground: The default colour for text
Background: The default background colour
Link Hover: The standard colour for links when hovered
Define the site colours
A Facebook 'app id': So your site can use the integrated facebook services (like and comment)
Facebook Admin Id: So you can moderate facebook comments in your site
Twitter Handle: So visitors can connect on twitter, and so we can show your twitter feed on a promo page
To support social media integration
A Google Analytics unique tag: So you can see what traffic visits your site
A custom Google Search Engine: So visitors can search the content of your site
Provide Google services
There are 18 identity characteristics that the framework requires:
Most of this is pretty self explanatory.
With regards the default site colours you can use any valid CSS colour specification. Learn more about colours on the W3C Website
With regards donations you need to provide either Name and Account OR Id and Link. The first pair simply use the paypal.me facility that allows other paypal users to send money. The second pair use the PayPal buttons technology that allows anyone to send money either with a PayPal account or else a credit/debit card. The second option is more flexible for donors.
Mind you the donate button never seems to get used (I doubt you've used it even though you're reading this article!) so it's all a bit accademic really... If you don't want to offer people the opportunity to donate then set all of those values to nothing ('').
Facebook App Ids can be created by visiting https://developers.facebook.com/ - register as a developer then creating apps is available. You'll want to search for instructions, maybe. Or contact me...
The Facebook Admin Id is just your user id on facebook.
If you don't want to track visitor stats (or just can't work out how to get a google analytics tracking-id then just leave it empty ('')
The framework assumes that you will have a custom search engine, it's really very useful! Make one at Google Custom Search Engine.
Lovely, yeah? But how are these settings made?
You should take a copy of the file 'site-config.php' from the sub-directory 'root-files' of the framework folder and store this in the root (top level) directory of your website. You can then edit it using any text file editor (technically it's a PHP script file, but script files are just text). The first few lines of that file look like this (we'll look at the rest of the file later):
<?php $GLOBALS ['SITE_NAME'] = 'Ant Smith'; $GLOBALS ['INFORMAL_NAME'] = 'Ant'; $GLOBALS ['FORMAL_NAME'] = 'Ant Smith'; $GLOBALS ['SITE_EMAIL'] = 'email@example.com'; $GLOBALS ['SITE_PROTOCOL'] = 'http'; $GLOBALS ['SITE_ADDRESS'] = 'antsmith.net'; $GLOBALS ['FG'] = '#101820'; $GLOBALS ['BG'] = '#fafffa'; $GLOBALS ['LINK_HOVER'] = '#e60000'; $GLOBALS ['DONATE_NAME'] = ''; $GLOBALS ['DONATE_ACCOUNT'] = ''; $GLOBALS ['DONATE_ID'] = 'HBVL2NS5YYCFC'; $GLOBALS ['DONATE_LINK'] = 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HBVL2NS5YYCFC&source=url'; $GLOBALS ['FB_APP_ID'] = '507152613230874'; $GLOBALS ['FB_ADMIN_ID'] = 'TheGameCat'; $GLOBALS ['TWITTER_HANDLE'] = 'antsmithpoet'; $GLOBALS ['G_ANALYTICS'] = 'UA-113346480-1'; $GLOBALS ['G_SEARCHBOX'] = '014434812355021726700:-ankwdbmgg4'; ...
Hopefully it makes immediate sense. You change the values on the right-hand side of the equals signs (the left-hand side indicates what it is you're changing). Make sure to keep the single-quotation marks and the semi-colons. Don't be using any other single quotation marks (or apostrophes) in the values you supply - it will screw the file up. (There are work-arounds if you want an apostrophe, just go and learn about PHP Strings if you really want such, although for the life of me, I can't imagine why you would).
You'll see there's a few other 'root-files' which you need too, infact everything in 'framework/root-files' needs copying up to your website's top directory so I'll explain them here:
.htaccess: You don't need to edit this, but you do need to have it. Basically it's the wiring that connects site URLs to the framework scripts that draw the pages.
*.png A whole bunch of square icons at different sizes for various different models of mobile devices. Replace these with your own site icon, keeping the filenames that have been provided.
domain.css: We'll look at this file later, it allows you to modify the look of specific places in the site.
domain-head.php: Anything that needs to appear in the <head> section of all pages on the site goes into this file. Typically links to special (extra) fonts can go in here.
favicon.ico:favicons appear in browser tabs and address bars, they are tiny little images (16px square) that allow your site to be visually recognised amongst a bunch of diffierent tabs you'll have open in a desktop browser. You need to make your own and replace the default one. I made mine here: https://www.favicon-generator.org/
me.jpg: the default image used when links are shared, if no more specific image can be found.
phpinfo.php and phpvars.php: You don't need to edit these, in fact you don't really have to have them, they just turnout handy sometimes...
robots.txt: agan, you don't need to edit this but you need it on your server (it just tells search engines where to find the sitemaps).
bespoke/ a directory that needs adding to the website top level directory. This is where PHP scripts that generate bespoke, one-off, pages have to live. You should make sure the directory exists at the root of your website even if you don't have any bespoke pages (yet).
policies2020/ another directory you need to have at the root of your webserver. It contains the default provacy policy. Every website must have one by law so be sure to include this. Also consider editing privacy-policy.txt
sitemaps/ another directory that needs to exist in the website's top-level directory. The sitemaps for the site get saved here. You will need to delete sitemaps from time to time to allow them to be refreshed (see my previous article)
As an aside, part of the framework's duty is to look at the addresses (URLs) that access the website so that it can decide how to draw the pages that the URLs are asking for. You'll get a better sense of how this is configured later (below), but essentially if a URL is asking for an item (or promo or photo) page the framework will get on with the job of drawing the page for you. If the framework doesn't understand how to draw the page it passes that duty on to a script in the 'bespoke' directory. This means your website isn't limited to just having the kinds of pages that the framework knows how to produce. For exmample, on my website I have a 'memes' section which is highly specialised, probably of little interest to anyone else, and so is not part of the framework. When a URL like 'www.antsmith.net/memes' or 'www.antsmith.net/memes/001' arrives the framework will assume there's a script file called 'memes.php' resident in the 'bespoke/' directory and it will pass the duty of drawing the page to that script.
The question of how you 'structure' a site concerns how all the masses of pages get divided up and grouped together so that the content is basically manageable, browsable, findable. If you just dump all of the content together it becomes really difficult to browse through it or find anything in particular. By dividing the content into sections everything gets easier - unless the sections simply make no sense, or if you just can't quite decide which section a given piece should sit in... It can be suprisingly difficult to decide what section a work belongs to. Even in simple alphabetical organisations it's hard to decide where a thing lives; think about the inconsistantcies that arise with 'The', should a title like 'The curious incident of the dog in the night' be catalogued under 'T', or should it appear under 'C' as 'Curious incident of the dog in the night, The'? (Structuring website content is pretty much the same job as organising a library, except we have more creative options with the epherma of digital assets than with the physical constraints of actual books!).
Structuring a site - Personas and Journeys
The key to structuring content is to understand how people will try to access it. That is, working out who's going to visit the website and why; why will people visit the site and what will they want from it. These might seem impossible questions, after all the cyberworld is just stuffed full of anonymous avatars! But actually, by considering the nature of the content these questions resolve quite quickly - as a creative artist or writer or photographer you already have a sense of who your work is meant for.
There's a lot of faddiness in the world of 'creative web design' and I'm sure there's them that will hate me or deride me for suggesting this - but as a way in to understanding the task of structuring your site it's worth creating a bunch of imaginary friends, or personas. Personas are pseudo-people you can understand (they're maybe even based on people you know), and you can easily imagine why they come to visit your site and what they want from it. As an example, thinking about www.antsmith.net:
A whole bunch of poems. Some are high energy performance pieces with a viral renown, some are deeply introspective works published in underground or left-wing leaning outlets.
There's a bunch of lighter short fictions.
A whole host of photos, either documenting the poetry 'scene' or the world around us, or else standing as modern or pop-art works that have been seen on book covers and in photographic magazines.
There are major works that people will have seen in the news and
there are more scholastic considered articles.
The site content consists of:
In short, quite a hotch-potch...
So let's imagine up personas.
Lil' Johhny, he plays git-tar and jus' knows there's photos of his earnest brow lurking on my website.
Amelia, she digs flowers and she's sure she saw some beautiful shots that she'd love to be able to make herself in last week's Amateur photographer.
Ernst is just starting out as a performance poet and is keen to learn all he can by absorbing the work of others.
Okay, so naming your Personas is a little cheesy - but it does help in imagining their attitudes and behaviours. Lil' Johhny sure aint gonna wanna wade through a bunch of flower photos hoping to find a picture of his vizzog somewhere what with his low attention span and impulsive behaviours. Amelia, well she'd be quite horrified at some of the things she might see on the site. Ernst though, he could browse for hours if he wanders into the right place...
This is a very brief outline, but hopefully you start to see how we can create sections or tags aimed at what people want from the content.
This whole process should be fun and rewarding for a creator of artistic content because you're effectively writting the site narrative with characters and journeys. How many Personas do you need? How many different journeys might each of them take? How do you encourage a character to change paths? What do you need to give them to keep them motivated?
It all depends on the nature and quantity of the material - the more of that you have, the grander the story that the website can weave...
Configuring a Site StructureTake a look at the rest of the 'site-config.php' file I introduced earlier. Here's the whole file for my website:
<?php $GLOBALS ['TWITTER_HANDLE'] = 'antsmithpoet'; $GLOBALS ['SITE_NAME'] = 'Ant Smith'; $GLOBALS ['INFORMAL_NAME'] = 'Ant'; $GLOBALS ['FORMAL_NAME'] = 'Ant Smith'; $GLOBALS ['DONATE_NAME'] = ''; $GLOBALS ['DONATE_ACCOUNT'] = ''; $GLOBALS ['DONATE_ID'] = 'HBVL2NS5YYCFC'; $GLOBALS ['DONATE_LINK'] = 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HBVL2NS5YYCFC&source=url'; $GLOBALS ['SITE_EMAIL'] = 'firstname.lastname@example.org'; $GLOBALS ['FB_APP_ID'] = '507152613230874'; $GLOBALS ['FB_ADMIN_ID'] = 'TheGameCat'; $GLOBALS ['G_ANALYTICS'] = 'UA-113346480-1'; $GLOBALS ['G_SEARCHBOX'] = '014434812355021726700:-ankwdbmgg4'; $GLOBALS ['SITE_ADDRESS'] = 'antsmith.net'; $GLOBALS ['SITE_PROTOCOL'] = 'http'; $GLOBALS ['FG'] = '#101820'; $GLOBALS ['BG'] = '#fafffa'; $GLOBALS ['LINK_HOVER'] = '#e60000'; $GLOBALS ['SITE_SECTIONS'] = array ( array ( 'Name' => 'Home', 'Nav_Item' => true, 'URL_Part' => '', 'Branch' => 'home2017', 'Class_Ident' => 'home', 'Title' => 'Creative Works', 'Description' => 'Fact and fiction, words and images; the creative works of Ant Smith', 'Livery' => 'black', 'Type' => 'promo' ), array ( 'Name' => 'Poetry', 'Nav_Item' => true, 'URL_Part' => 'poetry', 'Branch' => 'poems2', 'Class_Ident' => 'poetry', 'Aggregate_Video' => false, 'Aggregate_Audio' => false, 'Tag_Short' => false, 'Tag_Long' => false, 'Tag_Video' => true, 'Tag_Audio' => true, 'Promo_Media' => true, 'Group_Lines' => true, 'Livery' => 'rgba(255, 69, 33, 1.0)', 'Type' => 'item' ), array ( 'Name' => 'Photos', 'Nav_Item' => true, 'URL_Part' => 'photography', 'Branch' => 'photos2017', 'Class_Ident' => 'photography', 'Livery' => 'rgba(255, 166, 5, 1.0)', 'Type' => 'photo' ), array ( 'Name' => 'Projects', 'Nav_Item' => true, 'URL_Part' => 'projects', 'Branch' => 'projects2017', 'Class_Ident' => 'projects', 'Title' => 'Projects', 'Description' => 'Fact and fiction, words and images; the creative works of Ant Smith - projects', 'Livery' => 'rgba(218, 74, 208, 1.0)', 'Type' => 'promo' ), array ( 'Name' => 'Stories', 'Nav_Item' => true, 'URL_Part' => 'stories', 'Branch' => 'stories2017', 'Class_Ident' => 'stories', 'Aggregate_Video' => false, 'Aggregate_Audio' => false, 'Tag_Short' => true, 'Tag_Long' => true, 'Tag_Video' => true, 'Tag_Audio' => true, 'Promo_Media' => false, 'Group_Lines' => false, 'Livery' => 'rgba( 92, 214, 92, 1.0)', 'Type' => 'item' ), array ( 'Name' => 'Memes', 'Nav_Item' => true, 'URL_Part' => 'memes', 'Branch' => 'memes2017', 'Class_Ident' => 'memes', 'Livery' => 'rgba(198, 140, 83, 1.0)', 'Type' => 'bespoke' ), array ( 'Name' => 'Policies', 'Nav_Item' => false, 'URL_Part' => 'policies', 'Branch' => 'policies2020', 'Class_Ident' => 'policies', 'Aggregate_Video' => false, 'Aggregate_Audio' => false, 'Tag_Short' => false, 'Tag_Long' => false, 'Tag_Video' => false, 'Tag_Audio' => false, 'Promo_Media' => false, 'Group_Lines' => false, 'Livery' => 'white', 'Type' => 'item' ), array ( 'Name' => 'Articles', 'Nav_Item' => true, 'URL_Part' => 'articles', 'Branch' => 'articles2017', 'Class_Ident' => 'articles', 'Aggregate_Video' => false, 'Aggregate_Audio' => false, 'Tag_Short' => false, 'Tag_Long' => false, 'Tag_Video' => true, 'Tag_Audio' => true, 'Promo_Media' => false, 'Group_Lines' => false, 'Livery' => 'rgba( 2, 166, 236, 1.0)', 'Type' => 'item' ), array ( 'Name' => 'Video', 'Nav_Item' => true, 'URL_Part' => 'video', 'Branch' => 'video2017', 'Class_Ident' => 'video', 'Aggregate_Video' => true, 'Aggregate_Audio' => false, 'Tag_Short' => false, 'Tag_Long' => false, 'Tag_Video' => false, 'Tag_Audio' => false, 'Promo_Media' => true, 'Group_Lines' => false, 'Livery' => 'rgba(245, 184, 217, 1.0)', 'Type' => 'item' ), array ( 'Name' => 'Audio', 'Nav_Item' => true, 'URL_Part' => 'audio', 'Branch' => 'audio2017', 'Class_Ident' => 'audio', 'Aggregate_Video' => false, 'Aggregate_Audio' => true, 'Tag_Short' => false, 'Tag_Long' => false, 'Tag_Video' => false, 'Tag_Audio' => false, 'Promo_Media' => true, 'Group_Lines' => false, 'Livery' => 'rgba(255, 198, 26, 1.0)', 'Type' => 'item' ), array ( 'Name' => 'Buy', 'Nav_Item' => true, 'URL_Part' => 'products', 'Branch' => 'products2017', 'Class_Ident' => 'products', 'Title' => 'Products', 'Description' => 'Fact and fiction, words and images; the creative works of Ant Smith - products', 'Livery' => 'rgba( 10, 235, 232, 1.0)', 'Type' => 'promo' ) ); $GLOBALS ['DEBUG_STATE'] = false; $GLOBALS ['IN_DEV'] = false; ?>
We've already seen the top part earlier. The rest of the file is mostly a long 'array' called $GLOBALS ['SITE_SECTIONS'].
You can think of an 'array' as being a list in this context, and in fact SITE_SECTIONS is effectively a list of lists; it contains a list of configuration items for each section I've decided I want on the website. Not all of the sections have just the same list of configuration items as the other sections... that depends on the type of section we are configuring. And we already know that there are 4 different types of section: Promo, Photo, Item and Bespoke. So we need to understand that SITE_SECTIONS contains one list of configuration items for each section in the site. The order in which they appear defines the order they appear in the site menu (if the section is in the menu!). In fact you can see the terms that appear in the site menu are given by the 'Name' item that heads each of the individual section lists. Have a browse through.
So there are 10 lists of configuration items (one for each of the 10 sections in the website) of 4 different types (Promo, Photo, Item, Bespoke).
Although the specific list for each type of section differ, all sections have some configurations items in common.
Name: How the section appears in the site menu (and also in metadata Titles etc...)
Nav_Item: Indicates if the site section should appear in the site menu
URL_Part: How the section appears in a website address (URL). Mostly this is very similar to 'Name' but note that 'Name' typical starts with an uppercase letter for a nicer display. Also note the 'URL_Part' and 'Name' don't have to be at all similar. The menu 'BUY' section relates to the 'www.ansmith.net/products' URL address.
'Branch: Remember how in the last article I kept going on about the website section's content directory? Well, this is how that relationship is defined, how a section knows where to find its content.
Class_Ident: Okay I admit it, this is a super geeky term - it should make more sense later. Simply put this defines the style of the section in terms of how things are laid out.
Livery: This is a standard colour defintion (see earlier discussion on default site colours) and determines the 'trim' colour for the site section.
Type: Defines the type of the section (promo,photo,item or bespoke) and so defines the structure required in the associated content directory (Branch) as you'll remeber from the previous article. Also defining the set of additional configuration items required in this list, as detailed below.
All sections contain configuration items for:
As a quick aside, why did I decide to use such a different term in the site menu than I did in the URL for the last section on the site (the one being 'BUY' and the other being 'products')? This speaks to the implicit difference between the representations. The URL (where I use 'products') is primarily semantic machine language. It is important that URLs represent the nature of the information they point to so that machines understand how the content relates to everything else on the internet. This section of the site fundamentally presents 'products' so the URL for it uses the term 'products'. But, people think differently to machines and the menu presentation is primarily designed for humans. The imperative 'BUY' is much more understandable by people than the more semantically correct term 'products'.
Note also how the Class_Idents and the URL_Parts all look the same in the values they take. This is just because we're looking at a first implementation where, for example, product pages have product type styling. Over time new styles will be developed (and probably given better names). They are actually fundamentally different things and it really means nothing that I've given them similar (or, er, identical) names just now!
All of the sections in my website are 'root sections' - they have single part URLs like 'poetry'. It is also possible to put subsections (poetry/tags/christmas for example) into the menu, if you want.
Okay, so we've seen the common configuration items that have to be given for any section we define for the site. Lets look now at the additional configuration items each type of section require.
Promo Section Configuration Items
Web pages require some standard 'metadata' items so they can be adequately indexed by search engines and well represented by third parties when sharing. These standard items include a Title and a (typically short form) Description. For most pages the framework can work out a good title and description. Clearly the title of a photograph, or name of a collection or gallery makes for a good page title. And the title given to a poem or story etc can readily be used as the page title. With regards description, for an item this will come from the supplied author's notes, or else (if there isn't an author's note) will come from the description of the associated collection (if any) or otherwise will be the first few lines of the item's main text file. Galleries have a descriptive text file, and photographs can have a description in a text file too, so a decent enough description can be worked out for those. Basically the framework does it's best to create really meaningful titles and descriptions for you.
When it comes to promo pages though there isn't any obvious way to automagically determine what makes a suitable title and description given the content of the page. So for Promo type sections you need to specify a suitable Title and Description.
Photo Section Configuration Items
Photo sections don't need anything further to define them.
Bespoke Section Configuration Items
Since bespoke pages are by definition basically unknown to the framework (aside from what they're called, where they live, how their promotions are styled) you don't need to specify any additional configuration parameters here. BUt if you have bespoke sections, you'll know what you're doing anyway...
Item Section Configuration Items
There are 8 additional configuration values specific to item sections:
Tag_Short set this to 'true' to automagically create a tag called 'Short'. It is intended for people who want to read flash fiction or short-form poetry. The shortest 10% of all content in the section will be added to this tag. It is quite expensive in processing time to create short tags, so I have disabled this (set the value to false for very large sections.
Tag_Long similar to the above, but intended for people who want to read something more immersive.
Tag_Video if the items in a section are primarily textual in nature (like poems, stories, articles...) and a lot of them have additional illustrating video you might want to automagically create a 'with video' tag; so that people can readily browse all poems that have a video (say).
Tag_Audio kind of like the above, but for audio!
Aggregate_Video if the items in a section are primarily videos (not words) then it doesn't make sense to automagically create a 'with video' tag (as in this section just about everything has video and the tag is no more useful than the section overview page that lists all items anyway). BUT the overview page only lists the videos in this section and the site visitor has expressely shown an interest in video by coming to this section. So it's useful to also offer them the opportunity to browse all the poems that have video aswell (or all the stories with video etc). This is a powerful feature wrt the site super-narrative as it encourages visitors to break-out of the section of immediate interest and pop-off to explore other parts of the site.
Aggregate_Audio you get it by now I should think...
Promo_Media when promos to content are automatically created the promo panel includes the first part of the text of the item, which can be optionally followed by the item's associated image (or media); which makes the promos look great! But if the promoted item is immersive text (like a story or an article) images and media can take something away from the content. Therefore the inclusion of images or media within the promo of the content can be suppressed by setting this item to false.
Group_Lines the framework ensures everything presented is semantically meaningful. This means that any blank lines in the source file are discarded - blank lines are not semantic, they really only add space for layout reasons. The layout of the content though is managed by the framework, not by the source content.
BUT it is common in poetry to use blank lines to seperate stanzas. To allow for this you can tell the framework that successive non-blank lines should be grouped together; with a new grouping started whenever a blank line is encountered by setting this value to true.
Some Practical Concerns
Apart from the special 'Aggregate_Video' and 'Aggregate_Audio' options just described, the framework will also always aggregate tags when it can. So if two different site sections use the same tag the visitor will be given a 'see also...' link in the list of items in this section's tag. This encourages 'side-journeys' - to get people out of one section of the site and into another one. We sectionalise the content to meet the needs and expectations of visitors, but in so doing we create barriers to their opportunity to experience the full scope of works. It's a trade-off for sure. Tags only group items in a given section, but if another section uses the same tag name, there is opportunity presented to jump sideways into that other section.
PLEASE NOTE - Regarding entries in th site-config.php file: All configuration items are either TEXT or FLAGS. TEXT configuration items must be enclosed in single quotes. FLAG configuration items must be set to true or false (lowercase and without quotes. Also take note of the use of commas to seperate items (the last item in a list doesn't need a comma!). Missed quotation marks and forgotten commas will be the source of most trouble when editing the site-config file.
DEBUG and IN_DEV:
$GLOBALS['DEBUG_STATE'] = false; $GLOBALS ['IN_DEV'] = false;
You can leave these well alone. IF you find you're in dire trouble, just not understanding why the site isn't behaving itself with respect to content you've upload, you can set the DEBUG value to true and the framework will dump out heaps upon heaps of information about what it is thinking, which can help in working out what's going wrong. Mostly you don't want it to do that...
The other flag (IN_DEV) is used during site development. It causes styling information (CSS) to be embedded within the pages, rather than linked as a file. This is useful when debugging styling on mobile devices - since get a phone to re-download a changed CSS file can be a real pain.
Top-level site sections should use either mass nouns (e.g. Poetry) or plural nouns (e.g. Poems). By definition sections clump a bunch of content together so the reference to them (their name) should not be singular in nature. 'Home' of course is a special case, live with it...
Also, do not use the names 'collection' or 'tag' for any item, collection, tag, gallery or photo. These two words have a special meaning in the framework's underlying structure and you will have trouble if you try and create a poem called 'tag' - sorry, that's just how it is. Anyway the world has enough poems called 'tag' (does it really? I'm gonna say 'yes').
You might wonder why I've used different naming for a section's content directory ('Branch') and its associated 'URL_Part' - e.g. the 'stories' site section uses the content directory 'stories2017'. This is by deliberate design. URLs are (or should be) immortal, once published never lost. This is the very spirit of the internet, one of it's great strengths over a real-world society with its capitalist predeliction for putting books out of print and its history of burning libraries down. We do though constantly, for all kinds of reasons, end up moving the underlying disk-based files around - maybe switching to a backup or preparing for a major site update. So these two things are best kept distinct. It also greatly helps when rewiring a URL to a disk structure - if URLs never map directly to an existing disk-based item it's easier to see that they should be routed through to the scripting engine. Anyway, the way the framework behaves, you see some odd stuff if you happen to use the same names in URLs as you do in the underlying disk structure. Take my word for it (maybe a better programmer has the delight of scoffing at this moment, m'eh I at least understand 'humility').
When reading content from a text file the framework modifies any links it finds to ensure that off-site links open in a new browser tab.
The domain.css file
There is a root-file called DomainCSS.css. All framework pages include this and you can use it to override the default styling of the framework. NOte especially that the <main> HTML tag (that every page has) will include a class specification equal to the filename of the item (or photo) that is being displayed. This allows special one-off styling rules to be created for each and any piece of content. Any additional context (like tag, or collection, or gallery) is also added as a class, so special styling for (say) any item of a given tag is possible.
Add additional font links into domain-head.php file.
See my next article to learn more about styling the content inside the text files that drive the framework: /articles/my-website-framework-3