Mastering the layout, more doc/examples?

[mbojan]

Thanks for the great package!

Can you please write a bit more about how to customize/modify layout with {.col-x} and other properties? A vignette or more examples in README perhaps?

I am not familiar with CSS Grid so changing this is a total trial-and-error process currently...

[bbucior]

In case you hadn't seen it, there's slightly more documentation/example in the Rmd source code for the README.

Admittedly the package can only do simple layouts in its present state (though I have some ideas on how to fix that). Currently the base concepts are heavily inspired by a 12-column grid from bootstrap, though the notation sets a block width to 1/x of the page, not bootstrap-cols/12.

Can I help you with a specific layout?

[mbojan]

I luckily managed to get my poster as I wanted. I did find the Rmd source, it was helpful. It took me a while to figure out the following things. I think it will be beneficial for your users to document it somewhere (vignette/readme).

• More examples of using {.col-x} without referring to Bootstrap. Just show a couple of cases such as having a section for the full width of the poster, then some sections in two columns, and last section for the full width again. That's just an example. For me it was not clear how to use these top sections to get the layout I want
• I took me while to find out how to make within-section (box) text to not be in two columns, namely <div class="fullwidth">.

All in all, more examples will be helpful. That's just a suggestion.

And this is my drposter :)

[jaime955]

Dear Benjamin, I would like to insert a logo in the right side of the title section. Is that posible? Do you have a template with this condition? Thank you in advance Jaime

[bbucior]

Hi Jaime, I had never gotten around to implementing that feature, but was able to try out a quick proof-of-concept this evening. In your .Rmd file, after the top yaml block and before your markdown begins with # {.col-1} or other document contents, please try inserting the following HTML and CSS:

<style>
  .slides > header { grid-column: span 10 / 12; /* keeping 1/12 of the width on both sides */ }
  .slides > .logo-left { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
  .slides > .logo-right { grid-column: span 1 / 13; }
  .slides > .header-logo { margin: auto; }
  .slides > .header-logo > img { width: 100%; height: auto; }
</style>
<!-- replace https://raw.githubusercontent.com/bbucior/drposter/master/inst/sticker/drposter.png with your logo -->
<div class="header-logo logo-left">
  <img src="https://raw.githubusercontent.com/bbucior/drposter/master/inst/sticker/drposter.png">
</div>
<div class="header-logo logo-right">
  <img src="https://raw.githubusercontent.com/bbucior/drposter/master/inst/sticker/drposter.png">
</div>

[jaime955]

Hello Ben, It works amazing, thank you so much!!! However, the logos look too small, any idea of how to resize it? Thanks again for your time Jaime

[bbucior]

Awesome. Thanks for the suggestion! Sizing will be a nice option if the logo feature makes its way into the drposter package or a successor. Please see the revised css below, including a logo-width option ranging from 0-100% (relative to a logo size of 1/6 of your poster's width).

<style>
  .slides > header { grid-column: span 8 / 11; /* keeping 2/12 of the width on both sides */ }
  .slides > .logo-left { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
  .slides > .logo-right { grid-column: span 2 / 13; }
  .slides > .header-logo { margin: auto; }
  .slides > .header-logo img { width: var(--logo-width); height: auto; }
  .slides > .logo-left img { --logo-width: 100%; margin-left: 0; margin-right: calc(100% - var(--logo-width))}
  .slides > .logo-right img { --logo-width: 10%;  margin-right: 0; margin-left: calc(100% - var(--logo-width))}
</style>

[jaime955]

Thank you Ben, the sizing works very well. Now I am trying to align the logo in front of the title. Any suggestion is welcome. Pleas see the picture. Thanks again Jaime

[bbucior]

Hi Jaime, I haven't thought of a permanent fix yet. One thing you could try is replacing one of the lines with <div class="header-logo logo-left" style="margin-top: 0;"> (or another size like 10px to adjust it). Good luck with your poster!

[jaime955]

Dear Ben, it works perfectly, thank you so much for your help. Jaime

On Fri, Jun 30, 2023 at 5:25 PM Ben Bucior @.***> wrote:

Hi Jaime, I haven't thought of a permanent fix yet. One thing you could try is replacing one of the lines with

(or another size like 10px to adjust it). Good luck with your poster!

— Reply to this email directly, view it on GitHub https://github.com/bbucior/drposter/issues/6#issuecomment-1615209241, or unsubscribe https://github.com/notifications/unsubscribe-auth/BA4N2PRTAWU7GBWR5LFIJALXN476FANCNFSM4FVHN4TQ . You are receiving this because you commented.Message ID: @.***>

[jaime955]

Dear Ben, it works perfectly, thank you so much for your help. Jaime