Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pragma, cleanup formatting and links #1242

Merged
merged 1 commit into from
Aug 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions pkp-theming-guide/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@
* [Health Sciences Theme](theme-healthsciences.md)
* [Immersion Theme](theme-immersion.md)
* [Manuscript Theme](theme-manuscript.md)
* [Pragma Theme](theme-pragma.md)
* Advanced Techniques
* [Passing Data to Templates](advanced-custom-data.md)
33 changes: 16 additions & 17 deletions pkp-theming-guide/en/theme-bootstrap3.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ These OJS sites demonstrate existing Bootstrap child themes:
- [Sandstone](https://demo.publicknowledgeproject.org/ojs3/demo/index.php/boot6)
- [Cyborg](https://demo.publicknowledgeproject.org/ojs3/demo/index.php/boot4)

## Install Boostrap3
## Install Bootstrap3

The **simplest** way to get the Bootstrap3 theme is to download the [latest release](https://github.com/pkp/bootstrap3/releases) from the development repository. Unpack the `.zip` file and move the `bootstrap3` directory to your OJS installation at `/plugins/themes/bootstrap3`.

Expand All @@ -37,15 +37,15 @@ Since the Bootstrap theme is just a base, it will need a bit of work to fully im

To start, explore the base Bootstrap variables file:

- [plugins/themes/bootstrap3/bootstrap/less/variables.less](https://github.com/pkp/bootstrap3/blob/master/bootstrap/less/variables.less)
- [plugins/themes/bootstrap3/bootstrap/less/variables.less](https://github.com/pkp/bootstrap3/blob/main/bootstrap/less/variables.less)

Every color, font, etc., is declared here and each of the different bundled themes essentially just overrides these variables. For instance, here's the Flatly theme's variables file:

- [plugins/themes/bootstrap3/bootstrap-themes/flatly/variables.less](https://github.com/pkp/bootstrap3/blob/master/bootstrap-themes/flatly/variables.less)
- [plugins/themes/bootstrap3/bootstrap-themes/flatly/variables.less](https://github.com/pkp/bootstrap3/blob/main/bootstrap-themes/flatly/variables.less)

And then it includes just a little bit of additional LESS code to tweak a few more things:

- [plugins/themes/bootstrap3/bootstrap-themes/flatly/bootswatch.less](https://github.com/pkp/bootstrap3/blob/master/bootstrap-themes/flatly/bootswatch.less)
- [plugins/themes/bootstrap3/bootstrap-themes/flatly/bootswatch.less](https://github.com/pkp/bootstrap3/blob/main/bootstrap-themes/flatly/bootswatch.less)

## Child Theming the Bootstrap3 Theme

Expand All @@ -68,11 +68,11 @@ You can then use the `modifyStyle()` method from the [Theme API](theme-api.md) t

Now your child theme will load an additional LESS file, `styles/variables.less`, from your theme's file directory. You can override the Bootstrap 3 variables in that file.

Find the [Bootstrap 3 variables file](https://github.com/pkp/bootstrap3/blob/master/bootstrap/less/variables.less). Copy the contents of that file into your own theme at `styles/variables.less`. Then modify them however you'd like.
Find the [Bootstrap 3 variables file](https://github.com/pkp/bootstrap3/blob/main/bootstrap/less/variables.less). Copy the contents of that file into your own theme at `styles/variables.less`. Then modify them however you'd like.

Here is an example of a modified set of colors in my new `styles/variables.less`.

```less
```
@gray-base: #012434;
@gray-darker: lighten(@gray-base, 13.5%);
@gray-dark: lighten(@gray-base, 20%);
Expand All @@ -96,17 +96,16 @@ To add a new swatch to the Bootstrap3 theme, you need to set up all of the neces

This example will demonstrate how to use the `flatly` swatch as a basis for your new swatch.

1. Copy the folder at `plugins/themes/bootstrap3/bootstrap-themes/flatly` to `plugins/themes/bootstrap3/bootstrap-themes/myswatch`
1. Copy the folder at `plugins/themes/bootstrap3/bootstrap-themes/flatly` to `plugins/themes/bootstrap3/bootstrap-themes/myswatch`.
2. Delete the existing `LICENSE` file and replace it with your preferred GPL-compatible license.
3. Delete the contents from the following so that the following are empty files:
```
plugins/themes/bootstrap3/bootstrap-themes/myswatch/bootswatch.less
plugins/themes/bootstrap3/bootstrap-themes/myswatch/variables.less
```

4. Rename `bootswatch.less` to `myswatch.less`

5. Copy the file `plugins/themes/bootstrap3/styles/flatly.less` to `plugins/themes/bootstrap3/styles/myswatch.less`
4. Rename `bootswatch.less` to `myswatch.less`.
5. Copy the file `plugins/themes/bootstrap3/styles/flatly.less` to `plugins/themes/bootstrap3/styles/myswatch.less`.
6. Edit `plugins/themes/bootstrap3/styles/myswatch.less`:
Modify the existing references to files in the `flatly` theme with references to your new myswatch.
```
Expand All @@ -115,19 +114,19 @@ Modify the existing references to files in the `flatly` theme with references to
@import "../bootstrap-themes/myswatch/myswatch.less";
```

7. Edit `plugins/themes/bootstrap3/BootstrapThreeThemePlugin.inc.php` and add a new option entry for your child theme, e.g. `'mytheme' => 'plugins.themes.bootstrap3.options.bootstrapTheme.myswatch',`
7. Edit `plugins/themes/bootstrap3/BootstrapThreeThemePlugin.inc.php` and add a new option entry for your child theme, e.g. `'mytheme' => 'plugins.themes.bootstrap3.options.bootstrapTheme.myswatch',`.
8. Edit `plugins/themes/bootstrap3/locale/en_US/locale.xml` and add a new locale entry for your new theme. For example:
```
<message key="plugins.themes.bootstrap3.options.bootstrapTheme.myswatch">My Swatch</message>
```
```xml
<message key="plugins.themes.bootstrap3.options.bootstrapTheme.myswatch">My Swatch</message>
```

You may wish to alter the copyright and licensing information to your own specifications in the LESS file as well. For example:
9. You may wish to alter the copyright and licensing information to your own specifications in the LESS file as well. For example:
```
/**
* @file plugins/themes/bootstrap3/myswatch.less
*
* Copyright (c) 2014-2016 Simon Fraser University Library
* Copyright (c) 2003-2016 John Willinsky
* Copyright (c) 2014-2024 Simon Fraser University Library
* Copyright (c) 2003-2024 John Willinsky
* Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
*
* @brief Stylesheet for the My Theme Bootstrap theme.
Expand Down
2 changes: 1 addition & 1 deletion pkp-theming-guide/en/theme-manuscript.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ Manuscript is a clean, simple theme with a boxed layout that mimics a paper docu

The theme really shines when you configure your journal without a sidebar, benefiting from generous spacing that brings focus to the main content. But it looks great regardless of whether or not you use the sidebar. Just like the default theme, you can tailor the colours to match your journal’s branding.

Installation and configuration instructions are available in the theme's [style guide](https://github.com/pkp/defaultManuscript/blob/master/readme.md).
Installation and configuration instructions are available in the theme's [style guide](https://github.com/pkp/defaultManuscript/blob/main/readme.md).
7 changes: 7 additions & 0 deletions pkp-theming-guide/en/theme-pragma.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Pragma Theme

Pragma is a minimalist OJS theme inspired by early periodicals’ tables of contents featuring a bold use of a monochromatic colour palette.

[This OJS site](https://demo.publicknowledgeproject.org/ojs3/demo/index.php/pragma) demonstrates the Pragma theme.

Installation and configuration instructions are available in the theme's [style guide](https://github.com/pkp/pragma/blob/main/README.md).
1 change: 1 addition & 0 deletions pkp-theming-guide/en/themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ These pages include a description of each theme and links to a demonstration sit
- [Health Sciences](theme-healthsciences.md)
- [Immersion](theme-immersion.md)
- [Manuscript](theme-manuscript.md)
- [Pragma](theme-pragma.md)
Loading