{"id":16610954,"date":"2023-03-30T14:55:04","date_gmt":"2023-03-30T14:55:04","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/author-list-5-columns-2\/"},"modified":"2023-03-30T14:55:04","modified_gmt":"2023-03-30T14:55:04","slug":"author-list-5-columns-2","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/author-list-5-columns-2\/","title":{"rendered":"Author list \u2013 5 columns"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hello everything is fine? I speak from Brazil, I\u2019m using google translator.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019m going to detail well to try to facilitate your understanding, okay?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I work with wordpress website creation, I\u2019ve been using your plugin for 2 years now, thank you very much for that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I would like to ask for your help once again, please.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The project owner asked me to redesign the author list. Instead of 4 columns with 2 lines, he only wants 1 line with 5 authors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I saw that in this topic:&nbsp;<a href=\"https:\/\/wordpress.org\/support\/topic\/author-list-colums-number\">Author list \u2013 columns number<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You passed a CSS code to display 5 columns, I tested this code, but my last column was pasted in the left column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See the screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"  src=\"\/\/i2.wp.com\/hortensiasnews.com.br\/wp-content\/uploads\/2023\/03\/print01.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that the last column on the right is pasted to the penultimate column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Code used to display 5 columns was this (I don\u2019t know if any part of this code may be conflicting with my other CSS, below):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (min-width:760px) {\n     .authors-list-cols-dir-horizontal.authors-list-cols-4 .authors-list-col:nth-child(4n+1){\n         clear: none !important;\n     }\n     .authors-list-cols-dir-horizontal .authors-list-col-3 {\n         width: 17.264% !important;\n     }\n     .authors-list-cols-dir-horizontal.authors-list-cols-4 .authors-list-col:nth-child(5n+1) {\n         clear: both !important;\n     }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Another point, you gave me some details to display 8 authors, listed in order of publication, my shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;authors_list style=\"1\" columns=\"4\" show_bio=\"no\" amount=\"8\" orderby=\"post_date\" latest_post_after=\"360\" show_count=\"no\" after_title=\"{alf:posts type=plain amount=3}\" exclude=\"1,30\"]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">My additional css code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.authors-list-item-thumbnail img {\n\t-webkit-border-top-left-radius: 10px;\n\t-webkit-border-top-right-radius: 10px;\n\t-moz-border-radius-topleft: 10px;\n\t-moz-border-radius-topright: 10px;\n\tborder-top-left-radius: 10px;\n\tborder-top-right-radius: 10px;\n\twidth:100%!important;\n  height:250px!important;\n  object-fit:cover;\n\t\n}\n.authors-list-item-title {\n\tmargin-top: -20px!important;\n  font-size:20px!important;\n\tfont-family: source sans pro;\n\tfont-weight: 600!important;\n\ttext-align: center;\n\tbackground-color: #3E40A5;\n\tcolor: #ffffff;\n\tpadding-top: 15px!important;\n\tpadding-bottom: 15px!important;\n\tline-height: 20px;\n\t-webkit-border-bottom-right-radius: 10px;\n\t-webkit-border-bottom-left-radius: 10px;\n\t-moz-border-radius-bottomright: 10px;\n\t-moz-border-radius-bottomleft: 10px;\n\tborder-bottom-right-radius: 10px;\n\tborder-bottom-left-radius: 10px;\n}\n\n.authors-list-item{\n\tfont-size: 17px;\n\ttext-align: center;\n\tfont-family: source sans pro;\n\tfont-weight: 400!important;\n}\n\n.authors-list-posts-item{\n\tline-height: 1.3;\n\tborder-bottom: 1px solid #ccc;\n\tpadding-top: 4px;\n\tpadding-bottom: 4px;\n}\n\n.authors-list-posts-item:last-child {\n  border-bottom: none!important;\n}\n\na.authors-list-item-link{\n\tfont-size: 17x\n\tpadding: 2px 10px 2px 10px;\n\tborder-radius: 5px; border:1px solid #999;\n\tpadding-left: 20px;\n\tpadding-right: 20px;\n\tbackground-color:#ffffff;\n}\n\n.authors-list-posts-item a {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\tcolor:#ffffff;\n}\n\n.authors-list-posts-item a:hover {\n    overflow: visible;\n    white-space: normal;\n\tcolor:#ECECFB;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly, I would like to only display 5 authors in 1 row. When trying to set 5 authors I am missing the publication order, the most recent author is not in the first position. I changed the: amount=\u201d8\u2033 to amount=\u201d5\u2033 , is it wrong?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By changing the amount=\u201d8\u2033 to 5, to display only 5 authors, I believe you lose the orderby=\u201dpost_date\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The correct order is this, following the post_date:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"  src=\"\/\/i2.wp.com\/hortensiasnews.com.br\/wp-content\/uploads\/2023\/03\/print01.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But it displays like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"  src=\"\/\/i2.wp.com\/hortensiasnews.com.br\/wp-content\/uploads\/2023\/03\/print03.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">this last print has the CSS I informed, taken from the topic: <a href=\"https:\/\/wordpress.org\/support\/topic\/author-list-colums-number\">Author list \u2013 columns number<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The expected final result is this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\"  src=\"\/\/i2.wp.com\/hortensiasnews.com.br\/wp-content\/uploads\/2023\/03\/print02.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you very much for all the attention given!<\/p>\n","protected":false},"template":"","class_list":["post-16610954","topic","type-topic","status-publish","hentry","topic-tag-columns"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/16610954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/16610954\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=16610954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}