Search…

X3 Photo Gallery Support Forums

Search…
 
mrSLK
Topic Author
Posts: 11
Joined: 10 Sep 2016, 00:25

Documentation Code Sample

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
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12964
Joined: 30 Sep 2006, 03:37

Re: Documentation Code Sample

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:
Code
/* 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/
 
User avatar
christianch
Experienced
Posts: 33
Joined: 08 Mar 2021, 03:27

Re: Documentation Code Sample

19 Sep 2021, 06:18

:thumbsup: thank for the css
 
mrSLK
Topic Author
Posts: 11
Joined: 10 Sep 2016, 00:25

Re: Documentation Code Sample

19 Sep 2021, 10:05

Hi Mjau,

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

Thank you