API tools faq
paste
Guenni007

loop-author

Guenni007
Nov 21st, 2025 (edited)
1,103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.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); /* Standard: 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 für gleiche Höhe */
  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 für Button-Ausrichtung */
  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.5;
  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 - nimmt den verfügbaren Platz */
  123. #top.author .av-author-grid-content {
  124.     padding: 15px;
  125.     flex: 1 1 auto;
  126.     display: flex;
  127.     flex-direction: column;
  128. }
  129.  
  130. #top.author .av-author-grid-title {
  131.     font-size: var(--enfold-font-size-theme-h3);
  132.     font-weight: 600;
  133.     margin: 0 0 10px 0;
  134.     line-height: 1.5em;
  135.     min-height: 3em;
  136. }
  137.  
  138. #top.author .av-author-grid-title a {
  139.     color: #333;
  140.     text-decoration: none;
  141.     transition: color 0.3s ease;
  142. }
  143.  
  144. #top.author .av-author-grid-title a:hover {
  145.     color: #000;
  146. }
  147.  
  148. #top.author .av-author-grid-meta {
  149.     display: block;
  150.     font-size: calc(0.9 * var(--enfold-font-size-content-font));
  151.     color: #999;
  152.     margin-bottom: 15px;
  153.     line-height: 1.5em;
  154.     min-height: 3em;
  155. }
  156.  
  157. #top.author .av-author-grid-meta .text-sep {
  158.     margin: 0 5px;
  159. }
  160.  
  161. #top.author .av-author-grid-excerpt {
  162.     font-size: var(--enfold-font-size-content-font);
  163.     line-height: 1.6;
  164.     color: #666;
  165.     margin: 0;
  166. }
  167.  
  168. #top.author .av-author-grid-excerpt p {
  169.     margin: 0 0 10px 0;
  170. }
  171.  
  172. #top.author .av-author-grid-excerpt p:last-child {
  173.     margin-bottom: 0;
  174. }
  175.  
  176. /* Read More Button - immer am unteren Rand */
  177. #top.author .av-author-grid-read-more {
  178.     padding: 15px;
  179.     margin-top: auto; /* Schiebt sich automatisch nach unten */
  180. }
  181.  
  182. #top.author .av-author-grid-read-more .more-link {
  183.     display: inline-block;
  184.     font-weight: 600;
  185.     color: var(--enfold-main-color-primary) !important;
  186.     text-decoration: none;
  187.     transition: color 0.3s ease;
  188. }
  189.  
  190. #top.author .av-author-grid-read-more .more-link:hover {
  191.     color: #666;
  192. }
  193.  
  194. #top.author .av-author-grid-read-more .more-link-arrow {
  195.     display: inline-block;
  196.     margin-left: 5px;
  197.     transition: transform 0.3s ease;
  198. }
  199.  
  200. #top.author .av-author-grid-read-more .more-link:hover .more-link-arrow {
  201.     transform: translateX(5px);
  202. }
  203.  
  204. /* ========================================
  205.    AUTHOR LOOP - LIST LAYOUT
  206.    ======================================== */
  207.  
  208. /* List Container */
  209. #top.author .av-author-list-container {
  210.     display: flex;
  211.     flex-direction: column;
  212.     gap: 30px;
  213.     margin: 40px 0;
  214. }
  215.  
  216. /* List Item */
  217. #top.author .av-author-list-item {
  218.     display: flex;
  219.     gap: 30px;
  220.     background: #fff;
  221.     border: 1px solid #e1e1e1;
  222.     overflow: hidden;
  223.     transition: all 0.3s ease;
  224.     padding: 0;
  225. }
  226.  
  227. #top.author .av-author-list-item:hover {
  228.     box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  229.     border-color: #ccc;
  230. }
  231.  
  232. /* List Image */
  233. #top.author .av-author-list-image {
  234.     flex: 0 0 280px;
  235.     overflow: hidden;
  236.     background: #f5f5f5;
  237. }
  238.  
  239. #top.author .av-author-list-image a {
  240.     display: block;
  241.     height: 100%;
  242.     background-color: var(--enfold-main-color-bg);
  243. }
  244.  
  245. /* List Placeholder Image */
  246. #top.author .av-author-list-image .av-author-placeholder-image {
  247.     height: 100%;
  248.     min-height: 200px;
  249.     padding: 0;
  250.     background: #e8e8e8;
  251.     display: flex;
  252.     align-items: center;
  253.     justify-content: center;
  254. }
  255.  
  256. #top.author .av-author-list-image .av-author-placeholder-image svg {
  257.     position: static;
  258.     transform: none;
  259.     color: #999;
  260.     opacity: 0.5;
  261. }
  262.  
  263. #top.author .av-author-list-image img {
  264.     display: block;
  265.     width: 100%;
  266.     height: 100%;
  267.     object-fit: cover;
  268.     transition: transform 0.3s ease;
  269. }
  270.  
  271. #top.author .av-author-list-item:hover .av-author-list-image img {
  272.     transform: scale(1.05);
  273. }
  274.  
  275. /* List Content */
  276. #top.author .av-author-list-content {
  277.     flex: 1;
  278.     padding: 20px 20px 20px 0;
  279.     display: flex;
  280.     flex-direction: column;
  281. }
  282.  
  283. #top.author .av-author-list-title {
  284.     font-size: 22px;
  285.     font-weight: 600;
  286.     margin: 0 0 10px 0;
  287.     line-height: 1.4;
  288. }
  289.  
  290. #top.author .av-author-list-title a {
  291.     color: #333;
  292.     text-decoration: none;
  293.     transition: color 0.3s ease;
  294. }
  295.  
  296. #top.author .av-author-list-title a:hover {
  297.     color: #000;
  298. }
  299.  
  300. #top.author .av-author-list-meta {
  301.   display: flex;
  302.   font-size: calc(0.9 * var(--enfold-font-size-content-font));
  303.   color: #999;
  304.   margin-bottom: 15px;
  305.   flex-flow: row wrap
  306. }
  307.  
  308. #top .av-author-list-meta .blog-categories {
  309.   text-align: left;
  310.   font-weight: 400;
  311.   font-size: 0.9em;
  312.   top: 0 !important;
  313. }
  314.  
  315. #top.author .av-author-list-meta .text-sep {
  316.     margin: 0 5px;
  317. }
  318.  
  319. #top.author .av-author-list-excerpt {
  320.     font-size: var(--enfold-font-size-content-font);
  321.     line-height: 1.7;
  322.     color: #666;
  323.     margin: 0 0 20px 0;
  324.     flex: 1;
  325. }
  326.  
  327. #top.author .av-author-list-excerpt p {
  328.     margin: 0 0 15px 0;
  329. }
  330.  
  331. #top.author .av-author-list-excerpt p:last-child {
  332.     margin-bottom: 0;
  333. }
  334.  
  335. #top.author .av-author-list-read-more {
  336.     margin-top: auto;
  337. }
  338.  
  339. #top.author .av-author-list-read-more .more-link {
  340.     display: inline-block;
  341.     font-size: var(--enfold-font-size-content-font);
  342.     font-weight: 600;
  343.     color: var(--enfold-main-color-primary) !important;
  344.     text-decoration: none;
  345.     transition: color 0.3s ease;
  346. }
  347.  
  348. #top.author .av-author-list-read-more .more-link:hover {
  349.     color: #666;
  350. }
  351.  
  352. #top.author .av-author-list-read-more .more-link-arrow {
  353.     display: inline-block;
  354.     margin-left: 5px;
  355.     transition: transform 0.3s ease;
  356. }
  357.  
  358. #top.author .av-author-list-read-more .more-link:hover .more-link-arrow {
  359.     transform: translateX(5px);
  360. }
  361.  
  362. /* ========================================
  363.    PAGINATION
  364.    ======================================== */
  365.  
  366. #top.author .av-author-pagination {
  367.     clear: both;
  368.     text-align: center;
  369.     margin: 40px 0 20px;
  370.     width: 100%;
  371.     grid-column: 1 / -1;
  372. }
  373.  
  374. #top.author .av-author-pagination .pagination {
  375.     display: inline-block;
  376. }
  377.  
  378. #top.author .av-author-pagination .pagination .current,
  379. #top.author .av-author-pagination .pagination a {
  380.     display: inline-block;
  381.     padding: 8px 15px;
  382.     margin: 0 3px;
  383.     background: #f5f5f5;
  384.     border: 1px solid #e1e1e1;
  385.     text-decoration: none;
  386.     color: #333;
  387.     transition: all 0.3s ease;
  388. }
  389.  
  390. #top.author .av-author-pagination .pagination .current {
  391.     background: #000;
  392.     color: #fff;
  393.     border-color: #000;
  394. }
  395.  
  396. #top.author .av-author-pagination .pagination a:hover {
  397.     background: #333;
  398.     color: #fff;
  399.     border-color: #333;
  400. }
  401.  
  402. /* ========================================
  403.    RESPONSIVE
  404.    ======================================== */
  405.  
  406. /* Grid Responsive */
  407. @media only screen and (max-width: 1340px) {
  408.     /* 5-6 Spalten -> 3 Spalten */
  409.     #top.author .av-author-grid-container.av-columns-5,
  410.     #top.author .av-author-grid-container.av-columns-6 {
  411.         grid-template-columns: repeat(3, 1fr) !important;
  412.     }
  413. }
  414.  
  415. @media only screen and (max-width: 1099px) {
  416.   #top.author .av-author-grid-container {
  417.     grid-template-columns: repeat(3, 1fr) !important;
  418.   }
  419. }
  420.  
  421. @media only screen and (max-width: 989px) {
  422.     /* Alle auf 2 Spalten */
  423.     #top.author .av-author-grid-container {
  424.         grid-template-columns: repeat(2, 1fr) !important;
  425.     }
  426.    
  427.     /* List: Kleineres Bild */
  428.     #top.author .av-author-list-image {
  429.         flex: 0 0 200px;
  430.     }
  431.    
  432.     #top.author .av-author-list-content {
  433.         padding: 20px 20px 20px 0;
  434.     }
  435. }
  436.  
  437. @media only screen and (max-width: 767px) {
  438.     /* Grid auf 1 Spalte */
  439.     #top.author .av-author-grid-container {
  440.         gap: 15px;
  441.         grid-template-columns: 1fr !important;
  442.     }
  443.    
  444.     #top.author .av-author-grid-content {
  445.         padding: 10px;
  446.     }
  447.    
  448.     /* List: Vertikal */
  449.     #top.author .av-author-list-container {
  450.         gap: 20px;
  451.     }
  452.    
  453.     #top.author .av-author-list-item {
  454.         flex-direction: column;
  455.         gap: 0;
  456.     }
  457.  
  458.     #top.author .av-author-list-content {
  459.         padding: 20px;
  460.     }
  461.    
  462.     #top.author .av-author-list-image {
  463.         flex: 0 0 auto;
  464.         max-height: 250px;
  465.     }
  466.    
  467.     #top.author .av-author-list-title {
  468.         font-size: 20px;
  469.     }
  470. }
  471.  
  472. /* ========================================
  473.    OPTIONAL: AUTO-FIT GRID
  474.    Use class 'auto-fit-grid' in filter for automatic responsive columns
  475.    ======================================== */
  476.  
  477. #top.author .av-author-grid-container.auto-fit-grid {
  478.     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  479. }
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!