[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.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
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 »

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: 591
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by 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. :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
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
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 »

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: 591
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by Ancient Viking »

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: 2096
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 »

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: 591
Joined: Sun Jan 15, 2012 11:43 pm

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

Post by Ancient Viking »

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!
User avatar
Ilikeit
Registered User
Posts: 7
Joined: Wed May 29, 2019 7:35 am

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

Post by Ilikeit »

Super helpfull, thanks Hanakin!
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by 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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
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 »

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
Registered User
Posts: 70
Joined: Mon Aug 26, 2019 6:11 pm

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

Post by Linsa »

But what html file is it not showing, just css files?
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
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 »

@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
Registered User
Posts: 58
Joined: Fri Jan 03, 2020 8:35 pm

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

Post by 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
Attachments
Без имени-1.jpg
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
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 »

@Driver80 This is not a support topic please look for a related topic or create a new one.
nemo1966
Registered User
Posts: 5
Joined: Thu Feb 18, 2021 1:12 pm

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

Post by 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.
User avatar
Mannix_
Registered User
Posts: 1834
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

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

Post by Mannix_ »

nemo1966 wrote: Sun Feb 21, 2021 6:38 pm 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
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
Post Reply

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