List in a box – WP Show Posts

Tagged: background, box

This topic has 18 replies, 2 voices, and was last updated 4 years, 6 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
May 6, 2019 at 8:35 am #9145

Bernhard
Participant

Hi,
I’d like to define a background around a list, with or without border. I made something with sections but I have a lot of existing pages where I want to insert lists without changing everything. This is my test: https://www.tourist-in-rom.com/de/aab-test/
Thank you

May 6, 2019 at 4:59 pm #9162

Tom
Keymaster

Hi there,

If you used 1.0 (in beta), you can define a section class: https://wpshowposts.com/wpsp-pro-1-0/

Then you can use that class to style the section around the posts.

Let me know if you need more info 🙂

May 7, 2019 at 6:50 am #9182
Bernhard
Participant
Hi Tom,
thank you.
I tried with this code
```
<style>
	.listbox {
		background-color: rgba(255,194,51,0.1);
		border: 10px;
		box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
		}
</style>
```
but (the list in the bottom) now has the border only on the left and in the bottom.
Until now I tried to avoid to learn code but it seems I have to ;). Can you please help me how to have the same border an all sides and probably you can suggest me a simple tutorial to learn some basic code.
May 7, 2019 at 5:19 pm #9206
Tom
Keymaster
Can you try this instead?:
```
.listbox {
    background-color: rgba(255,194,51,.1);
    border: 10px;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,.5);
    margin-left: 0 !important;
    padding-right: 40px;
}

.listbox .wp-show-posts-inner {
    margin-top: 40px !important;
    margin-left: 40px !important;
}
```
May 8, 2019 at 6:16 am #9217

Bernhard
Participant

Hi Tom,
now I have the border also on top, but on the right side it is still missing.

May 8, 2019 at 4:49 pm #9246

Tom
Keymaster

I just adjusted the CSS above – can you try it again?

Also, it will likely be better if you turn off masonry on that list, as it’s not necessary for that layout.

May 9, 2019 at 1:09 am #9256

Bernhard
Participant

Hi Tom,
now it’s ok for desktop view, but on mobile there is no border to the left.

May 9, 2019 at 3:18 pm #9271

Tom
Keymaster

We’ll get there! haha

Can you try the updated CSS?: https://wpshowposts.com/support/topic/list-in-a-box/#post-9206

May 9, 2019 at 10:05 pm #9280

Bernhard
Participant

Hi Tom,
This works now. How can I reduce the space between the boxes on mobile? Now it seems 80px.

May 10, 2019 at 5:58 pm #9294
Tom
Keymaster
Try this:
```
@media (max-width: 768px) {
    .wp-show-posts-columns#wpsp-20140 article:not(:nth-child(3)) .wp-show-posts-inner {
        margin-bottom: 0;
    }
}
```
Note to self: Make this easier in the future haha
May 11, 2019 at 2:26 pm #9313

Bernhard
Participant

Great,
now I want to use this as standard, not only limited to post #wpsp-20140
How should I address this?

May 13, 2019 at 10:46 am #9334
Bernhard
Participant
Hi Tom,
I thought the code is working but it does not. Have a look on this page, in the bottom is a list with 4 entries 2×2 and there the problem of the doubled border also in the desktop layout.
The code I use for the lists with 3 entries is actually
```
<style>
	.listbox {
    background-color: rgba(255,194,51,.2);
    border: 10px;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,.5);
    margin-left: 0 !important;
		padding-right: 40px;
	}

	.listbox .wp-show-posts-inner {
    margin-top: 40px !important;
		margin-left: 40px !important;
	}
	@media (max-width: 768px) {
    .wp-show-posts-columns article:not(:nth-child(3)) .wp-show-posts-inner {
        margin-bottom: 0;
    }
}

</style>
```
I tried also
```
<style>
	.listbox {
    background-color: rgba(255,194,51,.2);
    border: 10px;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,.5);
    margin-left: 0 !important;
		padding-right: 40px;
	}

	@media (max-width: 768px) {
    .wp-show-posts-columns article:not(:nth-child(3)) .wp-show-posts-inner {
        margin-bottom: 0;
    }
}

</style>
```
but the result is the same.
May 13, 2019 at 4:35 pm #9339

Tom
Keymaster

I’m not sure I understand. Where is the double border happening exactly?

May 14, 2019 at 12:48 am #9348

Bernhard
Participant

Hi Tom,
I hope the screenshot makes it clear.
For now, I created 2 classes .listbox with colored background and .listb0x without background. So I want to be able to address every list with these classes in the way, that the distances to the borders, the horizontal distances and the vertical distances between the entries of the list are the same.

May 14, 2019 at 3:25 pm #9358

Tom
Keymaster

That screenshot URL doesn’t seem to be working – can you double-check?
Author

Posts

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] List in a box