Place title text over event logo

[Denis_Gorbunov]

Hello everyone,

I’ve created an event, the title of which I want to place over the event logo. I haven’t been able to achieve this using a css file. Whenever I try to change the title’s position, the title either doesn’t move at all or moves in conjunction with the logo.

I want the logo to stay where it is and move the title over it. How do I do this?

The below snippet shows the code for the title. Apparently, other commands are required (I don’t know which ones).

/*
The style for the title text.
*/
.conference-title-link {
  font-size: 22pt;
  display: block;
  padding: 0px 0;
  color: white;
}

[troun]

Hi,

It would help if you shared a screenshot of what exactly you want to achieve,
but something like this should work:

.conference-title-link {
  position: relative;
}

.conference-title-link > span {
  position: absolute;
  left: 0;
}

[Denis_Gorbunov]

Thanks for the reply. Your code moved the text but it’s still not where I want to have it.

This is a screenshot showing where the text should be.

[troun]

You can use a combination of left, right, top & bottom rules to get the positioning exactly as you need it

[Denis_Gorbunov]

Unfortunately, indico moves both the figure and the title:

I used the following:

/*
The style for the title text.
*/
.conference-title-link {
  position: relative;
}

.conference-title-link > span {
  position: absolute;
  left: 0;
  right: 100;
  top: 100;
  bottom: 100;
}

[troun]

I got this:

with the following (admittedly not great) code:

.conference-title-link {
  position: relative;
}

.conference-title-link > .confLogoBox {
  margin-left: -15em;
}

.conference-title-link > span {
  position: absolute;
  left: 20%;
  top: 700%;
}

[Denis_Gorbunov]

Excellent. Thank you. What matters is that it works.

[Denis_Gorbunov]

Is there a way to fix the position of the title? It moves when I zoom in and out.

[troun]

A better solution might be to embed the title in the logo itself and add display: none to the normal title. That way the title will be exactly where you want it with respect to the logo.

[Denis_Gorbunov]

Thanks - everything genius is simple

[Denis_Gorbunov]

I’m sorry but I need your help again.

I started with this:

The image doesn’t fit into the blue box.

[Denis_Gorbunov]

This made me change its coordinates:

/*
Sets the width of the upper part of the conference header.
Is set to 1550px and centered by default.
*/
.confTitle {
  position: absolute;
  left: 30%;
  top: 12%;
}

which leads to this:

[Denis_Gorbunov]

The problem is that when I click “Use selected template”, I get this:

which displaces the logo.

To place the logo on the very top of the page, I tried using

  position: absolute;
  left: 0%;
  top: 0%;

but then the logo is superimposed onto the button “Use selected template” and I can’t click it.

What do I do?

[troun]

Hi,
Looking at your event, you have lots of other rules as well so it’s not easy to debug
but try removing the height: 360px; from .confTitleBox. I don’t think you need any position: absolute anymore either.

[Denis_Gorbunov]

This did the trick. The reason I used height: 360px; is because this is the height of the logo.

Now the blue box is a bit larger than the logo. My ultimate wish is to make the height of the blue box the same as the height of the logo.

[troun]

OK, in that case try to add this:

.confTitleBox {
  height: 360px;
  border-top: 0;
}

.conference-title-link {
  padding-top: 0;
}

With these rules I have this result:

[Denis_Gorbunov]

Thank you very much. I appreciate your help.