[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.
ppBB-h88
Registered User
Posts: 6
Joined: Fri Mar 05, 2021 9:34 pm

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

Post by ppBB-h88 »

Thanks for the tips. This helps tremendously.
One thing that would also help are tips on how to edit or manipulate html elements of the board. I'm aware there are 'extensions' but I find it tedious to hunt around for an extension that perfectly fit your needs. Why not edit the html directly like editing the CSS?
Is that even possible? Or is there something I'm not understanding about how style editing or extensions work?
I've tried to edit the template files in the 'style' folder but it did not seem to take effect. Am I doing the right thing, or are there a lot of other things I need to do? Am I just asking to break my forum site?

I have a base in manipulating html/css/javascript so I'm not afraid to dive in and edit some code.
thanks!
User avatar
Lumpy Burgertushie
Registered User
Posts: 69227
Joined: Mon May 02, 2005 3:11 am

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

Post by Lumpy Burgertushie »

the whole point of extensions is that you do not have to edit code at all. you simply upload the extension and enable it in the adminm panel and you are done.
if you need an extension that has not been made yet, you ask for someone to make it for you and wait.

if you only want to make changes to the html css then you don't need an extension usually. you can create a child style that inherits from prosilver. you only have to put in the html and css files that you need for the changes you require.

then you simply install that style and choose it from your user control panel or make it the only one available from your admin panel.
this way you only have to upgrade/update those few files at every board update/upgrade instead of having to go through all of the prosilver file manually to make those edits again.

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
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

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

Post by Mannix_ »

ppBB-h88 wrote: Sat Mar 06, 2021 8:47 pm
I've tried to edit the template files in the 'style' folder but it did not seem to take effect. Am I doing the right thing, or are there a lot of other things I need to do? Am I just asking to break my forum site?

If you edit html file remember to clear the cache in ACP and if you edit css files remember to clear your browser cache to see the changes
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!
User avatar
newbyeagain
Registered User
Posts: 73
Joined: Tue Oct 05, 2021 10:52 pm

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

Post by newbyeagain »

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.

I've done what mentioned in points 14/15/16
14.
Image

15.
Image

16.
Image

Something wrong?
Io c'ho vent'anni, perciò non ti stupire se dal niente faccio drammi. Ho paura di lasciare al mondo soltanto denaro,
che il mio nome scompaia tra quelli di tutti gli altri. Ma c'ho solo vent'anni e già chiedo perdono per gli sbagli che ho commesso.
Ma la strada è più dura quando stai puntando al cielo. Quindi scegli le cose che son davvero importanti. Scegli amore o diamanti, demoni o santi. (MANESKIN - "Vent'anni")
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

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

Post by Mannix_ »

edit the name not the parent in the style.cfg ;)
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!
User avatar
newbyeagain
Registered User
Posts: 73
Joined: Tue Oct 05, 2021 10:52 pm

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

Post by newbyeagain »

Mannix_ wrote: Wed Oct 20, 2021 11:49 am edit the name not the parent in the style.cfg ;)
omg! :D
By the way... the tutorial teaches how to modify the forum sections.
If I understood, I must click an element and modify (i.e. the color). The tutorials tells we have to purge the cache to see changes, haven't we?
I should change green texts to F7CF00
Image
But I can't see the changes. Maybe I do somehing wrong...
Io c'ho vent'anni, perciò non ti stupire se dal niente faccio drammi. Ho paura di lasciare al mondo soltanto denaro,
che il mio nome scompaia tra quelli di tutti gli altri. Ma c'ho solo vent'anni e già chiedo perdono per gli sbagli che ho commesso.
Ma la strada è più dura quando stai puntando al cielo. Quindi scegli le cose che son davvero importanti. Scegli amore o diamanti, demoni o santi. (MANESKIN - "Vent'anni")
User avatar
Mannix_
Registered User
Posts: 1938
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

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

Post by Mannix_ »

newbyeagain wrote: Wed Oct 20, 2021 6:18 pm
But I can't see the changes. Maybe I do somehing wrong...
Browser cache for css changes PHPBB cache for html changes
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!
User avatar
newbyeagain
Registered User
Posts: 73
Joined: Tue Oct 05, 2021 10:52 pm

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

