Home › Forums › Pro Support › List in a box
Tagged: background, box
- This topic has 18 replies, 2 voices, and was last updated 4 years, 6 months ago by
Tom.
-
AuthorPosts
-
May 6, 2019 at 8:35 am #9145
Bernhard
ParticipantHi,
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 youMay 6, 2019 at 4:59 pm #9162Tom
KeymasterHi 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 #9182Bernhard
ParticipantHi 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 #9206Tom
KeymasterCan 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 #9217Bernhard
ParticipantHi 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 #9246Tom
KeymasterI 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 #9256Bernhard
ParticipantHi 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 #9271Tom
KeymasterWe’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 #9280Bernhard
ParticipantHi 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 #9294Tom
KeymasterTry 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 #9313Bernhard
ParticipantGreat,
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 #9334Bernhard
ParticipantHi 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 #9339Tom
KeymasterI’m not sure I understand. Where is the double border happening exactly?
May 14, 2019 at 12:48 am #9348Bernhard
ParticipantHi 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 #9358Tom
KeymasterThat screenshot URL doesn’t seem to be working – can you double-check?
-
AuthorPosts
- You must be logged in to reply to this topic.