Comments

Hey this is incredible, thank you for this awesome work that allow us to make beautifull game pages, all thanks to you !

宮中眠20 days ago(+1)

This tool is wonderful! Would love to support once we get paid. Would it be possible to ask about manipulating right column / screenshot placement via CSS?

nnda20 days ago(+1)

Thank you for the kind comment and the consideration! And sure, feel free to ask anything! We’re open to any inputs and inquiries.

宮中眠19 days ago(+1)

Thank you! Would it be possible to request a tutorial on how to move the right column beneath the header div?

nnda17 days ago

Hi, sorry for the late reply!

I assume you meant having the screenshot like in the mobile layout of the page?

You can force the mobile layout by setting it as flexbox and reverse the direction:

.columns {
    /*  Reverse the direction (screenshot column on top)  */
    flex-direction: column-reverse;
}
.columns > .column {
    width: auto;
}

/*  Set the screenshot list to display as if its on mobile layout  */
.view_game_page .screenshot_list {
    white-space: nowrap;
    overflow: auto;
    text-align: center;
    font-size: 0;
}
.view_game_page .screenshot_list img {
    display: inline-block;
    margin: 0;
}

宮中眠16 days ago (1 edit) (+1)

Thanks a lot! Been using a friend's game page to experiment with CSS since the feature isn't available on this account yet. If possible to ask, do you have any suggestions for fixing misaligned Video and Screenshot widths like this?

nnda16 days ago

Ah, that little off spacing to the right of the video?

Try this:

.right_col > .video_embed {
    /*  Center video embed  */
    margin: auto;
    /*  Bottom spacing  */
    margin-bottom: .5em;
    /*  Video embed maximum width  */
    max-width: 700px;
}

Its just the margin: auto; that centers it, the rest is optional to tidy things up.

View more in thread

Jack Selleck53 days ago (1 edit) (+1)

This is a very nice tool, I think it would be super cool to include something here which lets us section out the games like you have on your profile

nnda52 days ago (1 edit) (+1)

Thank you for the comments!

For the main projects section, I used Grid layout, and for the collections, I used List layout in the page’s theme editor.

As for the two-column layout of the collections, that was done through this custom CSS:

@media (min-width: 780px) {
  /* Split collections row into two-column layout on desktop */
  .collections {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2em 0 !important;
  }
  .collections .inner_column {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Fade out gradient */
  .collection_row {
    position: relative;
    overflow: hidden;
    margin: 0 0.8em;
  }
  .collection_row::before {
    content: "";
    position: absolute;
    bottom: 0;
    box-shadow: inset -13em 0 9em -2em #0f1116; /* Match the background color */
    pointer-events: none;
    width: 100%;
    height: 76%;
    z-index: 2;
  }
  .collection_row:first-child {
    padding-left: 1.2em;
  }
  .collection_row:last-child {
    padding-right: 1.2em;
  }
}

Jack Selleck51 days ago (2 edits) (+1)

This works well thank you :) i tried doing it using the code on your github but i couldnt get it working, by the way for the new author badge I had to type “jackselleck” rather than “Jack Selleck” for it to work

nnda51 days ago(+1)

Glad it helped! :)

Yea, for my profile page’s CSS, you’d have to build the CSS from the repo first. I’ve put the installation section for that in the readme. Its quite a mess of a system, because I want to save characters count. itch.io limits profile page’s CSS to 5120 characters for some reason :/

And yep, you need your itch.io’s username, instead of the display name for the Author Badge.

VegeTato71 days ago(+1)

Very useful tool ! Thank you <3

Can you please add a section for components like hover on a game window on creator page/Outline/some tweens and other cool CSS effects ? :)

nnda71 days ago(+1)

Thank you for the comments!

I’ve been a little hesitant on adding hover effects or animation-related stuff. Since I’m aiming more on CSS stuff for the page’s content.

But I do plan on adding more decorations, including animation-related tweaks.

And if or when there’s the components/tweaks like you’ve described, it’ll probably be under the ‘Decorations’ or ‘Tweaks’ section/category :)

VegeTato70 days ago(+1)

Thank you <3

CSS Hover effects and animated stuff, or even a tiny outline, can give a huge boost to the user itch store page and make it look appealing !
Hope to see it soon in your tool :)

Sheyne86 days ago

Hello, any way to get the code for the Preview Theme switcher ? I would love to add a swicther like that in my page

nnda86 days ago (2 edits) (+2)

Hi, the buttons are actually just radio-type <input> elements. I don’t think you can insert it in project pages directly, since input/form elements will be sanitized.

The project is open source. Here’s the snippet of the codes that makes the buttons if you’re interested:
Script: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/scripts/themes.ts#L61C1-L74C7
Styling: https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/styles/_input.scss#L107C1-L140C2

Sheyne86 days ago(+1)

Thank you very much for your answer, it is awesome to see that you are still very active!

Marwan_Tm1197 days ago(+1)(-3)

Hello, I liked the idea of the program, but I want a Linux version AppImage

IRON307 days ago(+1)

This really helps a lot thank you :-)

Sofy342 days ago

any way to make those “Responsive layout adapts to different screen sizes “ boxes? :3

nnda342 days ago

thats not a part of the css components actually 😅 but heres the html & css source code for those https://gist.github.com/nndda/63ff54c575dbb9e9f6158dc8a446c0db

Sofy342 days ago

awww tysm :D

Pitch – CSS Components and Tweaks for Your Project Pages

Comments