Photo Gallery Forums

Posted: **07 Sep 2021, 12:37**

Hi mjau-mjau,

Will you be able to share the content of your documentation page (Specifically this page https://www.photo.gallery/docs/setup/installation/) ? and maybe the css ?

2 things I'm looking for:
1. The on-mouse over highlight over the Number
2. How you add picture in the middle of the page and made it so that i could enlarge it (the + button)

Thank You

Posted: **08 Sep 2021, 00:30**

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/

Posted: **19 Sep 2021, 06:18**

:thumbsup: thank for the css

Posted: **19 Sep 2021, 10:05**

Hi Mjau,

Appreciate the help, I got what I needed from it.

Thank you

Photo Gallery Forums

Documentation Code Sample

Documentation Code Sample

Re: Documentation Code Sample

Re: Documentation Code Sample

Re: Documentation Code Sample