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

[Dave]

Try:

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

Where 68 is the number of the identifier.

[DemOnstar]

Originally Posted by Dave

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]

Originally Posted by 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.

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]

Originally Posted by 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;
}

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 [DATE]1454796032[/DATE] at [TIME]1454796032[/TIME] ---------------

Originally Posted by shimei

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]

Originally Posted by Dave

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.