CSS Snippets
Jump to navigation
Jump to search
Add it into the custom.css or into the Global CSS field at the ACP settings.
Contents
Game specific background
body {
background:#000000 url('TEMPLATE_BACKGROUND') no-repeat center top;
background-attachment: T_BACKGROUND_POSITION;
}
#wrapper header {
background: none !important;
}
Hide Portal Modules on Smartphones
If you want to hide portal modules on Smartphone, get the CSS-Class for the module from the source text in your browser, uncomment the following block and add the CSS Class
@media all and (max-width: 480px) {
.offi_conf_portal, .birthday_portal {
display: none;
}
}
Give Article Headlines a special color
Giving the article categorie with ID "2" a special color:
.article-container[data-article-category-id="2"] h2 a, .article_detail_container[data-article-category-id="2"] h1{
color: #efefef;
}
.article-container[data-article-category-id="2"] .ribbon > span {
background: linear-gradient(lighten(#efefef,20%) 0%, #efefef 100%);
color: #000;
}
Embed EQdkp Plus
See Embed EQdkp Plus
Portalmodules in a row
For the middle positions.
#portal-middle, #portal-footer{
display:flex;
justify-content:space-around;
align-items:stretch;
.portalbox{
flex:1 1 auto;
display: flex;
flex-direction: column;
}
.portalbox_content{
display:flex;
justify-content: space-around;
flex: 1 1 auto;
}
.colorswitch{
background-color: none;
display: flex;
align-items: flex-end;
text-align: center;
flex-wrap: wrap;
justify-content: center;
div{
background-color: transparent;}
}
}
Color usernames of special group
Here: Group-ID "2"
a[data-user-group-id="2"] {
color: red !important;
}
a[data-usergroup-id="2"] {
background-color: red;
}
[data-user-group-id="2"] img {
border: 2px solid red !important;
}
Calendar
Sort Roles / Classes in custom Order instead of by name
.attendee_table .class_table{
flex-direction: row-reverse;
}
.attendee_table .class_column[data-class-id="1"] {
order: 1;
}
.attendee_table .class_column[data-class-id="2"] {
order: 2;
}
.attendee_table .class_column[data-class-id="3"] {
order: 3;
}
.attendee_table .class_column[data-class-id="4"] {
order: 4;
}
Add color to signup icons
Raid Event Detail View: 2.3.11 changed the layout of the attendance status indicator. To re-add colours, simply use this code
.raidcal-attendance-status-0 {
color: #00a400;
}
.raidcal-attendance-status-1 {
color: #e9ec00;
}
.raidcal-attendance-status-2 {
color: #E80000;
}
.raidcal-attendance-status-3 {
color: purple;
}
Use Flags instead of signup icons
Raid Event Detail View: 2.3.11 changed the layout of the attendance status indicator. Use flag instead of the current icons
.raidcal-attendance-status-0:before, .raidcal-attendance-status-1:before,
.raidcal-attendance-status-2:before, .raidcal-attendance-status-3:before {
font-family: FontAwesome;
content: "\f024";
}