Collection Builder for an existing WP website

[theheritagelab]

Hello @evanwill !

Firstly, a big thank-you to the team for developing such a wonderful tool! We've been looking around several options that suit our needs and finally settled upon the Collection Builder - Flexible Stand Alone version. We're glad to have discovered it!
We're hoping to build a microsite for our existing website which is hosted on Wordpress. We want to build the microsite to host a collection of Open Access content from India which is housed in GLAM institutions around the world.

1. would it be possible to use our existing website's theme for the new Collection Builder site?
   This is mainly for visual consistency.
2. We're not very familiar with Jekyll, so thinking of using a plugin to export the site to Wordpress. If we do so, how would we update our collection?

Lastly, very curious about ES version & wondering if that might be more suitable?

Looking forward to hearing from you :)

-On behalf of The Heritage Lab,
Medhavi

[evanwill]

@theheritagelab thanks for getting in touch! We are on academic summer break right now, so I apologize if communication is a bit slow.

I think CollectionBuilder-CSV sounds like a good fit for your project if you are trying to curate objects from many different sources. How many items would be in the collection?

However, keep in mind that CB-CSV is being actively developed right now (well, when we are not on vacation), so things are changing in the repository on a regular basis and there might be major changes in future. Since when starting a new project you create your own copy of the code and work from there, this shouldn't be a big issue, but just something to keep in mind. We have used it in production on a few recent digital scholarship projects, each one being pretty highly customized.

The ES version isn't fully developed yet and not tested in production. The ES template adds powerful server side search which could scale to larger collections. Since that search relies on a Elastic Search instance, ES projects go beyond the fully static web template, so there is more complication in setting up and maintaining your server.

For your questions:

1. theming-- the CB website is styled using Bootstrap, with almost all of it using default Bootstrap classes. If you start from that Bootsrap base you can customize the theme pretty easily and change the look and feel completely. Your heritagelab site seems to be a WordPress theme that is not based in Bootstrap. So the most likely option would be to customize the CB theme to complement your current site theme, mirroring the color and UI element styles. Completely swapping out the theme is technically possible, but would be fairly complex. Adding a theme is not like adding a WordPress theme and would involve editing many of the base layout files, javascript, and assets. A WordPress theme isn't directly compatible since those are based on their own conventions and dynamic PHP calculations.
2. export to WordPress-- I am not sure about this approach and don't know of plugins that would do that? CB is basically a Jekyll project template that uses the tools bundled in Jekyll to generate web pages based on your metadata. Jekyll builds out the site as static HTML which you then put on your server. WordPress is a content management system, so uses a database and dynamic processing with PHP to deliver content to users of your website. The static files of your CB site could be hosted by the same server that hosts your WordPress instance, but I don't think you would want to try to directly integrate them into WordPress. You asked how to update--CB projects have to be rebuilt any time you update the data. This can be automated, for example using GitHub Pages or Actions. You could host your CB project on GitHub Pages, which allows you to use a custom domain, so it would still look like it is hosted in same place as your WordPress (i.e. the URL domain is the same).

I hope that helps clarify the requirements and options. Let me know if it makes sense and your further questions!

[evanwill]

@FairlyNewHere this is another interesting error!
It is the base-font-family value which is causing a YAML parsing error in Jekyll. Your "_theme.yml" currently has the value:
base-font-family: 'Montserrat', sans-serif;

That looks okay--however, YAML sees the first set of single quotes 'Montserrat' as a quoted value, which is then followed by some invalid stuff--so the parser throws that strange error. To fix it, you will have to remove the single quotes, or add double quote around the full value you want to set for "base-font-family". Like:

base-font-family: "'Montserrat', sans-serif"

Note the ; semicolon at the end is not required.

[FairlyNewHere]

@evanwill aaaah. This is the annoying part of coding. Missing a ; or any other symbol just throws one off, despite getting the logic right. Talking about it in general, especially for the ones who're new to coding.
I did try several combinations of it before getting in touch with you. Even the one given in the documentation but the error persisted. Without the knowledge of YAML though, figuring this won't be possible. So thank you for that!

