Increase forum width in general

For support and discussion related to templates and themes in phpBB 3.3.
wonder_wonder
Registered User
Posts: 114
Joined: Thu Feb 16, 2017 2:52 pm

Re: Increase forum width in general

Post by wonder_wonder »

Talk19Zehn wrote: Sun May 12, 2024 10:22 am Only add or change prosilver CSS-Conventions or own others

Hello, write a wondercustom.css and/or wonderadditional.css with the CSS changes and upload it to the theme directory (prosilver).

stylesheet.css (original phpBB-3.3.11)

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=a9741ba1");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=be57a41d");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=b64464fb");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=87b53e08");

and put your CSS at the end (!): import your wondercustom.css and/or wonderadditional.css -> example. see also the entry
And modified by: Your name ( website-Adress )

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
	And modified by:	Your name ( website-Adress )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=a9741ba1");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=be57a41d");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=b64464fb");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=87b53e08");
@import url("wondercustom.css?v=3311");
@import url("wonderadditional.css?v=3311");

Hint: The CSS is processed in the order specified.

Note: Since the CSS in question ( wondercustom.css and/or wonderadditional.css ) does not exist in the original, so it will not be overwritten (update).

Important: Nevertheless, with every update (style-changes), check whether you have addressed classes or ids that could have been changed via an update for a new version. These may then need to be adapted accordingly.

It's not that difficult and should work. Try it ...
After editing, empty all caches (FTP / ACP) and browser caches (when accessing your board page).

Many regards
Allow me to make a reply to a post that I consider very interesting.

These two days I have made small modifications, colors, repeat backgrounds, table colors... I still have some more things to edit, but with Chrome's "inspection" mode I can't see some data (I haven't focused on it either). 100% because it's the weekend and I have a daughter :) )

Ok, I see what you mention as a really good aspect, function, which I understand, is the same thing that the extension that the ssl colleague indicates above does.

But...here I have a doubt:
I have modified colors.css and common.css, in that new file that I named ("wondercustom.css?v=3311"); I am clear that there I put the variables that I have edited from the custom.css file, but in ("wonderadditional.css?v=3311");, what would go?
Or I have to create another one called wondercolours.css (I don't think this is because I see a hash...).
I deduce, correct me if I'm wrong, wonderadditional.css would go to what I modified in colors.css.
If I'm wrong, correct me.

On the other hand, in that wonder_custom.css that I generate, I only have to put the values that I modify, not all the content, for example, of custom.css and the values modified there, only those that I modify?

Thank you very much for your help and replies.
User avatar
Talk19Zehn
Registered User
Posts: 876
Joined: Tue Aug 09, 2011 1:10 pm

Re: Increase forum width in general

Post by Talk19Zehn »

Hello,
no, you are not allowed to rename them -> the originals (for example colours.css) and correct hashes if you want to follow the suggestion. This would be "double". Changes must be entered in the respective new CSS via import.
There are usually only a few changes. Otherwise it is advisable to create a true child-style.

The discussion, compare the sequence behaviour of the CSS import (sequences) are important to overwrite the CSS and/or HTML. I cannot find the discussion at that time.

There are many ways to remedy (integration) in terms of (CSS / HTML). I am not flawless and unfortunately busy at the moment. phpBB brings a lot to the table that can often be overlooked. Maybe there is a stylist who can present more simplified solutions in the know-how.

I've never had any problems, although I couldn't rule out sudden irritations in your topic (see history).

Best regards :)
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
User avatar
Talk19Zehn
Registered User
Posts: 876
Joined: Tue Aug 09, 2011 1:10 pm

Re: Increase forum width in general

Post by Talk19Zehn »

Hello, following the advice of Mannix_

viewtopic.php?p=16011451#p16011451

it is correct that per > import < (stylesheet.css) is required again.

The procedures in the update process are decisive. It is also decisive whether only existing classes, IDs or own conventions (CSS, HTML´s) are used.
This means that custom CSS or additional CSS and HTML´s must be checked and entered again. Please excuse my uncertainty, as explained before.

New Test "prosilver" ... - Status: 3.3.12_RC1!

In my case the older CSS worked. example -> my own
@import url("wondercustom.css?v=3.3");
@import url("wonderadditional.css?v=3.3");

The HTML, if different from the standard, had to be checked and integrated also again (!).

Best regards

Addendum:
It is very important to document all such and/or such changes in an admin forum area. :)
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
wonder_wonder
Registered User
Posts: 114
Joined: Thu Feb 16, 2017 2:52 pm

Re: Increase forum width in general

Post by wonder_wonder »

There is material here that is beyond my knowledge...hehehe.

Maybe I expressed myself poorly because of my bad English.

When I asked:
Should the content be duplicated? I was not referring to the file itself, but to its content.
For example, if I modify a color that is inside the colors.css file, in my new file, should I only add that variable?
That is what I meant :)

I import / add the files that I have created with those modifications in stylesheet.css

If I misunderstood something, correct me :)

Yes, all of this is well documented because otherwise...hehehe

Grateful.
User avatar
Talk19Zehn
Registered User
Posts: 876
Joined: Tue Aug 09, 2011 1:10 pm

Re: Increase forum width in general

Post by Talk19Zehn »

