Control of Apperance

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Control of Apperance

Post by jamesadrian » Mon Sep 10, 2018 7:44 pm

I know how to write HTML pages from scratch, such as all those on my website. I do it in a text editor. I know nothing about modifying databases.

There are a lot of visual elements I need to change to make the forum at https://www.futurebeacon.com/forum/ look like the other pages on my website. The URL seems to be https://www.futurebeacon.com/forum/ but I cannot find a file by that name in my FTP forum directory. I view codes looking for an opportunity to add my textured background and find <body id="phpbb" class="nojs notouch section-index ltr "> to which I wish to non-destructively add the effect of <body style="background-image: url(fb1.png);"> but I don't know how.

Is there a document that can tell me how the forum works, including when files are modified and when the database is modified? Does this take years to learn?

I want control over the appearance of the forum including the placement of paragraphs and pictures using position absolute wherever I need to.

Thank you for your help.

Jim Adrian

User avatar
Dan Stylez
Registered User
Posts: 157
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Control of Apperance

Post by Dan Stylez » Mon Sep 10, 2018 10:51 pm

Hi Jim,

Changing the colours on the forum etc is pretty straight forward, each style usually has a colours.css style sheet, for example you have prosilver and the colour style sheet is located at: https://www.futurebeacon.com/forum/styles/prosilver/theme/colours.css so in your FTP directory you should see: forum/styles/prosilver/theme

Then you will see a list of style sheets, one of them will be colours.css

For example if you wanted to change the background at the very sides of the forum, you would open colours.css

and then find:

Code: Select all

html, body {
    color: #536482;
    background-color: #F5F7FA;
}


On the next line under background colour, you would add: background-image: url(https://www.futurebeacon.com/fb1.png);

So it would look like:

Code: Select all

html, body {
    color: #536482;
    background-color: #F5F7FA;
    background-image: url(https://www.futurebeacon.com/fb1.png);
}
You could add that image to the styles images folder instead, found here: forum/styles/prosilver/theme/images/ and then use:
background-image: url("./images/fb1.png");

Then once you save the colours.css file and upload it, purge the cache in the ACP and you should see the changes.

The main tip is to always make a backup copy of the file before making edits.

To change other parts of the theme, use the "inspect element" tool that comes with most browsers and that should give you an idea of which part of the css to change, for example: .bg2 { is the first post of every topic.

Hope that helps

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Tue Sep 11, 2018 8:22 pm

I have modified https://www.futurebeacon.com/forum/styl ... olours.css

but perhaps in the wrong way.

The second section now looks like this:

/*
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

background-image: url(https://www.futurebeacon.com/fb1.png);

a { color: #105289; }
a:hover { color: #D31141; }

/* Links on gradient backgrounds */
.forumbg .header a, .forabg .header a, th a {
color: #FFFFFF;
}

.forumbg .header a:hover, .forabg .header a:hover, th a:hover {
color: #A8D8FF;
}

It did not change the forum. What did I do wrong?

Thank you for your help.

Jim Adrian

User avatar
eeji
Jr. Style Validator
Posts: 860
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact:

Re: Control of Apperance

Post by eeji » Tue Sep 11, 2018 8:27 pm

You need to clear the cache in your ACP after making any changes. This can be found under the 'General' tab.

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Tue Sep 11, 2018 8:42 pm

I'm sorry, but I don't see it. I went onto ACP, I stayed in "Genreal", and I loked over the page and coud not find the words clear cache.

Jim Adrian

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Tue Sep 11, 2018 8:46 pm

I just found Purge cash. I will try that.

Jim Adrian

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Tue Sep 11, 2018 8:48 pm

There is no change (no textured background).

Jim Adrian

User avatar
Lumpy Burgertushie
Registered User
Posts: 64890
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Control of Apperance

Post by Lumpy Burgertushie » Tue Sep 11, 2018 8:49 pm

you did not do it correctly.

this is where you should be making the edit:

Code: Select all

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #F5F7FA;
}
and this is how it should look when you finish:

Code: Select all

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #F5F7FA;
	background-image: url(https://www.futurebeacon.com/fb1.png);
}

however you really should create a new image of that background. just reduce the size down to a very small block since it is all the same and then have it repeat across and down. that way, it will take up much less bandwidth and load much quicker.


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Wed Sep 12, 2018 1:27 am

It worked. Thank you.

Can I replace the phpBB logo with my own?

Thank you for your help?

Jim Adrian

User avatar
3Di
Registered User
Posts: 12903
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Control of Apperance

Post by 3Di » Wed Sep 12, 2018 2:17 am

Search for .site_logo in colours.css for the IMG link, in common.css to style it instead.

Put your new logo image in ./styles/{yourstyle}/theme/images
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Wed Sep 12, 2018 3:14 am

I can't find that path. Does {yourstyle} mean I should add a directory?

Jim Adrian

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Wed Sep 12, 2018 3:41 am

I found site_logo.gif at forum/styles/prosilver/theme/images/

It is not clear how I would replace that gif with FBlogo.png

Thank you for your help.

Jim Adrian

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Wed Sep 12, 2018 4:00 am

I deleted site_logo.gif and it is no longer there.

I view the source code at the forum index page and the URL is inexplicably this:

https://www.futurebeacon.com/forum/inde ... 6439463a73

How may I upload by FTP a modified html page at such a location? Everything after the question mark is a question.

I wish to add a logo picture by giving it an absolute position on the page using html position absolute.

Thank you for your help.

Jim Adrian

User avatar
3Di
Registered User
Posts: 12903
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Control of Apperance

Post by 3Di » Wed Sep 12, 2018 5:04 am

3Di wrote:
Wed Sep 12, 2018 2:17 am
Search for .site_logo in colours.css for the IMG link, in common.css to style it instead.

Put your new logo image in ./styles/{yourstyle}/theme/images
{yourstyle} in your use case is "prosilver".
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades
My development's activity º PhpStorm's proud user

jamesadrian
Registered User
Posts: 45
Joined: Sun Jul 22, 2018 11:25 pm
Location: Rochester, NY
Name: James Adrian
Contact:

Re: Control of Apperance

Post by jamesadrian » Wed Sep 12, 2018 11:46 am

Thanks. I now know what /{yourstyle}/ means.

I tried it twice with a small .png and it did not work. I was careful to clear the cache. Must I size it first?

Thank you for your help.

Jim Adrian

Post Reply

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

Who is online

Users browsing this forum: Mannix_ and 4 guests