Difference between revisions of "CSS Snippets"

From EQdkp Plus
Jump to navigation Jump to search
(Portalmodules in a row)
 
Line 87: Line 87:
 
[data-user-group-id="2"] img {
 
[data-user-group-id="2"] img {
 
border: 2px solid red !important;
 
border: 2px solid red !important;
 +
}
 +
</source>
 +
 +
= Calendar =
 +
 +
== Sort Roles / Classes in custom Order instead of by name ==
 +
<source>
 +
.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;
 +
}
 +
</source>
 +
 +
== 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
 +
<source>
 +
.raidcal-attendance-status-0 {
 +
color: #00a400;
 +
}
 +
.raidcal-attendance-status-1 {
 +
color: #e9ec00;
 +
}
 +
.raidcal-attendance-status-2 {
 +
color: #E80000;
 +
}
 +
.raidcal-attendance-status-3 {
 +
color: purple;
 +
}
 +
</source>
 +
 +
== 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
 +
<source>
 +
.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";
 
}
 
}
 
</source>
 
</source>

Latest revision as of 11:58, 18 June 2019


Add it into the custom.css or into the Global CSS field at the ACP settings.

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";
}