MG 2.2 Media Slider Background color

[PapaTango]

It seems that the styling of the media slider is inherited from major elements of the global theme. I would like the background to go away around the image thumbnails & footer, becoming transparent to the underlying page wrapper theme. The issue is that the elements used are .block-body and div.block-container. Any css changes to these are global to every instance of this--not what I want.

I have tried to localize this through a data-widget-id number instruction, but nothing seems to have any effect.

Anyone have any thoughts, or is this just one step too far granular in styling?

 

[Paul B]

You can target the widget using:

[data-widget-key="xfmg_media_slider"]
{
    custom less here
}

Can you post what you have entered.

 

[PapaTango]

Below is what I put into the extra.less file. It makes no changes.

I am using three new widget sliders as you see titled in the code. This all shows up perfectly in the inspector console. But no happiness. I had also tried another form of this by adding the widget ID's as this:

[data-widget-id="48"] {
    background: none;
}

"48" is the home_galleries_slider widget. That did nothing either. Here is what I put into extra.less:

[data-widget-key="xfmg_media_slider"] {
    background: none;
}
[data-widget-key="home_galleries_slider"] {
    background: none;
}
[data-widget-key="home_groups_slider"] {
    background: none;
}
[data-widget-key="home_albums1_widget"] {
    background: none;
}

I also did a version with the dreaded !important flag. You can inspect the sliders at https://fotofora.net

Thoughts?

 

[Paul B]

You need to specify the class.

[data-widget-key="xfmg_media_slider"]
{
    .block-container
    {
        background: none;
    }
}

 

[PapaTango]

@Brogan thank you for the other ID bit you sent along. It absolutely did the trick.

I have learned from this how to apply different behaviors in CSS just by identifying the class and applying the conditions! Great stuff...