Custom Styles: Case Studies

---

Here are some customisations that can be useful. To apply them, follow these steps:

1. Enter to admin panel > Decidim awesome > Custom styles
2. Add a new CSS box (link at the bottom of the page)
3. Copy & Paste the code of the case you want to apply, replacing UPPERCASE WORDS with relevant information, if needed (e.g. URL)
4. Select the component(s) to which you want to apply the customisation in "Applicable only in these cases".

Customisations have been tested in Firefox, Chrome, and Safari browsers.

---

Look & Feel platform

Menu (Header) with gradient colors (+ Bonus animated line)

.title-bar {
  background: #ed2c6c;
  background: linear-gradient(90deg,#682890,#ed2c6c);
  border-top-color: transparent;
}
.navbar {
  --borderWidth: 3px;
  background: #ed2c6c;
  background: linear-gradient(90deg,#682890,#ed2c6c);
  position:relative;
}
.navbar>.row.column {
  margin-bottom: var(--borderWidth);
}
.navbar:after {
  content:'';
  position: absolute;
  top: 100%;
  left: 0;
  height: var(--borderWidth);
  width: 100%;
  background: linear-gradient(90deg,#ed2c6c,#682890);
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Footer (Header) with gradient colors

.main-footer {
  background: #ed2c6c;
  background: linear-gradient(90deg,#682890,#ed2c6c);
  position: relative;
  padding-top: 20px;
  margin-left: -20px;
  padding-left: 20px;
  color: #fff;
}
.main-footer a {
  color: #fff;
}

Search engine with colors

.topbar__search input {
  background: #fff;
}
.topbar__search:not(:focus-within) button {
  background: #fff;
}
.topbar__search:not(:focus-within) button {
  color: hsla(0, 0%, 0%, 0.5);
}
.topbar__search input::placeholder {
  color: #333;
}
/* Estil del menu */
.main-nav__link a {
  font-family: sans-serif;
  color: #ffffff;
  border-radius: 5px;
}
.main-nav__link--active a {
  box-shadow: none;
  background-color: rgba(0, 185, 242,.6);
}
.main-nav__link {
  margin: 10px;
}

Participatory process

Remove general header

To remove the header of the process

.process-header {
  display: none;
}

⚠️ Remember to select "Process" in "Applicable only in these cases".

Remove description

To remove the description of the process

.columns.medium-7.mediumlarge-8 > div.section:first-child {
   display: none
}

⚠️ Remember to select "Process" in "Applicable only in these cases".

Remove creation date of process

To remove the creation date of a process card

li.card-data__item.creation_date_status { display:none; }

⚠️ Remember to select "Process" in "Applicable only in these cases".

Meetings component

Change avatar in official meetings

To change the grey person 👤 to a custom avatar, use the following code, replacing URL by the location of the image you want to use as avatar.

⚠️ Remember to select "meetings" in "Applicable only in these cases" to avoid undesirable behaviours in other components.

/* change default avatar in official meetings */
div#meetings div.author-data span.author__avatar img,
div.view-header div.author-data span.author__avatar img {  
  display: none;  
}
div#meetings div.author-data span.author__avatar,
div.view-header div.author-data span.author__avatar { 
  background-image: url(URL);
  background-size: contain;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-position-y: center;
  background-position-x: center;
  background-repeat: no-repeat;
}

Hide meetings map

To hide the map above the meetings list, paste the following code in the CSS box.

⚠️ Remember to select "meetings" in "Applicable only in these cases" to avoid hiding maps in other components.

/* hide map in meetings list */
div#map { display: none; } 

Hide filter sidebar

To hide the filter in the meetings list, paste the following code in the CSS box.

⚠️ Remember to restrict the affected components in "Applicable only in these cases" to avoid unexpected behaviour in other components.

/* hide filter sidebar */
div.filters__section, div.filters, 
div.filters-controls.hide-for-mediumlarge, div.card.card--secondary.show-for-mediumlarge 
  { display:none; }
div#meetings { width: 100%; }

---

Proposals component

Hide some filters in proposals list

Select the code of the filter you want to hide and paste it to the CSS box.

⚠️ Remember to restrict the affected components in "Applicable only in these cases" to avoid hiding filters in other components.

/* hide status filter */
div.filters__section.state_check_boxes_tree_filter { display: none; }

/* hide category filter */
div.filters__section.category_id_check_boxes_tree_filter { display: none; }

/* hide origin filter */
div.filters__section.origin_check_boxes_tree_filter { display: none; }

/* hide my activity filter */
div.filters__section.activity_collection_radio_buttons_filter { display: none; }

/* hide related to filter */
div.filters__section.related_to_collection_radio_buttons_filter { display: none; }