Hello,

I’ve just updated with today’s latest version of Enfold (4.5.2) and that solved the issue described in my first post above.
Thanks guys, everything is now back on track.

You can now close this thread.

Best regards,
Stephane

Hi Victoria,

Thanks to your precious help!
I’m not far from the original target now.

There are still 2 issues that I’m not able to resolve by myself, most likely due to Enfold default framework for tables:

1 – Adjust height of the table row for .Event-Tr1 to a lower value that 70px.
I can increase the height for values above 70px with “.Event-Date td.Event-Td1 {width: 80px;}” but now below …

2 – The text in table .Event-Tr2 ( with .Event-Trft5) does not inherit the color of the rest of the table specified for .Event-Date (which, in tis case, is color: var(–ColJAN);). Instead of it takes a light grey color.
Is there a way to have this color naturally inherited like the rest of the table?

In order to get things clearer, I’ve made a capture of the label structure and posted it on imgur at https://imgur.com/a/LMMyg
On this image the borders have been displayed and paddings / margins added to better show the details of what belongs to what.

Thanks to you, the CSS code for this label is summarised hereafter:

.avia_codeblock .Event-Cell { position: relative; margin: 8px 4px; width: 504px; border-style: solid; border-width: 2px 5px 2px 8px; border-radius: 20px; padding: 4px 4px 4px 4px; height: 140px;}
.avia_codeblock .Event-Date {width: 192px; border-right-width: 1px; border-right-style: dashed; display: inline-block;}
.Event-Date.Resa-Open {background-color: white; border-radius: 12px 0px 0px 12px;}
.avia_codeblock .Event-Date.Resa-Close {background-color: #DCDCDC; border-radius: 12px 12px 12px 12px;}

.avia_codeblock_section.avia_code_block_0 table { width: 180px; margin: 5px; padding: 8px; border-spacing: 0px; border: 2px solid red; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-collapse: separate; font-family: “Gruppo-Regular”, Georgia, serif; }
.avia_codeblock_section.avia_code_block_0 tr {border: none; padding: 0px;}
.Event-Date tr.Event-Tr1 {height: 50px;} /* no effect if height > 70 px */
.Event-Date tr.Event-Tr2 {text-align: left; height: 24px;}

.avia_codeblock_section.avia_code_block_0 td {border: 1px solid black; padding: 0px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.Event-Date.Resa-Open td {background: white; }
.Event-Date.Resa-Close td {background: yellow;}
.Event-Date td.Event-Td1 {width: 60px; text-align: right;}
.Event-Date td.Event-Td2 {padding: 0px 10px 0px 10px; text-align: center;}

.Event-Trft1 { line-height: 40px; font-size: 53px; font-weight: bold; position: relative; bottom: -10px;}
.Event-Trft2 { font-size: 42px; padding-top: 0; position: relative; bottom: -4px;}
.Event-Trft3 { line-height: 27px; font-size: 27px; padding-top: 0; position: relative; bottom: 8px;}
.Event-Trft4 { line-height: 17px; font-size: 17px; position: relative; bottom: 14px;}
.Event-Trft5 { line-height: 24px; font-size: 24px; padding: 0px; font-weight: bold;}

.Aix {background-image: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Provence-Aix_op.png”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.Antilles {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Antilles_op.png”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.OPEN:hover {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Resa-open_op.jpg”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.CLOS:hover {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Resa-close_op.jpg”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box; cursor: crosshair;}

@media only screen and (min-width: 551px) {
.EventLoca {width: 292px; height: 80px; position: absolute; top: auto; left: auto; border-radius: 8px; display: inline-block;}
}

@media only screen and (max-width: 550px) {
.Event-Cell { width: 317px;}
.Event-Date {width: 317px; border-right-width: 0px;}
.EventLoca {width: 292px; height: 80px; position: relative; width: 100%; margin: 0 auto; border-radius: 8px; display: inline-block;}
.DateTable {margin-left: 80px;}
.Resa-Open {border-radius: 12px;}
}

:root {
–ColJAN: #2f75b5;
–ColFEV: #27adc3;
–ColMAR: #3cbe96;
–ColAVR: #00e200;
–ColMAI: #b5d901;
–ColJUI: #f2be00;
–ColJUL: #ff8000;
–ColAOU: #ec1e1e;
–ColSEP: #e8346f;
–ColOCT: #b72f8c;
–ColNOV: #89258d;
–ColDEC: #3d4999; } */

Thanks once more for your help / advice.

Berst regards,
Stephane

Hi Victoria!
Thanks a lot for your precious information that puts me on the good track and my applogies for not being able to come back to you before today.

Thanks Andy!
I’ll come back to you as soon as possible.
Best regards,
Steph.

ENFOLD Framework

Thanks for your implication and taking this issue into consideration Ismael.

Best regards,

Steph.

Hi Andy,
I was not asking for support for a 3rd party plugin in my previous post.
I just wanted you to read the reply of one of this plugin author who was stating that this function ” is something that a “theme” would control” …

Anyway, I understand that from your point of view, this is beyond Enfold’s support scope.

Thank you for the link to the recommended plugin and have a great week.
This topic can now be closed,
Steph.

Hi Rikard,

Thanks for your quick reply!
My intent is to allow the person visiting the site to see the entire background image, if interrested in doing so.
As the main page content is in front, I will need to “hide” it to show the entire background image.
I can achieve this by adding a CSS instruction to Quick CSS: #main { display: none; }

So now the question is how can this “displaying on/off” action be achieved by the visitor (if interrested)?
I was thinking that the most intuitive way for the visitor would be to mouse click directly on the background image, outside the main content of the page.

That might not be an easy one!!
Thanks in advance,
Steph.

Hi Andy / Enfold Team, I got the problem solved so this topic can now be closed!
Thanks

Thank you Yigit!

We’re getting there: it works fine for large screens but has no effect on mobile devices.
On mobiles devices, the active tab background color stays blue and the active tab content keeps off-white as by default.
I’m OK with the off-white for the tab content, but the blue of the active tab is a bit far from my expectations!

I’ve also tried the following:
.js_active .tab_content { background: white; }
and: .tab.tab_counter_0.active_tab { background-color: white; }

Whitout success …

Thanks and have a nice day,
Steph.

Hi Yigit!

Thanks a lot for your help. It works great.

The other design issue I”m facing is concerning the active tab background color.
I would like both the active and inactive tabs to have a white backgroung (as well as the active tab content).
Right now, I’m missing the white backgroung for the active tab : it is light grey for desktop screen size and blue of mobile devices.

Thanks in advance to let me know how you would close this gap!

Steph.

Hi Elliott,

As you’ll see on the screenshot http://i.imgur.com/w5SkDxA.jpg
There are 2 images circled in RED that are NOT part of the current fullscreen backgroud image (the dandelion) because I’ll soon have a fullscreen background slide show on which I DON’T want to show these 2 images nor the header menu (div#header_main_alternate) and the main page content (#main).
During the background slide show, ONLY the logo image on top (iDetox.voyage) circled in BLUE will be displayed.
The slide show plugin allows me hide both the main page content (#main) and the header menu bar (#header_main_alternate) during the slide show.
Once the slide show ends, both the header menu bar and main page content are display again.

Currently I have the 2 images circled in red that are hooked to ava_main_header in my function.php file
My custom.css file displays these elements according the size of the device screen.
With this configuration, these images are linked to the div#header_main (where my logo is displayed) … and therefore I cannot hide them without also hidding the logo.
If possible, I would prefer to keep displaying the top logo while the slide show is on.

What would you suggest to have these 2 images circled in red linked to the header menu bar (#header_main_alternate), or even the main page content (#main), intead of being linked/hooked to div#header_main?
Can I use/create a simiular function custom_func() { …} + add_action(‘ava_main_header_alternate’, ‘custom_func’)?
Maybe there is an easier way to achieve this goal.

Regards,
Steph.

Hi Josue!
I wish you all the best for 2016.

Thanks for your reply.
I can indeed use your PHP code to display some text or an image.

The issue I face is that the text or image is displayed above the logo area, as if it is adding a new div section on top of the page.
Is there a way to display text of an image on top of the logo area itself (within the frame of my logo image, not above)?

Thanks in advance for your advice and have a great day,
Steph.

Hi Elliott!

Thanks a lot for your help, it works great (even without the !important).

I wonder why I always loose so much time trying to figure it out myself with my limited knwoledge of CSS when you have it at your fingertips …

Have a great day Elliott!
Best regards,
Steph.

Hi Yigit and thanks for your quick reply!
The accordion is on the home page.

Regards,
Steph.