Hello, you only change the colour and/or the part that you want to change in those (standard) Classes or IDs (custom.css). Other CSS instructions (see my simple example of the headerbar-class in myowncustom.css) are inherited from prosilver. As a colour change can lead to major colour errors, you must carefully consider in which other conventions the Class or ID applies.

You can find this out, for example, using Notepad++ (search in files) by searching for the respective Classes/ID.

I use the additional.css for instructions that I personally add (new CSS and new HTML additions).

It is important to delete the content after a change (file folder production): Make sure that only this folder can be deleted. This folder rebuilds itself recurrently(!).

The Cache folder and the contained .htaccess and index.htm must not be deleted(!).
produktion_1.png

And clearing the caches (ACP) and clearing the browser-caches after calling up the board in the browser is well known.
My non-binding samples: To avoid confusion, the CSS changes have not been shortened or summarised.

A) myowncustom.css

Code: Select all

/* myowncustom css prosilver
---------------------------- */
.wrap {
	background: #FAFAFA;
	border-color: #12A3EB;
}

.headerbar {
	box-shadow: 0 0 10px #0076B1;
	margin-bottom: 14px;
}

.forabg, .forumbg {
	background: #12A3EB;
	background-image: none;
	filter: none;
}

ul.topiclist li.row dt a.subforum.unread {
	border-left: 1px solid #D31141;
	font-style: italic;
	padding-left: 2px;
	color: #D31141;
}

/* ADDs myowncustom css prosilver for colours and backgrounds for content css
----------------------------------------------------------------------------- */

ul.forums {
	background-color: #CADCEB;
	background-image: none;
	filter: none;
}

ul.topiclist dd {
	border-left-color: #FFF;
}

.rtl ul.topiclist dd {
	border-right-color: #FFF;
	border-left-color: transparent;
}

li.row {
	border-top-color: transparent;
	border-bottom-color: #00608F;
}

li.row:hover {
	background-color: #CADCEB;
}

li.row:hover dd {
	border-left-color: #4692BF;
}

.rtl li.row:hover dd {
	border-right-color: #4692BF;
	border-left-color: transparent;
}

/* ADDs myowncustom css prosilver for round cornered boxes and backgrounds
-------------------------------------------------------------------------- */
.bg1 {
	background-color: #CADCEB;
}

table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) {
	background-color: #CADCEB;
}

.bg2 {
	background-color: #CADCEB;
}

table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) {
	background-color: #CADCEB;
}

.bg3 {
	background-color: #CADCEB;
}

.post {
	border-bottom: 3px solid #4692BF;
}

/* myowncustom css prosilver another adds
----------------------------------------- */
@media only screen and (max-width: 825px), only screen and (max-device-width: 825px) {
	.wrap {
	max-width: 1152px;
	}
}

@media (min-width: 1220px) {
	.wrap {
	max-width: 1280px;
}

B) myownadditional.css

Code: Select all

/* myownadditional css prosilver
-------------------------------- */
/* Divider bottom */

.lineprosilver-divider {
	margin: auto;
	margin-top: 8px;
	width: 82%;
	position: relative;
}

.lineprosilver-divider .lineprosilvershadow {
	overflow: hidden;
	height: 20px;
}

.lineprosilver-divider .lineprosilvershadow::after {
	content: '';
	display: block;
	margin: -25px auto 0;
	width: 100%;
	height: 25px;
	border-radius: 125px/12px;
	box-shadow: 0 0 8px #1E61A5;
}


Divider used: example
divider_footer_prosilver.png

Important hint: prosilver 3.3.12-RC1 (!) The hash values may be different on your board.
Please fill out => Your Name ( your website-link )

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
	And modified by:	Your Name ( your website-link )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=7c5543be");
@import url("utilities.css?hash=d8f72c42");
@import url("common.css?hash=a9741ba1");
@import url("links.css?hash=18286e16");
@import url("content.css?hash=d0e24377");
@import url("buttons.css?hash=56f0d25f");
@import url("cp.css?hash=50d868ab");
@import url("forms.css?hash=9016b55c");
@import url("icons.css?hash=64da33ce");
@import url("colours.css?hash=fcb2f289");
@import url("responsive.css?hash=91525545");
@import url("myownadditional.css?v=3.3");
@import url("myowncustom.css?v=3.3");

Result: Test-Board (prosilver 3.3.12-RC1
prosilver_test_css1.png
That's all I can do at the moment.
Remember that you will have to re-enter import links after an update (stylesheet.css) and also re-enter any additional HTML coding, if used.
Please also bear in mind that extensions often use standard classes and standard IDs.
Best regards and wishes.

====
Edit: Fri May 17, 2024 3:35 pm

There are also other ways to achieve your goal.

In this respect, I will delete my "first aid examples" in my test board shortly. ;)

====
Edit: Mon May 20, 2024 6:50 am

Please do not forget to add the following entries, which must be entered again during an update (depending on the update method).

overall_header.html:

find:

Code: Select all

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->
replace with:

Code: Select all

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      Your Name ( your website )
-->
overall_footer.html:

find:

Code: Select all

		<p class="footer-row">
			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
		</p>
replace with:

Code: Select all

		<p class="footer-row">
			<span class="footer-copyright">{{ CREDIT_LINE }}<br />Modified by: Your name</span>
		</p>
You do not have the required permissions to view the files attached to this post.
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB

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