Bootstrap 3 theme for OJS 3

Community Showcase
1

Now that OJS 3 is available I’ve prepared version 1.0 of the community-organised Bootstrap 3 theme.

You can download the theme and read the installation instructions.

What is it?

Bootstrap 3 is a popular HTML/CSS/JavaScript framework for building websites. The Bootstrap 3 theme is a community effort to maintain an OJS 3 theme that implements bootstrap components, so that developers can take advantage of existing resources to rapidly customise the design of their OJS 3 journal.

Read about the project aims.

What does it do?

The Bootstrap 3 theme for OJS 3 provides a solid foundation for building custom themes using the components and techniques provided by Bootstrap 3. This should make it easier for developers to implement free and commercial third-party themes available on the web.

The theme comes bundled with more than a dozen freely available Bootstrap themes you can activate right away. For developers, there are thousands of Bootstrap themes available for purchase at sites like {wrap}bootstrap which you can use to quickly build custom child themes.

Built for developers

The Bootstrap 3 theme for OJS 3 is built for developers. It has a repository on Github and we’re interested in receiving community contributions.

I’m not a developer. Can I use this?

It comes bundled with several styles you can choose from out-of-the-box. You will still need your web administrator to install the theme, but you can then activate it and choose the style you’d like.

Keep in mind that this is intended as a base theme for developers. Although each style will give your journal a different look, you may find that the spacing and layout still needs some tweaking to look its best.

Use this at your own discretion, but keep in mind that this is a community project which may not serve your needs.

Examples

Here are a few examples from the free styles which come bundled with the theme.

Here’s a screenshot of the full list of bundled themes:

13 Likes
2

v1.0.1 of the Bootstrap 3 theme has been released.

This version brings a number of fixes as well as compatibility with OJS 3.0.1. Read the changelog.

Download v1.0.1

This version is only compatible with OJS 3.0.1 and is not compatible with OJS 3.0.0. The readme includes compatibility information for the release versions. Make sure you’re using a version compatible with your installation of OJS.

3 Likes
3

Hi @NateWr,

Thanks very much for that. You say it is only compatible with OJS 3.0.1.
So the question is whether our custom themes be compatible with every new OJS versions in the future? And what should we do to ensure their compatibility?

1 Like
4

That’s a great question, @Ph_We, and I don’t have a full answer. Because OJS 3 is still pretty new, it’s likely to be a bumpier ride over the next 12 months than it will be in the long-term future.

In this case, OJS 3.0.1 introduced support for localized cover images. So you can have different cover images for each language if you run a multi-language journal. Unfortunately, this changes what’s returned with the access function $article->getCoverImage() from a string to an array. It needs to be updated to $article->getLocalizedCoverImage() in your themes.

We don’t really have a system in place for recording and publishing breaking changes like this from version to version. I think that’s something we’ll need to work on over the next few release cycles to improve the experience of building and maintaining themes.

5

Hi @NateWr,
Thank you very much for the detailed answer. We’d better stick to the standard theme then :slight_smile:

1 Like
6

Hello sir,

I am using paper theme of Bootstrap3. When I go into the article’s page, I can not see the word Downloads (Usage Stats plugin activated) above the bar chart (shows the number of downloads). Please let me know. You may visit the website as well. [link removed by request]
The Downloads should be below the abstract. Thanks for your hardwork.

7

Hi @varshilmehta,

Rather than posting on a resolved (and only somewhat related) thread, could you post your question as a new topic? That’ll help keep the forum organized.

Regards,
Alec Smecher
Public Knowledge Project Team

8

Hi @varshilmehta

You seem to have the same problem as described here: UsageStats shows empty graphs - #7 by bozana

Best,
Bozana

9

What could make a theme incompatible between versions?

The list is quite long and I think it never be fail safe, but IMHO theme compatibility problems could be significantly reduced if we build new html/css based on standards (and here I will also accept “our own standard” as an standard). :slight_smile:

Let’s say that we develop a plugin to include covers in home, so html changes, but it won’t be a big problem if the classes and IDs are consistent.

10

Hi @marc,

Themes are created by modifying smarty front-end. So if variables in .tpl are changed, conflicts will arise. This problem will certainly affect and theme that I use. Only way for successful OJS update is to compare changes in new version with old OJS version and make changes accordingly. I doubt that there will be major modifications in the future because it would be a huge amount of work for developers to adapt all this. I hope :slight_smile:

11

Hi @Vitaliy,

I have plenty of theme modifications in my templates, so on each version migration I’m comparing old and new code, but I’m starting to think this is not the best way of working…

Just wondering if we can find a better approach.

Let’s see two cases:

a) A plugin:
You develop a plugin that (for instance) adds a new block to your OJS’ side bar with HTML and styles. In this case, if OJS API is the same, the module will keep running as expected and the new styles (if you fit to a style guide -aka. bootstrap-) will be applied.

b) A dirty hack:
If you fork OJS code, changing the core, on every new release you will need to apply the patch with the modifications, but again… if you fit to an style guide, theming won’t be affected.

Does it make sense? What is your approach?

Cheers,
m.

12

Greetings @marc,

Theme is added as a theme plugin in my case and I change smarty code inside plugin directory (smarty front-end). But it doesn`t guarantee that in the future OJS versions variables on smarty back-end would not change. But I think it is very unlikely after OJS3.1 version.

13

hi, I would like to ask about theme in ojs 3.0.1

when I change the default theme to bootstrap 3, there is so many changes to my ojs site.
There is new block named ‘aims and scope’, and others strange blocks. And when I click the block it linked to another ojs site. Why it happened? and what should I do?

thank you.

14

Hi @Mr_dikiachmadp,

Could you post your question as a new subject rather than reopening this old conversation? That’ll help keep the forum organized.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like
21

If some bootstrap theme exist it does not necessarily means that it is compatible with OJS and other web applications that use bootstrap framework.
I contacted some developers of bootstrap themes and I have been told that it would be possible to make that for OJS.

22

When using third-party themes not developed specifically for OJS 3, there are a few things to keep in mind:

  1. The HTML markup of the Bootstrap3 theme sticks as closely as possible to the core Bootstrap markup. So if your third-party theme just uses CSS styles, it shouldn’t take too much work to slot it in.

  2. The integration will still take a little bit of technical work. You can see how the Bootstrap3 theme bundles several different “bootstrap themes” within it here. And these are turned into theme options here. Finally, the selected theme’s stylesheet is loaded here.

Your other option is just to take all the templates from the Bootstrap3 theme and build your own theme. :+1:

1 Like
23

Te agradezco la respuesta. Quiero usar un tema de bootstrap, pero mi único inconveniente es que quiero que mi logo aparezca en el centro del banner y que abajo esté el menú de navegación y no logro hacerlo. POr eso quería saber si alguien me puede colaborar con un código CSS para lograr este objetivo, puesto que yo no soy una experta.
Gracias por tu gentil ayuda.

25

Hi @NateWr,

why this theme does not appear in Gallery, like defaultManuscript?
is because this is a “community” theme, not an “official theme” or something like that…

26

Hi @t4x0n,

Yes, something like that. It’s really intended as a “base” theme on top of which customizations can be made. It’s been used without customization, too, but it was originally intended as a developer tool rather than a finished theme.

27

thanks for your reply @NateWr,

will be very cool if you could add an option for change between wide and boxed aspect, this will be a very cool option :wink: (the boxed aspect of manuscript theme is very nice)