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

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 555
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

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

Post by Hanakin » Tue Jun 06, 2017 1:47 pm

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!

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: Hanakin, WWu777 and 2 guests

cron