Search…

X3 Photo Gallery Support Forums

Search…
 
tbp
Experienced
Topic Author
Posts: 41
Joined: 12 Apr 2020, 09:19

Replace logo for different screen sizes

25 Feb 2021, 10:38

Hi Karl,

I have another question:

My main logo is quite large and I created a smaller version with surrounding text which I would like to use for smaller screens.
So basically I want to replace the original logo with another one for screens < 640px. 
Can you provide me with the needed CSS code?

Another thought: Maybe I will split the logo part from the surrounding text (my name), so I will have two separate files.

How can I add the second file (with text) to be shown next to my main image or below my main image?

Thanks,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Replace logo for different screen sizes

26 Feb 2021, 00:01

I must admit, there is no easy way do this without "hacks", definitely including custom HTML, CSS and possibly also Javascript. Perhaps there should be better options, but this would still be a "manual" customization task as soon as you want different logos to appear differently on different screens. The optimal solution of course, would be to consider a logo that appears and works well on ALL screens ... We can also use custom CSS to tweak the logo (style, size, position) specifically for certain screen sizes/aspects, and that's what designers will normally do.
tbp wrote:So basically I want to replace the original logo with another one for screens < 640px. 
Can you provide me with the needed CSS code?
The only way to achieve that, would be to add TWO logo images and toggle them via custom CSS using @media queries. Since "two" image logos is not an option in X3 settings, you would probably need to select "text" logo and then add your logos via HTML.
tbp wrote:Another thought: Maybe I will split the logo part from the surrounding text (my name), so I will have two separate files.
Possible of course, although things will get tedious to manage and style.
 
tbp
Experienced
Topic Author
Posts: 41
Joined: 12 Apr 2020, 09:19

Re: Replace logo for different screen sizes

26 Feb 2021, 03:33

Code
Since "two" image logos is not an option in X3 settings, you would probably need to select "text" logo and then add your logos via HTML.
How can I achieve this?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Replace logo for different screen sizes

26 Feb 2021, 04:38

tbp wrote:How can I achieve this?
Something like this for starters:

1. Go to Settings > Style > Logo, select "Logo Type": "text", and disable "Logo effects".

2. Add your HTML into the "Logo Title", something like this:
Code
<img src="/content/custom/logo/large-logo.png" class="large-logo"><img src="/content/custom/logo/small-logo.png" class="small-logo">
3. Add the following to Settings > Custom > Custom CSS:
Code
.large-logo { display: none; }
@media screen and (min-width: 640px) {
  .small-logo { display: none; }
  .large-logo { display: inline-block; }
}
The above will provide the mechanics for toggling the visibility of two logos based on screen size, but you will need to then start tweaking the design of each element.