Attention box - theme feature or plugin?

Hi there,

That can be done with some HTML and CSS.

So try this in the page content:

<div class="yellow-box">
    content here
</div>

With this CSS:

.yellow-box {
    background: none repeat scroll 0 0 #ff9;
    clear: both;
    overflow: hidden;
    border: 1px solid #e5e597;
    margin-bottom: 25px;
    padding: 20px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thanks Leo! I installed Simple CSS and it worked!

I have a follow-up question though - it seems that content inside the box has a bottom margin of 25px (possibly because the content inside is a <p> paragraph).

1) Should I adjust <p> in main css file or via Simple CSS as overwriting?
2) Is there an equivalent of Simple CSS that I could use for the main stylesheet?

I have some CSS experience but I'm happy to get more

1) It has margin-bottom: 25px because it's added in the CSS of .yellow-box above: https://generatepress.com/forums/topic/attention-box-theme-feature-or-plugin/#post-374453

You can just remove that line.

2) Not sure what you mean? You don't want to add anything to the theme's stylesheet as it will get erased during updates.

Thanks Leo!

1) I was referring to the paragraph content inside the box. I said it was 25px, but now when I was checking it was 32.3. I attached a screenshot here http://imgur.com/a/ixMNW. I would like to eliminate that 32.3px space.

2) You're right :) I didn't realize

Try this

.yellow-box p {
    margin-bottom: 0;
}

You're a savior Leo! Thanks!

You're welcome :)