Want to learn to mod vbulletin

[Muerte_Rigurosa]

Hi, I'm new with forums boards. With a small group of people we want to set a forum to complement our discord group. To be able to share the things we write, draw or simply have the traditional forum interactions.

I will help with the administration of the forum, so I would like to learn how to build themes and plugins.

A friend help me to have a testing forum on my computer with docker, is a vbulletin 5.75 .

First I would like to create a theme, I have an idea on mind on things I would like to try, but I don´t know where to go to edit things. I read that to edit css is in CSS Templates, but from there I don´t know the css I should modify and the ids of what I want to modify (maybe looking on the developer tools of the browser).
For example, what does it mean {vb: stylevar left} ? I have seen some css files and is common to find that kind of codes.


Is it possible to use javascript on header or css animations? and transparency on panels?

Is it absolutely necessary to know php to build a theme with the characteristics I have in mind or this time I'm ok?
I know that for plugins it will be necessary and I will have to learn PHP, but for more complex themes is it necessary?

I work programming on javascript (with Jquery), jsp and java, and have some notions on CSS so maybe here only javascript and CSS would be useful.

If you know some tutorials or webs to read and learn more about vbulletin modding, it would be appretiated.

Thank you

[glennrocksvb]

This is a tutorial video made by vBulletin on how to customize the forum using stylevars. This video was made 11 years ago. Although it was for an older vB5 version and it was using Firebug, you can still follow the same principle using Chrome's built-in DevTools (debugger/inspector).

If there's no stylevar associated with an element, then you can use your own custom CSS in css_additional template.

[Muerte_Rigurosa]

This is a tutorial video made by vBulletin on how to customize the forum using stylevars. This video was made 11 years ago. Although it was for an older vB5 version and it was using Firebug, you can still follow the same principle using Chrome's built-in DevTools (debugger/inspector).

If there's no stylevar associated with an element, then you can use your own custom CSS in css_additional template.

Hi, thanks. I could play with the css in that way. Still I need to to make more changes(that images are only for testing purpose), but I could make a progress.
I have some problems with some parts. For example, is it possible to edit the css that appears with for example id="forum19", id="forum20", id="forum21" in a way that if I add other subforum, authomatically it applys the style, or is necessary to be adding any aditional id forum to the css code? (I saw the forum+number can be a header or the part that is between it, so I don't know how handle it in a more authomatic way).

Other problem I'm having is with the menus that are over the header(notification, messages, user), if I try to display the submenus they appear back the header so I can´t use them. I'm trying with z-index, buy I couldn't found yet a way to make it work.

Thanks

[glennrocksvb]

I have some problems with some parts. For example, is it possible to edit the css that appears with for example id="forum19", id="forum20", id="forum21" in a way that if I add other subforum, authomatically it applys the style, or is necessary to be adding any aditional id forum to the css code? (I saw the forum+number can be a header or the part that is between it, so I don't know how handle it in a more authomatic way).

Find a common class name in those tags - which is "forum-item". Use that class name in the CSS rules instead of the id.

[Muerte_Rigurosa]

Thank you, I will try to find it