MyBB Community Forums

Does anyone have a semi comprehensive list of the sections for color editing? or a visual road map to simplify the complex collection of sections which make up the base template?  Rather than post multiple new threads asking "how do I change the color of this..." It would extremely helpful to just know what the heck you all have named the various sections of the template. 

Today is 4/25/2020 and I just watched a YouTube video posted on how to build your own template and change colors in the MyBB platform which was dated "2013" (Seven fricken years ago!!!) That was the most recent video posted. Since then, half of the stuff the guy in the video clicks on, doesn't even exist anymore. One perfect example is the fact that he says: "To change the color of this part of your template, just click "Panel". In actuality, there is no single link titled "Panel", but 12 links which are currently titled:

#panel.lower
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active
#panel .lower ul.panel_links
#panel .lower ul.panel_links a.admincp
#panel .lower ul.panel_links a.modcp
#panel .lower ul.panel_links a.usercp
#panel .lower ul.user_links
#panel .lower ul.user_links li a
#panel .upper
#panel .upper a.login, #panel .upper a.lost_password
#panel .upper a.logout
#panel .upper a.register

How in the hell does anyone who's new to this supposed to figure out which one of these actually works, given that there is no longer a simple "panel" selection?  Is there anyone out there who has an easy to follow, visual road map which clearly shows everyone which line of code changes a corresponding section's background, fonts, containers, wrappers, etc.?  I've been clicking onto link after link for the past 2.5 hours now, randomly entering color codes for nearly everything I could click on, then refreshing the page just to see what changes took place. 1/2 the time it didn't even update at all. 
I really want this to work. Mostly, I just want to change three major portions of the theme, shown in the attached screenshot.

Most modern browsers have a thing called Inspect Element which will tell you the name of what you are looking to edit.

E.G. Right click on what you want to change (the "blue section" for example) and then you will see which CSS properties is assigned and you can visually edit them in the editor and play about with the colors. Then log into your ACP and in Inspect Element it will tell you which file you need to edit.

(2020-04-25, 10:05 PM)Ben Wrote: [ -> ]Most modern browsers have a thing called Inspect Element which will tell you the name of what you are looking to edit.

E.G. Right click on what you want to change (the "blue section" for example) and then you will see which CSS properties is assigned and you can visually edit them in the editor and play about with the colors. Then log into your ACP and in Inspect Element it will tell you which file you need to edit.

Ben,

I have definitely been using the Inspector element and even the firebug tool in FireFox, but the way the forum is built, the actual references you find in the inspection tools are not the same names supplied in the drop down options for the color editors. Secondly, the tools cannot correctly find (all of the proper names). (For example: it will simply say: "div"  and highlight nearly a third of the page, rather than tell me the name of a specific section.) I am very clear on how to use a website inspection tool.

---

Also, the blue section in the inspection tool specifically says: "div class = "title". There is no ("title") option for editing in the theme color changing tool.

There is 3 columns in the image, the middle one shows you the CSS element that you are looking to edit.

"div class = "title" is HTML not CSS hence why your not finding the correct atribute to edit. You may find it easier to use the Advanced View in the ACP for the CSS file and search that way.

I would recommend to go for the advanced editor if you know the basics of CSS.