Module ID reference

[DemOnstar]

Hello. . .

When creating a module, (static html for example) does each module automatically get given it's own number for id purposes?

How does one stylize one individual module without it having any effect on any other?

I would like to position:fixed; one module with additional.css but I can't seem to separate it from the others...

Thank you. . .

Edit:

Okay, I have found out that they do have an ID but now wondering how to asign that with additional.css. .

.canvas-layout-container .canvas-widget {

[shimei]

Interested in learning how. I see that the widget number is displayed in this case it is #widget_168

https://vborg.vbsupport.ru/external/2016/02/16.jpg

[Dave]

Try:
div[data-widget-id="68"]{
// CSS
}


Where 68 is the number of the identifier.

[DemOnstar]

Try:
div[data-widget-id="68"]{
// CSS
}


Where 68 is the number of the identifier.

How does that fit around?

.canvas-layout-container .canvas-widget [data-widget-id="68"]{????

[Dave]

That part is not necessary.

Example.. this will give you access to the header of the block:
div[data-widget-id="68"] .widget-header{
//
}

And this to the content:
div[data-widget-id="68"] .widget-content{
//
}

And that way you can style the individual blocks.

[DemOnstar]

That part is not necessary.

Example.. this will give you access to the header of the block:
div[data-widget-id="68"] .widget-header{
//
}

And this to the content:
div[data-widget-id="68"] .widget-content{
//
}

And that way you can style the individual blocks.

Sorry Dave.
Thanks for your time but I'm just not getting this. . .
The stage I am at now is as follows.

div[data-widget-id="215"] .widget-header{
// position:fixed;
}

But not seeing it. . .

[Dave]

Well you don't literally have to put "//" in there, that was just a placeholder. :)

div[data-widget-id="215"] .widget-header{
position:fixed;
}

[DemOnstar]

Well you don't literally have to put "//" in there, that was just a placeholder. :)

div[data-widget-id="215"] .widget-header{
position:fixed;
}

I tried it both ways. . .and still not getting anything. . .

div[data-widget-id="215"] .widget-header{
position:fixed;
}
div[data-widget-id="215"] .widget-content{
position:fixed;
}

But still just seeing this. .

.canvas-layout-container .canvas-widget {
background: transparent none repeat scroll 0 0;
}

--------------- Added 1454796032 at 1454796032 ---------------

Interested in learning how. I see that the widget number is displayed in this case it is #widget_168

You have any luck with this?

[Dave]

What exactly are you trying to accomplish? Trying to make it a fixed block?

[DemOnstar]

What exactly are you trying to accomplish? Trying to make it a fixed block?

That is exactly what I want to create. . .

What I am trying to achieve is a block that is static whilst the rest of the page scrolls either under and behind it or to it's side. Similarly to we have in the admin cp.
The ideal would be a block that sits at the top of the page and the thread and .b-post__body { scrolls beneath it.

[shimei]

Here's what worked for me. I added a dotted border as an example around only that particular widget:

div#widget_168.b-module.canvas-widget.search-widget {
border:dotted !important;
}


You can see in the below screen shot how I got the class.

https://vborg.vbsupport.ru/external/2016/02/15.jpg

[DemOnstar]

This is what I have so far. . .


div#widget_215 .widget-header {
border-bottom: 2px solid #d8d5df;
border-color: #d8d5df;
margin-bottom: 214px;
padding-bottom: 0;
position: relative;
}
div#widget_215 .widget-header-divider {
border-color: transparent;
}
div#widget_215 .widget-content{
position:fixed;
left: 20px;
top:90px;
z-index:100;
}

Finally achieved. . . but now I can't stop the image from spilling out of the box.

Thanks for the pointers all. . :)