Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Andi Dittrich

    (@andi-dittrich)

    you have to inject custom css into this single page (e.g. create a custom wordpress template or match the post/page id). another method is to add a unique css class to the body which identifies the page/post by its id e.g. page-<pageid>

    Thread Starter bluebit

    (@bluebit)

    what’s the actual code I paste into the custom css?

    • This reply was modified 3 years, 6 months ago by bluebit.
    • This reply was modified 3 years, 6 months ago by bluebit.
    Plugin Author Andi Dittrich

    (@andi-dittrich)

    please take a look into the EnlighterJS css files – you have to modify the code to match your needs:

    
    .enlighter-overflow-scroll.enlighter-v-standard {
        overflow-x: auto;
        word-wrap: normal!important
    }
    
    .enlighter-overflow-scroll.enlighter-v-codegroup .enlighter-codegroup-wrapper {
        overflow-x: auto;
        word-wrap: normal!important
    }
    
    .enlighter-overflow-scroll.enlighter-v-codegroup .enlighter>div>div, .enlighter-overflow-scroll.enlighter-v-standard .enlighter>div>div {
        white-space: pre!important
    }
    
    .enlighter-overflow-scroll.enlighter-v-codegroup .enlighter-raw, .enlighter-overflow-scroll.enlighter-v-standard .enlighter-raw {
        white-space: pre!important
    }
    

    the selector .enlighter-overflow-scroll.enlighter-v-standard can be replaced by .enlighter-default to apply the horizontal “overflow scroll” to all codeblocks on the current page independently from the global overflow settings

    Thread Starter bluebit

    (@bluebit)

    I tried it but it didn’t appear to work.

    Here is my raw stylesheet code:

    /*@BASETHEME:enlighter*/
    
    .enlighter-t-wpcustom{
    	border-radius: 8px;
    	border: solid 1px #e0e0e0;
    }
    .enlighter-t-wpcustom .enlighter-btn{
    	border-radius: 3px;
    	padding: 0;
    	border: 1px solid #e0e0e0;
    	margin: 0 0 0 8px;
    	text-decoration: none;
    	width: 23px;
    	height: 23px;
    	background-position: 0 0;
    	background-size: contain;
    }
    .enlighter-t-wpcustom .enlighter-btn:hover{
    	border-color: #c9c9c9;
    }
    .enlighter-t-wpcustom .enlighter-btn:after{
    	content: '';
    }
    .enlighter-t-wpcustom.enlighter-hover.enlighter-linenumbers div.enlighter>div:hover{
    	color: #444;
    	background-color: #fffcd3;
    }
    .enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover{
    	color: #444;
    }
    .enlighter-t-wpcustom .enlighter-raw{
    	border-radius: 8px;
    	padding: 0 5px 0 60px;
    }
    .enlighter-t-wpcustom div.enlighter>div{
    	border: solid 0 #fff;
    	line-height: 1.35em;
    	color: #aaa;
    }
    .enlighter-t-wpcustom div.enlighter>div:FIRST-CHILD{
    	border-radius: 8px 8px 0 0;
    }
    .enlighter-t-wpcustom div.enlighter>div:LAST-CHILD{
    	border-radius: 0 0 8px 8px;
    }
    .enlighter-t-wpcustom div.enlighter>div.enlighter-special{
    }
    .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before{
    	border-right: solid 1px #e0e0e0;
    }
    .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:FIRST-CHILD::before{
    	border-radius: 8px 0 0 0;
    }
    .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:LAST-CHILD::before{
    	border-radius: 0 0 0 8px;
    }
    .enlighter-t-wpcustom .enlighter-text{
    	color: #000;
    }
    .enlighter-t-wpcustom .enlighter-c0{
    }
    .enlighter-t-wpcustom .enlighter-c1{
    }
    .enlighter-t-wpcustom .enlighter-c2{
    }
    .enlighter-t-wpcustom .enlighter-c9{
    }
    .enlighter-t-wpcustom .enlighter-k0{
    }
    .enlighter-t-wpcustom .enlighter-k1{
    }
    .enlighter-t-wpcustom .enlighter-k2{
    }
    .enlighter-t-wpcustom .enlighter-k3{
    }
    .enlighter-t-wpcustom .enlighter-k4{
    }
    .enlighter-t-wpcustom .enlighter-k5{
    }
    .enlighter-t-wpcustom .enlighter-k6{
    }
    .enlighter-t-wpcustom .enlighter-k7{
    }
    .enlighter-t-wpcustom .enlighter-k8{
    }
    .enlighter-t-wpcustom .enlighter-k9{
    }
    .enlighter-t-wpcustom .enlighter-k10{
    }
    .enlighter-t-wpcustom .enlighter-k11{
    }
    .enlighter-t-wpcustom .enlighter-e0{
    }
    .enlighter-t-wpcustom .enlighter-e1{
    }
    .enlighter-t-wpcustom .enlighter-e2{
    }
    .enlighter-t-wpcustom .enlighter-e3{
    }
    .enlighter-t-wpcustom .enlighter-e4{
    }
    .enlighter-t-wpcustom .enlighter-s0{
    }
    .enlighter-t-wpcustom .enlighter-s1{
    }
    .enlighter-t-wpcustom .enlighter-s2{
    }
    .enlighter-t-wpcustom .enlighter-s3{
    }
    .enlighter-t-wpcustom .enlighter-s4{
    }
    .enlighter-t-wpcustom .enlighter-s5{
    }
    .enlighter-t-wpcustom .enlighter-n0{
    }
    .enlighter-t-wpcustom .enlighter-n1{
    }
    .enlighter-t-wpcustom .enlighter-n2{
    }
    .enlighter-t-wpcustom .enlighter-n3{
    }
    .enlighter-t-wpcustom .enlighter-n4{
    }
    .enlighter-t-wpcustom .enlighter-n5{
    	text-decoration: underline;
    }
    .enlighter-t-wpcustom .enlighter-m0{
    }
    .enlighter-t-wpcustom .enlighter-m1{
    }
    .enlighter-t-wpcustom .enlighter-m2{
    }
    .enlighter-t-wpcustom .enlighter-m3{
    }
    .enlighter-t-wpcustom .enlighter-g0{
    }
    .enlighter-t-wpcustom .enlighter-g1{
    }
    .enlighter-t-wpcustom .enlighter-t0{
    }
    .enlighter-t-wpcustom .enlighter-t1{
    }
    .enlighter-t-wpcustom .enlighter-t2{
    }
    .enlighter-t-wpcustom .enlighter-t3{
    }
    .enlighter-t-wpcustom .enlighter-t4{
    }
    .enlighter-t-wpcustom .enlighter-t5{
    }
    .enlighter-t-wpcustom .enlighter-t6{
    }
    .enlighter-t-wpcustom .enlighter-t7{
    }
    .enlighter-t-wpcustom .enlighter-t8{
    }
    .enlighter-t-wpcustom .enlighter-x1{
    }
    .enlighter-t-wpcustom .enlighter-x2{
    }
    .enlighter-t-wpcustom .enlighter-x10{
    }
    .enlighter-t-wpcustom .enlighter-x11{
    }
    .enlighter-t-wpcustom .enlighter-x12{
    	text-decoration: underline;
    }
    .enlighter-t-wpcustom .enlighter-x13{
    }
    .enlighter-t-wpcustom .enlighter-x14{
    }
    .enlighter-t-wpcustom .enlighter-x15{
    }
    .enlighter-t-wpcustom.enlighter-v-inline{
    	border-radius: 3px;
    	background-color: #fafafa;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter,.enlighter-t-enlighter.enlighter-v-codegroup .enlighter-raw{
    	border-top-left-radius: 0;
    	border-top-right-radius: 0;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter div:first-child{
    	border-radius: 0;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-wrapper{
    	position: relative;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch{
    	border-radius: 8px 8px 0 0;
    	background-color: #f9f9f9;
    	border-bottom: 1px solid #e0e0e0;
    	padding: 5px 5px 5px 45px;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn{
    	padding: 3px 10px 3px 10px;
    	border-radius: 4px;
    	border: 1px solid #e0e0e0;
    	width: auto;
    }
    .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active{
    	background-color: #e5e5e5;
    	color: #000;
    	border-color: #c9c9c9;
    }
    .enlighter-t-wpcustom .enlighter span{
    	color: #333;
    }
    .enlighter-t-wpcustom div.enlighter>div.enlighter-special:hover{
    }
    .enlighter-t-wpcustom .enlighter-x16{
    }
    Plugin Author Andi Dittrich

    (@andi-dittrich)

    your theme code looks incomplete but the code above should work flawlessly – it’s just copied from the sources.

    you can also use .enlighter-t-wpcustom as selector in case thats the only theme your using

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Horizontal Scroll bar for only one page?’ is closed to new replies.