this is great! any way to hide the cell #?

[sg-s]

trafficstars

[oceanumeric]

Check out this post: https://oceanumeric.github.io/blog/2022/jupyter-style/

[sg-s]

thanks @oceanumeric ! that's great -- where do i put the extra.css file?

[oceanumeric]

@sg-s my pleasure. Put it under the stylesheet folder and update your yml file like this:

[oceanumeric]

@sg-s by the way, I just updated the css file and make the website to have a consistent theme when it is switched to the dark model.

[sg-s]

thank you so much! i'll try this out!

[sg-s]

@oceanumeric thank you so much for your help. i used your suggestions and i have something that looks like this now:

(that's the input code cell, collapsed). is there some way to make the gray border go away? i've tried to inspect elements and set borders to zero but nothing seems to work. i think i'm not targeting the right CSS class.

any help appreciated!

[oceanumeric]

@sg-s you are welcome. It should not be like that. Could you copy your css file here? I will have a look and try to fix it. Or try to add the following code to your css file.

.jp-CodeCell > .jp-Cell-inputWrapper {
    direction: rtl;
    width:113%;
}

.jp-InputArea-prompt {
    visibility: hidden;
} 

.jp-OutputArea-prompt {
    visibility: hidden;  /* disable this to tune the position */
    background-color:red; 
    position:absolute;
    right: 0;
    
}

.jp-CodeCell > .jp-Cell-outputWrapper {
    margin-top: -10px;
    padding-top:0;
    display: table-cell;
    text-align: left;
}
.jp-Cell-outputWrapper > .jp-Cell-outputCollapser {
    /* background-color:red; */
    margin-top: -17px;
}

[sg-s]

@oceanumeric thank you!

this is what i'm using (copied from your code):

.jp-CodeCell > .jp-Cell-inputWrapper {
    direction: rtl;
    width:100%;

}

.jp-InputArea-prompt {
    visibility: hidden;
} 

.jp-OutputArea-prompt {
    visibility: hidden;  
    background-color:red; 
    position:absolute;
    right: 0;
    
}

.jp-CodeCell > .jp-Cell-outputWrapper {
    margin-top: -10px;
    padding-top:0;
    display: table-cell;
    text-align: left;
}
.jp-Cell-outputWrapper > .jp-Cell-outputCollapser {

    margin-top: -17px;
}


/* Jupyter code block expand and collapse*/
.expandClass {
    border: 1px solid #7D838A;
    color: #7D838A;
    border-radius: 3px;
    padding-left:2px;
    padding-right:2px;
    margin-right:3px;
    }
.active, .expandClass:hover{
    background: #7D838A;
    color:white;
}
.jupyter-wrapper  .highlight-ipynb {
    display:none;
}
.zeroclipboard-container {
    position: relative !important;
    float:right;
}

[pjbull]

If you are just looking to hide the input/output numbers, we just use:

/* hide jupyter notebooks input/output numbers */
.jp-InputPrompt {
  display: none !important;
}

.jp-OutputPrompt {
  display: none !important;
}

[danielfrg]

Just CSS works for now but also closing in favor of #170