Theme for Datenstrom-Yellow 0.8.3
Based on the great design work of the Datenstrom team and Martin Blomgren with their theme Clarity
- Download the theme and unzip the zip file.
- Open the extension.ini file
- Copy the files to the respective locations indicated in extension.ini:
system/extensions-system/themes-system-layout - Adapt the theme
- Change the default theme to `system/extensions/yellow-system.ini
Redefined the structure of the following pages with the layout and tag elements according to the model
All basic layout options are in the delta.css file.
By default it is the one that would correspond to the first image, with a horizontal menu bar. In pages with scrolling, it is fixed at the beginning of the page; so that it moves together with the page, the nav element must be modified in delta.css with the position: absolute; property. To leave the vertical navigation bar as active it is enough to rename the files delta.css as delta-old.css and the file delta-vertical.css as delta.css.
The footer is in the footer block; on pages without scrolling, it is repositioned at the bottom of the window with a js function.
Danestrom-Yellow's option for the home page is to match the first content directory (default 1-home) and open the default page.md file. Putting an entry with the blog name addressed at the same point as the first menu entry would be redundant, so the blog title is not shown, but the blog name is assigned to the title of this first page 1-home/page.md.
To indicate ownership of the page, layouts/delta-footer.html must be modified
The width of the page elements adapt to the width of the window. When the window is less than 960px the margins are reduced and if there was a frame with the label aside it would stop being floating and the main would go to the bottom.
In an even smaller window size the social media options would not be visible.
For the printing of the content of the page only the logo and the title of the page, the content of the main and the mention of copyright will be printed.
The default page template, delta-default.html, contemplates a single column, with no indication of the page title indicated in Title. All visualization must be indicated in the body of the page, including titles, subheadings, text, images, ...
To control the display of pages in the menu the Status entry in the page header must be used. With the value Status: unlisted the page would not be visible from the menu, but would be accessible with a link.
To add a sidebar frame, it is enough to create a block labeled aside with the desired content below the main block of the form; it will be automatically created floating and with the size in which the blog template was created.
Consider two columns, one main (main) for entries and a second as a sidebar, with information about authors, entry tags,...
There is a set of text strips commonly used in blogs that have not yet been incorporated into internationalization. Meanwhile, see how to add these entries to the configuration file.
So that the sidebar column does not appear, it is enough to delete the call to delta-blog-sidebar.html in each of the two blog templates There are two basic blog templates.
The first is delta-blog-start.html which generates two types of output:
- Entry to the blog with display of the latest entries
- Display of entries subject to search by tag or author
In the entries it is convenient to put the [--more--] tag after a few sentences so that only the first part is shown in these summary pages.
These post relationships do not display each post's share option or tags.
The sidebar column shows the bolded entry of the 9-about section, the 'recent entries', 'Tags' used and 'Authors' with an indication of the number of appearances. This entire column is generated with the delta-blog-sidebar.html template
In the main block, in the case of showing the search by tags or authors, an icon with the corresponding category (tag or author) and the search item will appear in the title of the section.
The delta-blog.html template generates the output of display an entry. It includes the title of the post, the author, the date of publication and the social networks where the post is shared, the body of the post and its tags.
The author reference includes a generic author icon that can be changed to a custom author icon with their image, as provided in the delta-blog.html template. The image must have the author's name without spaces with the .png extension in the media/thumbnails/ folder.
The Share with entry includes 3 social networks and copy link.
The entry footer includes the assigned tags.
The delta-navigation.html menu generation template includes a call to the social media delta-socialmedia.html template and they are included in the right menu bar with icons. The references of each social network must be updated with the corresponding hashtags. Only those references where it is present should be included.
The delta-blog.html template includes for each post the option to share with social networks with the delta-blog-share.html template. This template has been prepared for sharing with facebook, twitter and linkedin, as well as copying the page link.
It is a minimal script with only two functions:
- Move the footer block to the bottom of the window if the page does not cover it all.
- Show a 'goTop' button that should allow you to move to the top of the page.
To make use of the API functions you should add the entries to system/extensions/yellow-language.ini:
BlogShare: Share with BlogRecent: Recent entries
BlogAuthors: Authors
BlogTags: Tags
BlogYear: Year
BlogAuthor: Author
BlogTag: Tag
Alternatively tags will appear and have to be replaced in the respective pages of the system/layouts directory
More information in Datenstrom Yellow Help and especially in Datenstrom Yellow API