Search…

X3 Photo Gallery Support Forums

Search…
 
sp0
Topic Author
Posts: 11
Joined: 14 Feb 2021, 14:23

Home page layout questions

16 Feb 2021, 05:47

Two quick questions on the home page please.  I am using the side panel layout.
  • I'd like to display a tagline below my logo, ie as I read down the left edge of the screen I would get logo, then the company tagline, then the menu.  Can I do this?
  • I'd like a couple of blank lines within the menu, to create visual separation and make it easier to read (on my Koken site it has Home, About | Portfolio 1, Portfolio 2, Portfolio 3 | Product information, contact, ordering, etc.  Each "|" is a blank line.  Can we do this?
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Home page layout questions

16 Feb 2021, 06:00

sp0 wrote:
  • I'd like a couple of blank lines within the menu, to create visual separation and make it easier to read (on my Koken site it has Home, About | Portfolio 1, Portfolio 2, Portfolio 3 | Product information, contact, ordering, etc.  Each "|" is a blank line.  Can we do this?
My solution (see https://hochzeiten.danielbollinger.de):
- Go to the folder below which the separation should be (in my case: Fotobox)
- Go to "Menu"
- Add a class in "Menu CSS Classes" (I called it menu-gap)
- Go to Settings - Custom - Custom CSS and add the following code
Code
.menu-gap{
  margin-bottom:2em;
}
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
sp0
Topic Author
Posts: 11
Joined: 14 Feb 2021, 14:23

Re: Home page layout questions

16 Feb 2021, 07:31

That works brilliantly, thank you!

Still need help with tagline under logo, if anyone has ideas on that question....
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Home page layout questions

16 Feb 2021, 09:07

sp0 wrote:Still need help with tagline under logo, if anyone has ideas on that question....
There's no built-in option for this, but just like most other stuff, there is always a solution of even "hack". In Settings > Style > Logo, you can include HTML in the logo text input, which would allow you to create a structure for tagline, which could easily be styled with some custom CSS. Keep in mind, this required disabling the 3D effect (in text-logo mode).

Do you have an image logo or text logo?
 
sp0
Topic Author
Posts: 11
Joined: 14 Feb 2021, 14:23

Re: Home page layout questions

16 Feb 2021, 09:13

OK, I can look into that idea thanks.  

My logo is an image (you can see the Koken layout I am starting from here).
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Home page layout questions

16 Feb 2021, 09:27

sp0 wrote:My logo is an image (you can see the Koken layout I am starting from here).
I might have a better solution. Assuming you already have an image logo setup in X3. Try add the following to Settings > Custom > Custom CSS:
Code
.logo-image:after {
  content: "blah blah blah";
  display: block;
  color: grey;
}
It's unstyled for now, but I believe you should see the text appear below the image logo. At this point, we can adjust margin, colors, font-size and anything else. I won't be able to answer any more tonight, but I'll get back to you in the morning.
 
sp0
Topic Author
Posts: 11
Joined: 14 Feb 2021, 14:23

Re: Home page layout questions

16 Feb 2021, 09:49

Yes, thank you, that is a great starting point.  I may need a little more help with the styling as you suggest -- eg it pushes the logo over to the right. 

But that seems a good place for it (until it makes it up the list of new features one day perhaps? -- it is quite common for people to use logo + tagline in their branding).
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Home page layout questions

16 Feb 2021, 10:04

A bit hard to make recommendations blindly without testing on the actual subject. Also, it would move the logo if you did not size the font yet, so that should be done first. See if this takes you any closer:
Code
.logo-image {
  text-align: left;
}
.logo-image:after {
  content: "blah blah blah";
  display: block;
  color: grey;
  white-space: normal;
  margin: 1rem 0 0 0; /* top right bottom left */
  font-size: 1.3rem;
  line-height: 120%;
}
 
sp0
Topic Author
Posts: 11
Joined: 14 Feb 2021, 14:23

Re: Home page layout questions

16 Feb 2021, 10:31

Many thanks. Yes that is much closer although it will of course need a bit of tuning.  

However when it's viewed on an iPhone it looks pretty bad -- is there a simple way I could get this class to apply to the fullscreen version, and disappear when viewed on mobile?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Home page layout questions

16 Feb 2021, 22:42

sp0 wrote:However when it's viewed on an iPhone it looks pretty bad -- is there a simple way I could get this class to apply to the fullscreen version, and disappear when viewed on mobile?
Yes. Use a media query:
Code
@media only screen and (min-width: 1025px) { ... }
Your code:
Code
@media only screen and (min-width: 1025px) {
.logo-image {
  text-align: left;
}
.logo-image:after {
  content: "blah blah blah";
  display: block;
  color: grey;
  white-space: normal;
  margin: 1rem 0 0 0; /* top right bottom left */
  font-size: 1.3rem;
  line-height: 120%;
}
}
As you can see, as soon as you need to add custom tweaks, even if it seems simple, it requires a lot of thought. Especially if you are trying to simulate a layout from another website.