Elegance

Add the own logo to the Elegance style - Elegance

Add the own logo to the Elegance style

by hrx » Fri Nov 27, 2015 8:01 am

Hello,

I would like to add the own graphical logo to the Elegance style with the own dimension of the width and the height. Not much I know how to do it, also not much I don’t understand why stylesheet file can’t be editing when there are all command to convert theme to other color. I’m always convert themes in this way. Stylesheet file is strange made, the entire code in my opinion should be written in block not in the horizontal line. The author probably put for such a termination in order to make editing of this file impossible. I ask for help.

This is the code from stylesheet file, how to change this code in order to enter the command to the width and the height of showing the logo?

Code: Select all

.logo img{display:block;max-width:100%}


I would like to add more or less such a code:

Code: Select all

#dashboard {
   background: url("{T_THEME_PATH}/images/logo.jpg") no-repeat;
   width: 980px;
   height: 190px;
   margin: auto;
}


Which will enable the change of the widths and heights logo. I copied this code from we_universal style.
hrx
Registered User
Posts: 170
Joined: Wed Nov 18, 2015 11:21 am
Contact:

Re: Add the own logo to the Elegance style

by TChatenet » Wed Dec 02, 2015 6:31 pm

Now you have to click here ! :-D
http://www.artodia.com/phpbb-31-tutorials/change-logo
and you will discover the solution .
don't miss to read all the tutorial , it's very interesting
TChatenet
Registered User
Posts: 16
Joined: Fri Nov 20, 2015 2:01 pm
Contact:

Re: Add the own logo to the Elegance style

by hrx » Wed Dec 09, 2015 9:59 am

This article doesn't work.
hrx
Registered User
Posts: 170
Joined: Wed Nov 18, 2015 11:21 am
Contact:

Re: Add the own logo to the Elegance style

by eugy » Mon Sep 25, 2017 11:40 pm

I've tried the 1st option: swap the two files with mine own, and it worked. In 3.2.1

Before this, I've just remembered that I used the second method (edit overall.html) with 3.1.6 version of my forum, and it worked too

Here's the copy from web-archive:

This tutorial explains how to change logo in phpBB 3.1 styles available on this website.
Logo files

All images used by style are located in directory theme/images/ of style's directory (such as styles/elegance/theme/images/).

There are 2 logo files:
logo.png - default logo image used for most visitors.
logo_hd.png - additional logo image for high definition displays. It is the same image as logo.png, but twice bigger.

High definition displays are very common these days: iPhones, iPads, MacBooks with Retina display, phones and tablets from Samsung and so on.

High definition displays have high pixel density and usual images look pixelated. To solve that issue styles use logo_hd.png to display smoother logo that is displayed only to visitors that use devices with high definition displays.

There are several ways to change logo. Use whichever works better for you. Additionally see section below explaining how to create high definition logo.
Easy method: swapping both logos

If you have both normal and high definition logos and they are in PNG format, do this:

1. Rename your normal logo to logo.png
2. Rename your high definition logo to logo_hd.png
3. Upload both logos to theme/images/, replacing old files.

That's all.

No need to change logo dimensions anywhere in style, logo dimensions aren't hardcoded.
Complex method: changing file names

If you do not have high definition logo or your images are not in PNG format, you'll need to edit logo file name in style.

First upload your logo images to directory styles/{style name}/theme/images/ (replace {style name} with name of style)

Then open file template/overall_header.html, find this code
Code:
<img src="{T_THEME_PATH}/images/logo.png" data-src-hd="{T_THEME_PATH}/images/logo_hd.png" />
If you do not have high definition logo, remove this part of line:
Code:
data-src-hd="{T_THEME_PATH}/images/logo_hd.png"
If you do have high definition logo, but its filename is something other than logo_hd.png, in that code change logo_hd.png to your file name.

If your normal logo has file name other than logo.png, change file name in this part of line:
Code:
src="{T_THEME_PATH}/images/logo.png"
For example, if you do not have high definition logo and your main logo is named my_logo.jpg, after removing HD logo code and renaming logo.png code would look like this:
Code:
<img src="{T_THEME_PATH}/images/my_logo.jpg" />
After editing overall_header.html, go to admin control panel and click "purge cache" button on admin control panel's main page.

That's it.

No need to change logo dimensions anywhere in style, logo dimensions aren't hardcoded.
How to create high definition logo

High definition logo is the same image as normal logo, but twice bigger. However that doesn't mean you can scale up normal logo - that would defeat whole purpose. High definition logo is supposed to be smooth, not pixelated. Scaling up normal logo will simply create pixelated version of normal logo.

So what you need to do is create high definition logo first, then resize it to 50% of its original size to make normal logo. Make sure width and height of high definition logo are even (multiple of 2, so number should end with 0, 2, 4, 6 or 8) to scale it down properly.

Easiest way to change logo image is to simply swap both logo.png and logo_hd.png with your custom images.
eugy
Registered User
Posts: 13
Joined: Mon Feb 28, 2011 1:18 pm
Contact: