Hi!
It’s possible align the content with TOC with header image on posts?
Thanks!
This is the default Casper CSS code :
.gh-canvas {
display: grid;
grid-template-columns: [full-start] minmax(max(4vmin,20px),auto) [wide-start] minmax(auto,240px) [main-start] min(720px,calc(100% - max(8vmin, 40px))) [main-end] minmax(auto,240px) [wide-end] minmax(max(4vmin,20px),auto) [full-end];
}
It would be most helpful if you could provide a link to the published page so we can inspect the totality of the code currently generating the layout.
Thanks for reply me @denvergeeks ,
My site: Cómo instalar AdGuard Home en Synology
I have to say that also, the official Ghost tutorial for adding TOC, doesn’t work well with Casper 5. I posted a Bug on Github but I didn’t get a response yet:
TOC Bug with Casper 5.X
It can be “fixed” by adding “margin-bottom: X-px;” to .gh-toc. But it’s a botched.
Thanks for all.
I’m still unclear as to what you want the result to look like, but if you want to maintain the width and spacing of both the content and your TOC, and just center them together on the page, then try this…
.gh-content {
justify-content: end
}Seems not work correctly…
With this CSS code seems to work “fine”:
@media (min-width: 1300px) {
.gh-content {
margin-left: 220px;
}}
.
@Joan I just tested the installation instructions for the TOC here…
I tested on a fresh site install on Ghost v 5.2.2 and Casper v 5.1.4
Everything worked perfectly.
Changing some of the widths and spacing in the CSS to prettify your TOC (which looks very nice!) pushed around some other positioning on the page. I still don’t see everything centering or aligning consistently yet on your site when I resize the page.
Thanks for testing all,
Can you test adding a lot of H1, H2 elements? TOC seems to work fine with Casper 5 but if the TOC has a lot of elements like in my image… it’s create a blank space on gh-content.
What is the URL of your page with a problem?
Yes I have the same large space issue, but only under the first h2, even without any of your CSS adjustments.
Also, I think the solution to your larger content layout is with the grid-template-columns…
@TheRoyalFig has worked on this…
Here’s another post that might help explain what’s going on in Ghost…
For example this:
https://hdsplus.co/como-instalar-rtorrent-rutorrent-en-tu-nas-synology/
So far I’m noticing that the space is always to the right of the TOC and extends down to the bottom edge of the TOC… so, the same height as the TOC. It doesn’t seem related to headings like h2 because when I remove the first one at the top of my content, the problem persists with just the p paragraph text being bumped down after the first paragraph.
I also tried the Headline theme with the same result.
OK, so try adding this in the CSS… (to fix the added space problem next to the TOC)
.gh-toc > .toc-list {
position: absolute;
}Yes! seems to work correctly. In my case not because the .gh-toc “background-color” it cuts. But with “default css design” without background color it’s work with “absolute” position. Something happens with relative position and the blank space… It’s strange…
If you try to add “margin-bottom: X-px” to .gh-toc in relative position it’s seems to repair, but…
Thank you for your time and help
Try this instead for constructing your pretty box…
<style>
.gh-toc {
margin-right: 4vmin
}
.gh-toc > .toc-list {
box-shadow: 0 10px 50px rgb(25 37 52 / 14%), 0 2px 5px rgb(25 37 52 / 3%);
border-radius: 2rem;
padding: 30px
}
@media (min-width: 1300px) {
.gh-toc > .toc-list {
position: absolute
}
}
.toc-link::before {
background-color: #fff;
margin-left: 10px
}
html.dark-mode .gh-toc > .toc-list,
html.dark-mode .gh-toc .toc-link::before {
background: #222128
}
html.dark-mode .gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color)
}
</style>
Here’s my working sample…
https://ghost.pub/test-for-toc/
(And below is a screenshot of that page)
Yes!!! Only one more thing… with your CSS code… only works with “auto” scheme color. With “Dark” scheme of Casper… your CSS shows it like this:
And if you view your demo site with iPhone for example Its shown wrong, but this could be fixed by applying “absolute” starting at 1300px screen .
You are correct… thank you for catching that… here is the whole CSS override, including Dark Mode and the fix for small screens…
<style>
.gh-toc {
margin-right: 4vmin
}
.gh-toc > .toc-list {
box-shadow: 0 10px 50px rgb(25 37 52 / 14%), 0 2px 5px rgb(25 37 52 / 3%);
border-radius: 2rem;
padding: 30px
}
@media (min-width: 1300px) {
.gh-toc > .toc-list {
position: absolute
}
}
.toc-link::before {
background-color: #fff;
margin-left: 10px
}
html.dark-mode .gh-toc > .toc-list,
html.dark-mode .gh-toc .toc-link::before {
background: #222128
}
html.dark-mode .gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color)
}
</style>
It’s work perfectly!!
Thanks you so much!
It was my pleasure! I’m so glad I could help!
Your site is looking really great!
Hi!
I have a “problem”. Could you help me?
I have added a style to “.gh-content li” so that the numbers are displayed differently. But… it is also added to the ToC.
The custom CSS code:
.gh-content ol {
margin: 0;
padding: 0;
list-style-type: none;
}
.gh-content li {
counter-increment: step-counter;
margin-bottom: 5px;
}
.gh-content li:before {
content: counter(step-counter);
margin-right: 20px;
font-size: 85%;
background-color: rgb(180, 180, 180);
color: white;
font-weight: bold;
padding: 3px 9px;
border-radius: 11px;
}
For Example:
it’s possible hide on ToC element?
I tried adding
.gh-toc li:before { list-style-type: none!Important;}
but unsuccesful.
Thanks you so much
Yes @Joan – use the CSS :not Selector
:not(.gh-toc) {
css declarations;
}
SOLVED! Thanks you so much!!! 