Custom CSS for FoF Cookie Consent Extension

Use this extension: FoF Cookie Consent

Hello everyone! 👋

I've created a custom CSS code for the FoF Cookie Consent extension to enhance its appearance and make it more visually appealing. This code ensures compatibility with dark mode extensions and is fully responsive for different screen sizes. 🌙📱

Instructions

To use this custom CSS:

  1. Set the Theme option in the FoF Cookie Consent extension settings to "No CSS" for the best results.
  2. Copy and paste the following CSS code into your custom styles:
.cc-window {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 90%;
  background-color: var(--button-bg);
  color: var(--button-color);
  padding: 8px 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cc-window:hover {
  transform: translateX(-50%) translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.cc-message {
  display: flex;
  align-items: center;
}

.cc-message span {
  margin-right: 5px;
}

.cc-message a {
  display: contents;
  color: var(--text-color);
  font-weight: 600;
}

.cc-message::before {
  content: "\f563";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  margin-right: 10px;
}

.cc-compliance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: var(--border-radius);
  background: var(--button-color);
  margin-left: 5px;
}

.cc-compliance .cc-btn {
  color: var(--button-inverted-bg);
  white-space: nowrap;
  padding: 8px 13px;
}

.cc-compliance .cc-btn:hover {
  text-decoration: auto;
}

Customization

  • You can use the Custom option in the extension settings to modify the colors and match your site's design.
  • This CSS leverages variables like --button-bg, --text-color, and --button-color for easy integration.

Features

✅ Dark Mode Compatible: Works seamlessly with dark mode extensions.
✅ Responsive Design: Adapts beautifully to various screen sizes.

Feel free to try it out and let me know if you have any feedback or suggestions! 🚀

Demo


Note: This demo does not include the CSS code provided above. It is only for testing purposes to give you an idea of how it will look. To use it on your Flarum forum site, you must use the CSS code provided above! (Do not use the CSS code from Codepen!)

Let me know if you need further edits or improvements! 😊

    wylzn Thank you so much for your kind words! 😊 I'm really glad you found it helpful and well-presented. If you have any questions or suggestions for further customization, feel free to share them here. I'm always happy to help! 🚀✨

    I hope this design will be used by the FoF Cookie Consent extension or a more advanced extension. If you'd like, you can forward this request to the relevant extensions.

        huseyinfiliz you can always create a fork of the FoF extension and implement it yourself, and either send a pr or republish it (check the license)

            wylzn Thank you for your suggestion! By the way, I’ve added a Codepen demo so you can test it before using it on your forum. You can use it to test the design in both dark and light modes. However, please do not use the Codepen code on your forum, as it is for testing purposes only. To use it on your forum, refer to the CSS code provided above.

            Thank you again for your interest! 😊

              huseyinfiliz Hi! Thanks for your CSS example 🚀

              Maybe you can help me — I’d like to make this modal window adaptive. When switching to the dark theme, only the bottom part of the Modal-footer changes, but the Modal-header remains white, even though it should also turn dark in the dark theme. You’re already registered on my forum, so I think you understand what I’m talking about

                  Capybara I’m glad you liked the CSS code I prepared for the Cookie Consent extension 🚀

                  Here’s the LESS and CSS code that will solve your issue. Simply add it to the Admin Panel -> Appearance -> Custom CSS section.

                  If necessary, you can try adding !important after the none style. When I tested it, this version worked perfectly on your forum.

                  Demo

                  LESS Code

                  .BadgeModal {
    &.BadgeModal-plain {
        .Modal-footer {
            border-top: none;
        }
        .Modal-body {
            background: none;
        }
    }
}

                  CSS Code

                  .BadgeModal.BadgeModal-plain .Modal-footer {
    border-top: none;
}

.BadgeModal.BadgeModal-plain .Modal-body {
    background: none;
}

                  Note: You only need to use either the CSS or LESS code, not both.