Horizontal Scroll bar for only one page?

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>

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.

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

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{
}

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