MyBB Community Forums

Hello again!

I have decided to cave and do a little customization myself while I hunt around for a professional. That said, I need some help creating a theme! I have some basic knowledge on CSS/HTML, not so much on queries, JavaScript, and PHP. I am currently reading MyBB’s documentation on themes, but it seems very lackluster. Hence, I am asking for help.


1) Is there a base version of MyBB’s theme stripped of any styling? Perhaps it could be a good starting point… IF NOT, where do I even start? I have a mock-up idea already.

2) Any good resources on responsiveness/flex boxes for mobile-friendliness?

3) Any resources on what classes go where? (Generally)

4) Variables. I know there’s a guide on them (and I lost the link lol), but I’m stiiiill kinda lost there. Any deep dive on this would be great.

5) Is there a way to make coding easier? Doing all of this in browser and typing everything lowkey sucks… but it’s apart of the gig. Maybe there’s something that you can press a button and have it auto-complete classes for you? I don’t know.

6) Any do’s and dont’s of coding a theme? How can I make it clean and not a pain in the lime for other coders to read?

7) PHP and template conditionals. What is this useful for? How to learn it?


I have so many questions, but I’ll leave it at this for now.

Any tips, resources, guides, and more would be appreciated. Thank you!

In order to make it responsive, each template will need to be rewritten using <div> tags as opposed to the current <table> tags. Tables aren't responsive. It's quite a big undertaking transforming even the basic default style into a responsive theme.

Tables

<table>
<tr>
<td class="your_class">
<!-- content here -->
</td>
</tr>
</table>

Divs 

<div class="row d-flex your_class">
<div class="col">
<!-- content here -->
</div>
</div>

I would look at implementing Bootstrap (https://getbootstrap.com/) using either a CDN or building your own and upload to your server. Detailed instructions for implementing Bootstrap into your site can be found here: https://getbootstrap.com/docs/5.3/gettin...roduction/

It comes loaded with classes, flex boxes, components and is easily and highly customizable.

I would also consider installing Template Conditionals: http://mybbhacks.zingaburga.com/showthread.php?tid=464

Conditionals are a great way of styling your theme. It allows you to place elements where they aren't usually visible in the MyBB core.

Example conditional

<if $thread['sticky'] == '1' then>sticky<else>non-sticky</if>

There's no 'magic' button. It has to be done by hand, it takes time, but the end result is worth it. In order to make your own theme, most things can be accomplished using CSS/HTML. PHP knowledge is only really needed if you plan on making changes to the core or using basic conditionals to add/remove elements or styling.

I see. That makes sense as to why the upcoming update's theme will be responsive, but not the current one.

So, to my understanding, Bootstrap is a set of premade responsive codes that work with all platforms/screen sizes, yes? If so, why is a CDN needed to upload it to the server? Along with this, any suggestion for a starting point?

Since I do not have much experience in PHP, can you explain the template conditionals modifications a bit more? From what I understand, your code is specifying that one thread is stickied, while the rest are not.

I will try my best! <3 I am looking forward to learning. If I ask a lot of questions, I do apologize, but I want to get this right for not only myself, but my users.

(2024-02-06, 12:36 AM)StarredSkies Wrote: [ -> ]So, to my understanding, Bootstrap is a set of premade responsive codes that work with all platforms/screen sizes, yes? If so, why is a CDN needed to upload it to the server? Along with this, any suggestion for a starting point?

Since I do not have much experience in PHP, can you explain the template conditionals modifications a bit more? From what I understand, your code is specifying that one thread is stickied, while the rest are not.

I will try my best! <3 I am looking forward to learning. If I ask a lot of questions, I do apologize, but I want to get this right for not only myself, but my users.

Yes. Bootstrap is basically a ready-made, component-rich platform that allows you to build and style in relative ease.

Using a CDN allows you to code instantly using Bootstrap's basic theme and component system. But if you want to change the theme (colors, .sass styles, etc) you're best off building your own theme and uploading it to your server, which you can do here: https://bootstrap.build/

For instance, if you look here (https://getbootstrap.com/docs/5.3/gettin...roduction/) you'll see all the components that have been built and are ready to be implemented into your site by simply calling its class. For example, if you want to make a card, you'd simply add this code to your page:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

That will then display a card with your required content that looks like this:



That's exactly what that conditional is doing. For instance, the way I've used that particular one is to render a border around the thread if it's recognised as a stickied thread. You can see it here: https://www.curvesui.com/forumdisplay.php?fid=6

Template conditionals do require a little knowledge of PHPs variables. Here is a list of some of the variables available. If they aren't listed, or are perhaps outdated, you'll need to manually explore the file you're attempting to pull from and add the variable to the conditional.

https://community.mybb.com/thread-152105.html