Hi! Yes I don't mind sharing the CSS or content, although I'm not sure that itself will make it easy to isolate and recreate the desired features. I uploaded the entire content folder in a ZIP (1.7MB). You can find the custom CSS in /content/custom/files/css/x3.docs.3.include.css. I believe you
https://www.photo.gallery/docs/x3docs.zip
mrSLK wrote:1. The on-mouse over highlight over the Number
I believe CSS from this section:
/* NUMBERING */
.numbered::first-letter, ol:not(.orbit-bullets)>li:before {
background: rgba(0,0,0,.05);
padding: .1em .55em .15em;
font-size: .9em;
border-left: 1px solid rgba(0,0,0,.15);
margin-right: .15em;
border-radius: 0 3px 3px 0;
transition: all .2s;
}
p.numbered::first-letter {
font-weight: 400;
}
ol:not(.orbit-bullets)>li:before {
padding-bottom: .02em;
color: #48545a;
font-weight: 400;
vertical-align: top;
}
ol:not(.orbit-bullets)>li:hover:before {
border-color: #78a642;
background: rgba(0,0,0,.1);
}
mrSLK wrote:2. How you add picture in the middle of the page and made it so that i could enlarge it (the + button)
That's not really any custom CSS. It's just an image added to content, and therefore is limited to the same width as the content (text). When clicked, it simply uses the X3 popup, which is fully available to use for custom images in your content:
https://demo.photo.gallery/examples/plugins/popup/