[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: 754
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!

User avatar
Ancient Viking
Registered User
Posts: 411
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by Ancient Viking » Sun Nov 18, 2018 5:46 pm

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. :D


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. :)
My local forum: egetforum.nu - Offline Forum Online!

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 754
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

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

Post by Hanakin » Mon Nov 19, 2018 12:57 pm

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

User avatar
Ancient Viking
Registered User
Posts: 411
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by Ancient Viking » Tue Dec 11, 2018 12:32 pm

Hanakin wrote:
Mon Nov 19, 2018 12:57 pm
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?
My local forum: egetforum.nu - Offline Forum Online!

User avatar
canonknipser
Registered User
Posts: 1711
Joined: Thu Sep 08, 2011 4:16 am
Location: Germany
Name: Frank Jakobs
Contact:

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

Post by canonknipser » Tue Dec 11, 2018 5:35 pm

Maybe you need some tutorials: https://www.w3schools.com/css/
Greetings, Frank
phpbb.de support team member
English is not my native language - no support via PM or mail
New arrival - Extensions and scripts for phpBB

User avatar
Ancient Viking
Registered User
Posts: 411
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by Ancient Viking » Wed Dec 12, 2018 11:01 am

canonknipser wrote:
Tue Dec 11, 2018 5:35 pm
Maybe you need some tutorials: https://www.w3schools.com/css/
Just what I need to know. Thanks for the link. :D
My local forum: egetforum.nu - Offline Forum Online!

Post Reply

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

Who is online

Users browsing this forum: No registered users and 6 guests