rearranging extended post list

  • hello,

    i am having a little trouble working out how to change the appearance of my extended post details (author, date, category etc). I wish to have these details appear in a standard horizontal line BUT with vertical line breaks. Any help is so much appreciated!! This is my blog….
    https://www.thevintageshowroom.com/blog/

    Thanks in advance,

    Nic.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator cubecolour

    (@numeeja)

    First make sure you have a backup of your stylesheet then replace

    .extendspost {
    border-top: 0.25px solid #FFFFFF;
    color: #727288;
    float: left;
    display: inline;
    list-style-type: none;
    margin: 0;
    max-width: 130px;
    min-width: 080px;
    font-size: 8px;
    text-align: center;
}
.extendspost li {
    border-bottom: 1px solid #EDEDF3;
    margin: 0;
}

    with

    .extendspost {
    color: #727288;
    float: left;
    display: inline;
    list-style-type: none;
    padding: 0;
    font-size: 8px;
}

ul.extendspost {
    border-left: 1px solid #CCC;
    padding: 0;
    margin: 6px 0;
}

.extendspost li {
    margin: 0;
    display: inline;
    padding: 6px;
    border-right: 1px solid #CCC;
}

    Is that the kind of thing you’re after?

    Thread Starter nshonfeld

    (@nshonfeld)

    hey there! thanks for your reply. I did as you suggested but for some reason it made them into a bullet-point list, and also shifted the list slightly to the right.

    what im trying to do is get it just like this…

    https://www.acontinuouslean.com/

    …but i cant seem to get the coding right! any further suggestions?!

    Moderator cubecolour

    (@numeeja)

    The css I posted should display very similarly to that.

    So it sounds like something went wrong with pasting in the replacement rules as it will make the post meta into a plain bullet list & shift & apply some left padding if there are no .extendspost & .extendspost li rules in the stylesheet.

    I’ve just had another look at your site – on your single pages the heading follows the extendspost meta stuff which is the reverse of how it is presented on the home page, so to allow for that I’ve tweaked what I think you should paste in. I’ve only tested this in firefox as that’s the only browser I have a web developer toolbar on for testing css tweaks.

    TAKE OUT THIS BLOCK:

    .extendspost {
    border-top: 0.25px solid #FFFFFF;
    color: #727288;
    float: left;
    display: inline;
    list-style-type: none;
    margin: 0;
    max-width: 130px;
    min-width: 080px;
    font-size: 8px;
    text-align: center;
}
.extendspost li {
    border-bottom: 1px solid #EDEDF3;
    margin: 0;
}

    PASTE THIS IN PLACE OF THE REMOVED BLOCK:

    ul.extendspost {
    border-left: 1px solid #CCC;
    padding: 0;
    margin: 6px 0;
    width: 100%
    color: #727288;
    float: left;
    display: inline;
    list-style-type: none;
    padding: 0;
    font-size: 8px;
    width: 100%;
}

.extendspost li {
    margin: 0;
    display: inline;
    padding: 6px;
    border-right: 1px solid #CCC;
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘rearranging extended post list’ is closed to new replies.