[Resolved] List in a box

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support List in a box

Tagged: ,

This topic contains 18 replies, has 2 voices, and was last updated by  Tom 4 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #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

    #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 🙂

    #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.

    #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;
    }
    #9217

    Bernhard
    Participant

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

    #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.

    #9256

    Bernhard
    Participant

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

    #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

    #9280

    Bernhard
    Participant

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

    #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

    #9313

    Bernhard
    Participant

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

    #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.

    #9339

    Tom
    Keymaster

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

    #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.

    #9358

    Tom
    Keymaster

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

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

You must be logged in to reply to this topic.