Post by newbyeagain »

Mannix_ wrote: Thu Oct 21, 2021 6:00 am
newbyeagain wrote: Wed Oct 20, 2021 6:18 pm
But I can't see the changes. Maybe I do somehing wrong...
Browser cache for css changes PHPBB cache for html changes
I didn't do it but I see changes.
style-sv is prosilver but colours have changed as requested... mistery, halloween's coming...
Image
But it's just a try, I will use a copy of 360Elite...
Io c'ho vent'anni, perciò non ti stupire se dal niente faccio drammi. Ho paura di lasciare al mondo soltanto denaro,
che il mio nome scompaia tra quelli di tutti gli altri. Ma c'ho solo vent'anni e già chiedo perdono per gli sbagli che ho commesso.
Ma la strada è più dura quando stai puntando al cielo. Quindi scegli le cose che son davvero importanti. Scegli amore o diamanti, demoni o santi. (MANESKIN - "Vent'anni")
blackantt
Registered User
Posts: 7
Joined: Tue Jun 09, 2015 3:08 am

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

Post by blackantt »

Hanakin wrote: Tue Jun 06, 2017 1:47 pm
Can I inspect font place in which css?
Last edited by HiFiKabin on Sat Mar 25, 2023 11:03 am, edited 1 time in total.
Reason: Deleted full quote for ease of reading
User avatar
warmweer
Jr. Extension Validator
Posts: 11408
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Bel ... gium

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

Post by warmweer »

blackantt wrote: Fri Mar 24, 2023 11:23 pm Can I inspect font place in which css?
I think you'll have to explain more in depth what you want you to do.
"font place" is unknown to me.
As to "inspecting": If you mean using a browser's Inspector. Use your mouse, right click on the part you want to inspect (select Inspect) and a window will pop up (or a section will appear) showing the code + an area to the right showing whch css is being used for the part you selected : actually showing which file the css code is in). In that part to the right you can even edit and see the result immediately (take note those edits are in the browser not the files and if you want to make those edits permanent you'll have to edit the files themselves).
It sounds a bit complicated but once you try it, you'll probably wish you had discovered that a lot earlier.
Spelling is freeware, which means you can use it for free.
On the other hand, it is not open source, which means you cannot change it or publish it in a modified form.


Time flies like an arrow, but fruit flies like a banana.
Amazone2
Registered User
Posts: 32
Joined: Thu Aug 31, 2023 5:53 pm

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

Post by Amazone2 »

stupid question here, but needed:

am stuck on number

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.

How does one create a new css file?
just created a textfile named .css but not sure if I was meant to do that.

Next stuck at 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.

Cannot find this line. (prosilver_se)
can find /* responsive.css changes */

Would like to change header gradients of prosilver se, and when succesfull I might try out more.
Have an entire colorscheme ready for it.

(ps css is something I want and ened to learn more about anyways)
Amazone2
Registered User
Posts: 32
Joined: Thu Aug 31, 2023 5:53 pm

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

Post by Amazone2 »

Just a thought I don't know a new ccs file is made, in these instructions
can't I just edit stylesheet.css (headerbar bit?)
User avatar
ForumFlair
Registered User
Posts: 90
Joined: Sun Jan 31, 2021 10:21 pm

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

Post by ForumFlair »

Amazone2 wrote: Sun Oct 22, 2023 4:24 pm How does one create a new css file?
just created a textfile named .css but not sure if I was meant to do that.
You could just copy one of the prosilver CSS files and rename it, then use a text editor to delete the CSS from the file and start putting yours in it.
ForumFlair
User avatar
Lumpy Burgertushie
Registered User
Posts: 69227
Joined: Mon May 02, 2005 3:11 am

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

Post by Lumpy Burgertushie »

just create a blank text file and name it with a .css extension and you are done. put whatever css you want in it.

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.
Amazone2
Registered User
Posts: 32
Joined: Thu Aug 31, 2023 5:53 pm

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

Post by Amazone2 »

well decided to edit stylesheet.css directly because I couldn't do step 19.
it worked!

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