[GUIDE] How to edit any part of the theme with ease!

[Hanakin]

Editing a theme is actually alot easier than it appears if you are just trying to make a simple color change or add a border etc...

1. Install Google Chrome(Firefox works but too but the steps are different) if you do not already have it installed
2. Load up your forum with the theme you wish to edit.
3. Navigate to the page and the section where you wish to make a change
4. Right Click on the element you wish to change (For Exp lets change the color of the rules text)
   Screenshot 2017-06-06 08.51.44.png
5. In the menu that comes up click Inspect
   
   This will open the Google Chrome Developer Tools. Its an in browser editor that tells you everything about how a page is rendered and allows you to make changes to it.
   
   Screenshot 2017-06-06 08.52.27.png
6. You can customize the display of it to be docked in the browser at the top or side, or in a new window like the above screenshot by clicking the menu icon in the top right
   
   Screenshot 2017-06-06 08.57.35.png
7. There are two sections to it the left side is the html for the page. You will see a highlighted line which is the line related to what you right clicked on in your browser. You may need to refine this by manually selecting the specific html you want to edit in this window.
8. The right side displays all the css related to the selected html tag. Its in a tree type fashion as css is a cascading language which means that it inherits. Each class here is layered from bottom to top most layer. This may be confusing as it also has to do with something called specificity. This is just a big word that means weight given to a type of css selector.
9. You will notice that in our example the top most css is applied to the html tag itself as this has the highest specificity. There are a couple of these, but If we work our way down we find div.rules
10. This class is applying a background color and a text color. This seems to be what we are looking to edit.
11. On the right side you will see something that looks like colours.css:306 This is telling us that you can find this rule on line 306 of the colours.css file.
12. Also of note if you look just above the class you should see a grey bar with the text Inherited from div.rules This is because if you look at the html you will see that we have <strong>Forum rules</strong> selected, which is in a div with the class of inner, which is in a div with the class of rules. This is telling us that all text in this div is colored by this class. So if we just want to effect the color of the specific tag we have selected we need to create a new class.
13. It is my recommendation that if you are making any edits or changes to a theme that you do so none destructively via a new css file. You should also never edit prosilver directly, start by duplicating the theme and renaming it to prevent issues with upgrading
14. Start by duplicating the prosilver folder and renaming it to whatever you want the theme called.
15. In the new folder open style.cfg and change name = prosilver to be name = whatever you want the theme called
16. Now you should have a new theme that you can install in the acp and switch to.
17. Next in this new folder create a new css file in the theme sub folder. You can call it whatever you want but i prefer to name it the same name as the theme.
18. Open the stylesheet.css file.
19. Duplicate the last line of @import url("responsive.css?v=3.3"); and change responsive to the name of the new css file you just created.
20. Now we have a clean workspace to make changes. So lets go back to our example. In the new css file lets say we just wanted to change the color of all the text from red to blue. so we copy the entire class from colours.css for div.rules into our new css file and change the color from red to blue. Then save and clear the cache.
21. You should now have blue text
    
    Screenshot 2017-06-06 09.25.34.png
22. Now les say you only wanted to change the color of the header text that we originally selected without changing the rest of the text.
23. The easiest way would be to add a class in the html file. This is where things can get tricky because the chome developer tools does not provide what html file we are working from. So you would have to track it down usually by searching for the closest class in the html files, but this would shows us that rules block is coded in 4 different files. We would have to edit all these occurences.
24. This is where most of the skilled css gurus would resort to doing something like the following which will work, but is rather hacky. (#note we are working to fix it in the future so that you should only have to edit the css but it means we would have to build a new theme from scratch! which takes a lot of coordination and time)

    Code: Select all

    div.rules strong:first-of-type {
        color: #2a55bc;
    }
    

    or
    

    Code: Select all

    div.rules .inner > strong {
        color: #2a55bc;
    }
    

I know this was a very long post and will eventually try and clean it up and move it to the docs somewhere , but wanted to get it somewhere you could easily find it first.

Hope this helps Cheers!

[Ancient Viking]

I need to be honest, I don't like Goggle Chrome, so that's probably why I stick with Firefox.

But despite the differences I assume the steps is pretty much the same as it is with Chrome. Correct?

Good guide, I'll try to remember that. Thanks for posting it.


Also, I was just about to ask the people here about changing the layout in prosilver and the other styles I use, because if one look here and change the styles (yes, guests can change the styles) one would notice the topic title and the latest poster aren't aligned with the avatar.

Even the topic smiley isn't aligned with the avatar.

I wonder can this be corrected by following this guide.

[Hanakin]

Yes everything can be and yes it’s doable in Firefox but chrome is far better at it. Also the problem there is that the avatar is not supported on mobile in that theme so it was never styled responsively

[Ancient Viking]

Yes everything can be and yes it’s doable in Firefox but chrome is far better at it. Also the problem there is that the avatar is not supported on mobile in that theme so it was never styled responsively

I've been busy with other things lately, so I haven't been active here much.

I see. I didn't know that about using avatar at the same time also using a mobile theme. I'll try to remember that.


Anyway, I admit I have very little knowledge about CSS and HTML in general, but I want to know how to change a few things like changing color for the background and the text color in a style(s) without using the Colorize it (random style) feature that exist.

I also know there are a few commands that has a value e.g .padding 100,0 (I'm probably wrong about this), .background (that I understand).

So, what is the .padding command used for and when is it required to use it?

[canonknipser]

Maybe you need some tutorials: https://www.w3schools.com/css/

[Ancient Viking]

Maybe you need some tutorials: https://www.w3schools.com/css/

Just what I need to know. Thanks for the link.

[Ilikeit]

Super helpfull, thanks Hanakin!

[Lumpy Burgertushie]

remember, changing it in the inspector does not actually change the file. you still have to download the file using your ftp , open it in a text editor and make the changes. then you upload it back and refresh the browser and maybe purge the cache to see the changes.


the inspector thing is just for testing. when you make a change and refresh the page, the change goes away.

as far as I can tell, the inspector in chrome and firefox are almost identical.


robert

[Hanakin]

Sort of chrome has more advanced features for those more technically inclined. Like workflow linking to allow direct writing to your files. As well as color format changing. I am not sure Firefox has these and several others. Firefox also has some render issues as it’s the only browser that is not built on WebKit

[Linsa]

But what html file is it not showing, just css files?

[Hanakin]

@Linsa what is your question? This shows all the code for whatever page you are viewing. HTML/CSS/JS its all editable. The CSS references are straightforward, the html files unfortunately is more complicated since we use a templating system for phpbb. What is rendered is not referenced to the source files. you will have to find that yourself by comparing files and code.

[Driver80]

if there is such a separate topic tell me, did not find ...
help me change .forabg (Prosilver 3.2.8 ), add image to top.

or tell me how to repaint it separately "only top" and not the whole wrapper

[Hanakin]

@Driver80 This is not a support topic please look for a related topic or create a new one.

[nemo1966]

Works great with prosilver - but these new styles written with .scss are a nightmare, I mean why? I am trying to modify the font size on Eelegance Steelblue.... nothing. Round and round in circles... I have message the author no reply.

[Mannix_]

Works great with prosilver - but these new styles written with .scss are a nightmare, I mean why? I am trying to modify the font size on Eelegance Steelblue.... nothing. Round and round in circles... I have message the author no reply.

https://www.artodia.com/phpbb-31-tutori ... ile-theme/ you need to recompile stylesheets link will tell how to