Docs

[asiitan]

Hi!

Thanks for great theme!!
I have some questions concerning my website http://test.asartists.com/theatrum_1/

1. The three images are LayerSlider sliders. On hover the text will appear. Text is done with separate layers, which have “opacity:0”. On hover they have “opacity:1”. But I would like the transition to be smooth (delayed). Can’t find the right css.

2. The slides are linked, but in a rather weird way. It would be easy to link the whole slide. But it seems LayerSlider only accepts “https://nnnn.com” as a link. I need to do this with shortcode, because the information comes from Events Manager (three next events). What could then be the right syntax for the “enter url” line?

3. Some screen resolutions put the LayerSlider images over footer. How to avoid that?

4. What is the right css to reduce row height for footer in mobile view. Currently footer is not showing in mobile view (mainly because of p3), but I would still like to have it.

Gratefully,

Andres

[asiitan]

… and one more thing …
I am struggling finding css to make texts (layer 2 and 3) visible all the time in mobile view (p 1 in previous question).

[Rad]

Hi there,

Thanks for writing in.

1. Ah, you mean animation? Please change your CSS to this,

.hiiryle {
    opacity: 0;
    -webkit-transition: all 2s !important;
    transition: all 2s !important;
}

2. Not sure if I understand it correctly, but are you trying to link a dynamic URL? Shortcode isn’t possible, it will only link the way you set it up. Would you mind providing a screen recording of the issue? And please provide your Admin login credentials in private reply. I like to directly check it.

3. Your footer is fixed position on the footer, and fixed positioning doesn’t respond with other elements. You shouldn’t apply fixed positioning on the footer if you wish it to respond as the content height change.

4. Changing height will not work since you don’t have any displayed footer content on mobile because of this CSS.

@media (max-width: 767px){
footer.x-colophon.top .widget, footer.x-colophon.bottom .widget {
    display: none!important;
}
}

You should remove that.

5. Which layer, would you mind providing a screenshot of these layers?

Thanks!

[asiitan]

This reply has been marked as private.

[Rad]

Hi there,

1. Ah, glad to hear that.

2. As I expect, the shortcode will no work on links. Links are for links, and shortcodes are for content ( content should have the capability to execute shortcodes ).

3. What’s the relation of the layer slider with the footer? Once the footer is fixed position, it becomes independent and it’s harder to control when it comes to the footer. I recommend to remove the fixed positioning and just use min-height styling for the content.

5. Ah, you mean like this?

@media ( max-width: 767px ) {
.hiiryle:last-child {
 opacity: 1 !important;
}
}

Thanks!

[asiitan]

Hi Rad!
I really appreciate your help! Everything works fine!
One of my (hopefully) last questions concerning this site is about of the list of events (“Mängukava”).
In the table there are four cells in a row (date, time, event, place). On computer screen it looks fine. In mobile view it would make sense to merge the two first columns (date and time) and put the date on first row and time just below the date. If you could give me a hint how to approach this, I would be very grateful.
Regards,
Andres

[Rad]

Hi there,

The table is a standard table. It doesn’t merge or collapse using any CSS, and it’s not responsive. It’s the main reason we’re not using tables on our layout.

All we could do is hide specific columns on mobile view. Or use section’s visibility to display and hide different tables for each device category.

Thanks!

[asiitan]

Thanks for help!
Great theme, great team!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[asiitan]

Hi!
Many thanks for your great support!
Still some more issues.
http://test.asartists.com/theatrum_1/
I am trying to use fixed left navbar. I would like it to be transparent, so that the background image could be seen under it. Do not want to use separate background image for the navbar.
Then, I would like to use transparent gaps between menu items (the menu items themselves with black background color).
Could you help me out?
Andres

[Rad]

Hi there,

Please add this CSS as well,

@media ( min-width: 980px ) {
body.x-navbar-fixed-left-active .site {
    padding-left: 235px;
}
body.x-navbar-fixed-left-active {
    padding-left: 0px;
}
.x-navbar .desktop .x-nav > li > a {
    background: rgba(0,0,0, 0.8);
    margin-bottom: 10px;
}
}

Hope this helps.

[asiitan]

Hi Rad!
Many-many thanks!
Works like a miracle.
Andres

[Joao]

Hi Andres,

Glad it worked for you.

Let us know if you need help with anything else.

Joao

[asiitan]

Hi!

One more question – while the sliders are loading on the front page, I do not want to have the annoying broken image icon. FF does not show, with Chrome I got rid of it using text-indent property, but I cannot find any trick for IE and Safari.

http://test.asartists.com/theatrum_1/

Thanks for help!

Andres

[Rad]

Hi there,

Please add this CSS as well,

.ls-slide.ls-animating > img {
display: none;
}

Hope this helps.

[Author]

Posts