Horizontal Scroll bar for only one page?
-
I need the horizontal scroll bar for only one page, how to do this?
-
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>
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 settingsI 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
- The topic ‘Horizontal Scroll bar for only one page?’ is closed to new replies.