Moving on to the next query. We intend to customize the theme of CB page so that it mirrors the website.
I did see in the Bootswatch documentation that the themes are customizable according to the requirement. Would it be possible for you to shed some light on that? Here are the two basic overhauls that are required:

1. Buttons and the navigation bar at the bottom in "ffb500".
2. Some kind of font hierarchy or combination of fonts. (in case it's easily achievable)

Basically it should feel like the CB page is a part of the same brand. Let me know your insights on this!

[evanwill]

@FairlyNewHere yeah... all the details matter!

For theming it is possible to significantly alter the look and feel with out rewriting the core of the template--however, how far you get depends on how well you know CSS.

First, to start with the theme.yml has those "advanced" value you saw to change a couple basic options. Those just replace the colors of the top navbar.

Second, you can override or add new button colors using "config-theme-colors.csv". The template uses standard bootstrap button classes, mostly btn-info, btn-primary, btn-secondary. So if you want all the buttons using "btn-info" to be #ce0a2f instead of the standard, in "config-theme-color.csv" add your new color to override would look like:

color_class,color
primary,
secondary,
success,
info,#ce0a2f
warning,
danger,
light,
dark,

See the docs, https://collectionbuilder.github.io/cb-docs/docs/customization/config-theme-colors/

To go further, you can add new CSS classes targeting the existing template elements. Any CSS you add to "_sass/custom.sass" will over ride all other CSS (bootstrap and collectionbuilder) on your site. So if you understand CSS, you could use this to implement different fonts for different heading classes for example.

You can also go into the template code components and change/add bootstrap classes. For example to change the footer background color, you would edit "_includes/footer.html". The first line of the file uses bootstrap bg class to set background:
<footer class="bg-dark pt-4 container-fluid {% unless page.layout=='map' %}mt-3{% endunless %}">

So you could swap out bg-dark for bg-white. However, then you will notice that the text in the footer all uses the text-white class, so you will have to remove that if you go to a light background color.

Just keep in mind that it is bootstrap 4! https://getbootstrap.com/docs/4.6/getting-started/introduction/

[FairlyNewHere]

@evanwill So we went through the above suggestions that you've shared. Points one, two and the footer changes mainly are related to colors. They did take us a bit further in our theming requirements but it mostly worked as color swatch changes.

What we intend to create is a different looking landing page altogether with similar features on the other parts of the website. That's why it would be great if you could shed some more light on how "_sass/custom.sass" works. Maybe you can take the example of the Digital Library of Idaho page wherein you've used custom CSS (as seen in the repo).

Another point that we were wondering about - Is it possible to include Bootstrap templates directly into the CB? Something like this or this? I believe that they are supposed to be a single page websites. However, these are the examples of what we think our website could look like. Do let us know to which extent is this possible.

[evanwill]

@FairlyNewHere it is possible to completely swap out the theme--you won't be able to just drop one of those themes in and have it work, but you could pull in elements from them to tweak with is in the default CB.

For re-designing the home page, you start editing the Jekyll layouts in "_layouts". The CB-docs introduce the basics of tweaking the default Home page, https://collectionbuilder.github.io/cb-docs/docs/pages/home/
but you could go further and completely re-write how that page looks.

For complete re-themeing, the default layout controls the modular parts on every page, i.e. the banner, nav, and footer, so you can look there for what file you need to tweak. The modular parts are all includes in "_includes" folder.

For example, Digital Library of Idaho makes some tweaks to "_includes/collection-banner.html" to create the dark top to the page, "_includes/collection-nav.html" to change the home page banner, and "_layouts/home-infographic.html" to redo the home page contents. The '_sass/_custom.scss" has a few extra classes to support the colors, but nothing much (most of the css there is for the custom timeline page). There isn't like a different bootstrap theme or anything added--just tweaks to the CB template and rearranging some things.