API tools faq
paste
Guenni007

loop-author

Guenni007
Nov 21st, 2025 (edited)
791
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.17 KB | None | 0 0
raw download clone embed print report
  1. /* ========================================
  2.    AUTHOR LOOP - GRID LAYOUT
  3.    Place this file in: /wp-content/themes/enfold-child/includes/loop-author.css
  4.    ======================================== */
  5.  
  6. /* Author Grid Container - CSS Grid Layout */
  7. #top.author .av-author-grid-container {
  8.     display: grid !important;
  9.     gap: 20px;
  10.     margin: 40px 0;
  11.     grid-template-columns: repeat(4, 1fr); /* Default: 4 Spalten */
  12. }
  13.  
  14. /* Dynamisch per Filter - Spalten-Einstellungen */
  15. #top.author .av-author-grid-container.av-columns-2 {
  16.     grid-template-columns: repeat(2, 1fr);
  17. }
  18.  
  19. #top.author .av-author-grid-container.av-columns-3 {
  20.     grid-template-columns: repeat(3, 1fr);
  21. }
  22.  
  23. #top.author .av-author-grid-container.av-columns-5 {
  24.     grid-template-columns: repeat(5, 1fr);
  25. }
  26.  
  27. #top.author .av-author-grid-container.av-columns-6 {
  28.     grid-template-columns: repeat(6, 1fr);
  29. }
  30.  
  31. /* Grid Items - Flexbox for equal height */
  32. #top.author .av-author-grid-container .flex_column {
  33.     margin: 0 !important;
  34.     padding: 0 !important;
  35.     width: auto !important;
  36.     max-width: none !important;
  37.     display: flex !important;
  38.     flex-direction: column !important;
  39. }
  40.  
  41. /* Grid Item Container - Flexbox for button alignment */
  42. #top.author .av-author-grid-item {
  43.     display: flex;
  44.     flex-direction: column;
  45.     background: #fff;
  46.     border: 1px solid #e1e1e1;
  47.     overflow: hidden;
  48.     transition: all 0.3s ease;
  49.     height: 100%;
  50.     flex: 1;
  51. }
  52.  
  53. #top.author .av-author-grid-item:hover {
  54.     box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  55.     transform: translateY(-5px);
  56.     border-color: #ccc;
  57. }
  58.  
  59. /* Image Link */
  60. #top.author .av-author-grid-image-link {
  61.     display: block;
  62.     text-decoration: none;
  63. }
  64.  
  65. /* Image Container */
  66. #top.author .av-author-grid-image {
  67.     position: relative;
  68.     overflow: hidden;
  69.     background: #f5f5f5;
  70. }
  71.  
  72. /* Placeholder Image */
  73. #top.author .av-author-placeholder-image {
  74.     width: 100%;
  75.     padding-top: 75%; /* 4:3 Aspect Ratio */
  76.     background: #e8e8e8;
  77.     display: flex;
  78.     align-items: center;
  79.     justify-content: center;
  80.     position: relative;
  81. }
  82.  
  83. #top.author .av-author-placeholder-image svg {
  84.     position: absolute;
  85.     top: 50%;
  86.     left: 50%;
  87.     transform: translate(-50%, -50%);
  88.     color: #999;
  89.     opacity: 0.75;
  90.     width: 64px;
  91.     height: 64px;
  92. }
  93.  
  94. #top.author .av-author-grid-image img {
  95.     display: block;
  96.     width: 100%;
  97.     height: auto;
  98.     transition: transform 0.3s ease;
  99. }
  100.  
  101. #top.author .av-author-grid-image-link:hover .av-author-grid-image img,
  102. #top.author .av-author-grid-item:hover .av-author-grid-image img {
  103.     transform: scale(1.05);
  104. }
  105.  
  106. #top.author .av-author-grid-overlay {
  107.     position: absolute;
  108.     top: 0;
  109.     left: 0;
  110.     right: 0;
  111.     bottom: 0;
  112.     background: rgba(0,0,0,0);
  113.     transition: background 0.3s ease;
  114.     pointer-events: none;
  115. }
  116.  
  117. #top.author .av-author-grid-image-link:hover .av-author-grid-overlay,
  118. #top.author .av-author-grid-item:hover .av-author-grid-overlay {
  119.     background: rgba(0,0,0,0.1);
  120. }
  121.  
  122. /* Content - takes up the available space */
  123. #top.author .av-author-grid-content {
  124.     padding: 25px;
  125.     flex: 1 1 auto;
  126.     display: flex;
  127.     flex-direction: column;
  128. }
  129.  
  130. #top.author .av-author-grid-title {
  131.     font-size: 18px;
  132.     font-weight: 600;
  133.     margin: 0 0 10px 0;
  134.     line-height: 1.4;
  135. }
  136.  
  137. #top.author .av-author-grid-title a {
  138.     color: #333;
  139.     text-decoration: none;
  140.     transition: color 0.3s ease;
  141. }
  142.  
  143. #top.author .av-author-grid-title a:hover {
  144.     color: #000;
  145. }
  146.  
  147. #top.author .av-author-grid-meta {
  148.     display: block;
  149.     font-size: 13px;
  150.     color: #999;
  151.     margin-bottom: 15px;
  152. }
  153.  
  154. #top.author .av-author-grid-meta .text-sep {
  155.     margin: 0 5px;
  156. }
  157.  
  158. #top.author .av-author-grid-excerpt {
  159.     font-size: 14px;
  160.     line-height: 1.6;
  161.     color: #666;
  162.     margin: 0;
  163. }
  164.  
  165. #top.author .av-author-grid-excerpt p {
  166.     margin: 0 0 10px 0;
  167. }
  168.  
  169. #top.author .av-author-grid-excerpt p:last-child {
  170.     margin-bottom: 0;
  171. }
  172.  
  173. /* Read More Button - always at the bottom */
  174. #top.author .av-author-grid-read-more {
  175.     padding: 20px 25px;
  176.     margin-top: auto; /* Moves down automatically */
  177.     border-top: 1px solid #f0f0f0;
  178. }
  179.  
  180. #top.author .av-author-grid-read-more .more-link {
  181.     display: inline-block;
  182.     font-weight: 600;
  183.     color: #000;
  184.     text-decoration: none;
  185.     transition: color 0.3s ease;
  186. }
  187.  
  188. #top.author .av-author-grid-read-more .more-link:hover {
  189.     color: #666;
  190. }
  191.  
  192. #top.author .av-author-grid-read-more .more-link-arrow {
  193.     display: inline-block;
  194.     margin-left: 5px;
  195.     transition: transform 0.3s ease;
  196. }
  197.  
  198. #top.author .av-author-grid-read-more .more-link:hover .more-link-arrow {
  199.     transform: translateX(5px);
  200. }
  201.  
  202. /* ========================================
  203.    AUTHOR LOOP - LIST LAYOUT
  204.    ======================================== */
  205.  
  206. /* List Container */
  207. #top.author .av-author-list-container {
  208.     display: flex;
  209.     flex-direction: column;
  210.     gap: 30px;
  211.     margin: 40px 0;
  212. }
  213.  
  214. /* List Item */
  215. #top.author .av-author-list-item {
  216.     display: flex;
  217.     gap: 30px;
  218.     background: #fff;
  219.     border: 1px solid #e1e1e1;
  220.     overflow: hidden;
  221.     transition: all 0.3s ease;
  222.     padding: 0;
  223. }
  224.  
  225. #top.author .av-author-list-item:hover {
  226.     box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  227.     border-color: #ccc;
  228. }
  229.  
  230. /* List Image */
  231. #top.author .av-author-list-image {
  232.     flex: 0 0 280px;
  233.     overflow: hidden;
  234.     background: var(--enfold-main-color-bg);
  235. }
  236.  
  237. #top.author .av-author-list-image a {
  238.     display: block;
  239.     height: 100%;
  240. }
  241.  
  242. /* List Placeholder Image */
  243. #top.author .av-author-list-image .av-author-placeholder-image {
  244.     height: 100%;
  245.     min-height: 200px;
  246.     padding: 0;
  247.     background: #e8e8e8;
  248.     display: flex;
  249.     align-items: center;
  250.     justify-content: center;
  251. }
  252.  
  253. #top.author .av-author-list-image .av-author-placeholder-image svg {
  254.     position: static;
  255.     transform: none;
  256.     color: #999;
  257.     opacity: 0.5;
  258. }
  259.  
  260. #top.author .av-author-list-image img {
  261.     display: block;
  262.     width: 100%;
  263.     transition: transform 0.3s ease;
  264. }
  265.  
  266. #top.author .av-author-list-item:hover .av-author-list-image img {
  267.     transform: scale(1.05);
  268. }
  269.  
  270. /* List Content */
  271. #top.author .av-author-list-content {
  272.     flex: 1;
  273.     padding: 30px;
  274.     display: flex;
  275.     flex-direction: column;
  276. }
  277.  
  278. #top.author .av-author-list-title {
  279.     font-size: 22px;
  280.     font-weight: 600;
  281.     margin: 0 0 10px 0;
  282.     line-height: 1.4;
  283. }
  284.  
  285. #top.author .av-author-list-title a {
  286.     color: #333;
  287.     text-decoration: none;
  288.     transition: color 0.3s ease;
  289. }
  290.  
  291. #top.author .av-author-list-title a:hover {
  292.     color: #000;
  293. }
  294.  
  295. #top.author .av-author-list-meta {
  296.   display: flex;
  297.   font-size: 0.9em;
  298.   color: #999;
  299.   margin-bottom: 15px;
  300.   flex-flow: row wrap
  301. }
  302.  
  303. #top .av-author-list-meta .blog-categories {
  304.   text-align: left;
  305.   font-weight: 400;
  306.   font-size: 0.9em;
  307.   top: 0 !important;
  308. }
  309.  
  310. #top.author .av-author-list-meta .text-sep {
  311.     margin: 0 5px;
  312. }
  313.  
  314. #top.author .av-author-list-excerpt {
  315.     font-size: 15px;
  316.     line-height: 1.7;
  317.     color: #666;
  318.     margin: 0 0 20px 0;
  319.     flex: 1;
  320. }
  321.  
  322. #top.author .av-author-list-excerpt p {
  323.     margin: 0 0 15px 0;
  324. }
  325.  
  326. #top.author .av-author-list-excerpt p:last-child {
  327.     margin-bottom: 0;
  328. }
  329.  
  330. #top.author .av-author-list-read-more {
  331.     margin-top: auto;
  332. }
  333.  
  334. #top.author .av-author-list-read-more .more-link {
  335.     display: inline-block;
  336.     font-weight: 600;
  337.     color: #000;
  338.     text-decoration: none;
  339.     transition: color 0.3s ease;
  340. }
  341.  
  342. #top.author .av-author-list-read-more .more-link:hover {
  343.     color: #666;
  344. }
  345.  
  346. #top.author .av-author-list-read-more .more-link-arrow {
  347.     display: inline-block;
  348.     margin-left: 5px;
  349.     transition: transform 0.3s ease;
  350. }
  351.  
  352. #top.author .av-author-list-read-more .more-link:hover .more-link-arrow {
  353.     transform: translateX(5px);
  354. }
  355.  
  356. /* ========================================
  357.    PAGINATION
  358.    ======================================== */
  359.  
  360. #top.author .av-author-pagination {
  361.     clear: both;
  362.     text-align: center;
  363.     margin: 40px 0 20px;
  364.     width: 100%;
  365.     grid-column: 1 / -1;
  366. }
  367.  
  368. #top.author .av-author-pagination .pagination {
  369.     display: inline-block;
  370. }
  371.  
  372. #top.author .av-author-pagination .pagination .current,
  373. #top.author .av-author-pagination .pagination a {
  374.     display: inline-block;
  375.     padding: 8px 15px;
  376.     margin: 0 3px;
  377.     background: #f5f5f5;
  378.     border: 1px solid #e1e1e1;
  379.     text-decoration: none;
  380.     color: #333;
  381.     transition: all 0.3s ease;
  382. }
  383.  
  384. #top.author .av-author-pagination .pagination .current {
  385.     background: #000;
  386.     color: #fff;
  387.     border-color: #000;
  388. }
  389.  
  390. #top.author .av-author-pagination .pagination a:hover {
  391.     background: #333;
  392.     color: #fff;
  393.     border-color: #333;
  394. }
  395.  
  396. /* ========================================
  397.    RESPONSIVE
  398.    ======================================== */
  399.  
  400. /* Grid Responsive */
  401. @media only screen and (max-width: 1340px) {
  402.     /* 5-6 columns -> 3 columns */
  403.     #top.author .av-author-grid-container.av-columns-5,
  404.     #top.author .av-author-grid-container.av-columns-6 {
  405.         grid-template-columns: repeat(3, 1fr) !important;
  406.     }
  407. }
  408.  
  409. @media only screen and (max-width: 989px) {
  410.     /* Alle auf 2 Spalten */
  411.     #top.author .av-author-grid-container {
  412.         grid-template-columns: repeat(2, 1fr) !important;
  413.     }
  414.    
  415.     /* List: Kleineres Bild */
  416.     #top.author .av-author-list-image {
  417.         flex: 0 0 200px;
  418.     }
  419.    
  420.     #top.author .av-author-list-content {
  421.         padding: 20px;
  422.     }
  423. }
  424.  
  425. @media only screen and (max-width: 767px) {
  426.     /* Grid on 1 Column */
  427.     #top.author .av-author-grid-container {
  428.         gap: 15px;
  429.         grid-template-columns: 1fr !important;
  430.     }
  431.    
  432.     #top.author .av-author-grid-content {
  433.         padding: 20px;
  434.     }
  435.    
  436.     /* List: Vertical */
  437.     #top.author .av-author-list-container {
  438.         gap: 20px;
  439.     }
  440.    
  441.     #top.author .av-author-list-item {
  442.         flex-direction: column;
  443.         gap: 0;
  444.     }
  445.    
  446.     #top.author .av-author-list-image {
  447.         flex: 0 0 auto;
  448.         max-height: 250px;
  449.     }
  450.    
  451.     #top.author .av-author-list-title {
  452.         font-size: 20px;
  453.     }
  454. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!