Init

static/css/fancy-gallery.css

@@ -0,0 +1,139 @@
+/* Adjust the gallery wrapper */
+.gallery-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto; /* Center the gallery */
+    overflow: hidden; /* Ensure content is within bounds */
+}
+
+.gallery-wrapper img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid #dddddd3d;
+}
+
+/* Slick carousel specific styles */
+.slick-prev, .slick-next {
+    background: #444; /* Button background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the buttons circular */
+    color: #fff; /* Text color */
+    font-size: 18px; /* Font size for the arrow */
+    height: 40px; /* Button height */
+    width: 40px; /* Button width */
+    line-height: 40px; /* Center text vertically */
+    text-align: center; /* Center text horizontally */
+    z-index: 1000; /* Make sure buttons are above the carousel images */
+    position: absolute;
+    top: 50%; /* Position vertically centered */
+    transform: translateY(-50%);
+}
+
+.slick-prev {
+    left: 0px;
+}
+
+.slick-next {
+    right: 0px;
+} 
+
+/* Center the dots under the image */
+.slick-dots {
+    text-align: center;
+    margin-top: 15px; /* Space between image and dots */
+    padding-left: 0;
+    list-style: none;
+}
+
+.slick-dots li {
+    display: inline-block; /* Align dots horizontally */
+    margin: 0 8px; /* Space between dots */
+}
+
+.slick-dots li button {
+    background: #ccc; /* Dot background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the dots circular */
+    width: 12px; /* Dot width */
+    height: 12px; /* Dot height */
+    position: relative;
+}
+
+.slick-dots li button::before {
+    content: '';
+    display: block;
+    width: 16px; /* Adjusted circle width */
+    height: 16px; /* Adjusted circle height */
+    border-radius: 50%;
+    background-color: transparent;
+    border: 2px solid #ccc; /* Circle border color */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.slick-dots li.slick-active button::before {
+    background-color: #fff; /* Active dot background color */
+    border-color: #fff; /* Active dot border color */
+}
+
+/* This is what I get for global styling and using templates */
+
+/* Override the border-radius to remove rounded corners */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+}
+
+/* If you want a specific shape, like a square or a different background */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: transparent !important;
+}
+
+/* Ensure the active dot buttons are not rounded */
+.slick-dots li button {
+    border-radius: 0 !important; 
+    background: none !important;
+}
+
+.slick-dots li button::before {
+    border-radius: 0 !important;
+}
+
+/* General button override */
+button[type="button"][role="tab"] {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    color: inherit !important;
+    padding: 0 !important;
+}
+
+/* Restore the round shape for the dots */
+.slick-dots li button {
+    border-radius: 50% !important;
+    background: #ccc !important;
+    width: 12px;
+    height: 12px;
+}
+
+/* Ensure the pseudo-element is also circular */
+.slick-dots li button::before {
+    border-radius: 50% !important;
+    background-color: transparent;
+    border: 2px solid #ccc;
+    width: 16px;
+    height: 16px;
+}
+
+/* Style for the active dot */
+.slick-dots li.slick-active button::before {
+    background-color: #fff; 
+    border-color: #fff;
+}