Question Everything Wrong with Kunena 5 + Crypsis

I'd like to take a minute to provide some feedback on everything that I think is wrong with the Crypsis template, and why barely anyone has released custom templates based on it.

The primary issue with Crypsis is the terrible CSS class support for custom styling. Here's an example:

Let's say I want to restyle/fix the broken Search box on Crypsis:


Seems to be a simple padding/margin/height issue right? Let's Inspect the HTML/CSS and see what's the problem:


First issue here is the top level organization - you have your top level <div id="kunena" class="layout">, great, but then one level down all rhyme and reason is thrown out the window. You have a navbar background div with no children, followed by a navbar div (why not group them?) followed by a breadcrumb. None of these have IDs, but they do at least have a class so I can select by the .navbar or .breadcrumb class to style those, so let's continue...

A form with id "jumpto" just hanging out here, no grouping and no parent div - that one will be fun to style if you want to move it anywhere else, say floated inline with a header or something.

Now you have a div with class "kfrontend" - finally some grouping, although it's all clumped together. We'll come back to this one, let's first finish looking at the top level.

<div class="row-fluid"> ... can anyone tell what that container is going to hold without looking at Inspect Element highlighting? No? It's for the pagination and the search box. So selecting that div for styling is going to be a bit of a challenge without a unique ID or descriptive class that isn't used everywhere, isn't it?


Maybe we can style it via one of it's unique child elements...


Looks like there's finally a class called "form-search" on the input box itself. But why is the form under an h2 element? Doesn't seem like a header to me... no matter, let's fix this height bug.

Works great, but what if that class is used for search boxes elsewhere that aren't supposed to be that height? My options are either adding a .kfrontend or .form-search class as well, hopefully those aren't used too!

How about we also remove the 20px margin from that h2 wrapping the search? Seems like too much white space to me... But how do I add that margin-bottom: 0 to the h2?


There's no way for me to select that h2 through a unique class, without using nth-child selectors from its parents. And doing that would depend on Kunena never adding/removing DOM elements or rearranging things.

Starting to see why creating Kunena Templates / fixing Crypsis is such a royal pain? These examples are literally everywhere throughout the template. There's so little flexibility in positioning of elements because of the lack of CSS classes / IDs on parent elements, completely inefficient grouping of features, and poor implementation of bootstrap-based classes and layouts.



I'm not trying to make anyone feel bad about this - I understand a ton of development time went into it on limited resources, but adding one solid CSS/HTML dev to the team could sort out a lot of these issues pretty quickly and make it a whole lot easier for template developers to work with the software.

Kunena is open source project, so if you have fixes please commit to the project: github.com/Kunena/Kunena-Forum