Free CSS: Compactify homepage and other screens/widgets

  • 10 August 2022
  • 6 replies
  • 386 views
lrodman
Rank
Userlevel 7
Badge +5

How do you compactify?™


/* compactify my profile buttons*/
widget-action-button div.root.action a.mdl-button.mdl-js-button.text-main {
	height: 24px;
    line-height: 24px;
}



/********************compactify***********************/

/*compactify "my home page" bar*/
div#page-title__wrapper {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	min-height: 50px !important;
}

/*compactify homepage widgets - make all UI boxes closer together*/
.single-widget.ng-star-inserted {    margin-bottom: 10px;}


/*compactify homepage channels widget*/
channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 {
	padding-top: 0px; /*top padding overall*/
}
channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-info.ui-color-typography-primary {
	padding-bottom: 2px; /*between icon and "follow" on mobile*/
}
channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-items-wrapper {
	padding-top: 4px; /*between cards and follow*/
}
ui-carousel.dcb-ui-carousel.ui-carousel.ng-star-inserted {
	margin-top: 0px !important; /*between channels*/
}
ui-carousel div.ui-carousel-footer {
	margin: 0px !important;
}
ui-carousel div.ui-carousel-items-wrapper {
	padding-top: 4px !important;
}

/*not working - between cards horizontally
dcb-ui-carousel-item.ui-carousel-item.ng-star-inserted {
	padding-left: 3px !important;
	padding-right: 3px !important;
}*/

/* eliminate card white space!!! - not working
ui-card-content ul.ui-visually-hidden li.ng-star-inserted {
	height: 30px !important;
}*/


/*compactify activity stream*/
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root {
	padding: 8px;}
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root div.content div.header {
	margin-bottom: 3px;}
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root div.content div.header div.title-container div.title {
	margin-bottom: 3px;}
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow {
	margin-bottom: 8px;}
activities-stream-item-question.item.item-question.wrapper-shadow div.root {
	padding: 8px;}
activities-stream-item-question.item.item-question.wrapper-shadow div.root div.content div.header {
	margin-bottom: 3px;}
activities-stream-item-question.item.item-question.wrapper-shadow div.root div.content div.header div.title-container div.title {
	margin-bottom: 3px;}
activities-stream-item-question.item.item-question.wrapper-shadow {
	margin-bottom: 8px;}
activities-stream-item-asset.item.item-asset.wrapper-shadow div.root {
	padding: 8px;}
activities-stream-item-asset.item.item-asset.wrapper-shadow div.root div.content div.header {
	margin-bottom: 3px;}
activities-stream-item-asset.item.item-asset.wrapper-shadow div.root div.content div.header div.title-container div.title {
	margin-bottom: 3px;}
activities-stream-item-asset.item.item-asset.wrapper-shadow {
	margin-bottom: 8px;}


/*hide activity stream "e-learning" and "in-progress" text overlays*/
div.demo-card-image div.item-status-box.bolded.text-white.ng-star-inserted {
	visibility: hidden;}
div.demo-card-image div.type-box.bolded.ng-star-inserted {
	visibility: hidden;}


/********************sign-in page***********************/
/*compactify cookie popup*/
gdpr-policy-banner.bg-white.open {
	padding-top: 5px;
	padding-bottom: 5px;
    opacity: 0.8;
}

 

 

6 replies

lrodman
Rank
Userlevel 7
Badge +5

And yes I’m aware the white space in the middle of cards is for DCS uploads, but since most of my channels will be courses, I’d rather get rid of that white space until they re-add it for courses 

 

Fun fact: it was supposed to be out for courses, and is in their marketing materials for iOS app, haha.

lrodman
Rank
Userlevel 7
Badge +5

Updates

 


/*move avatar image up and left*/
myprofile-widget div.wrapper.wrapper-shadow.ng-star-inserted div.cover div.profile { 
    padding-top: 10px !important;
    padding-left: 10px !important;
}
/*resize profile widget avatar image*/
myprofile-widget .profile .avatar-container avatar .avatar-clip .avatar__image {
    height: 100px !important;
    width: 100px !important;
}
/*move profile widget realname and email to the right*/
myprofile-widget .profile .details-container {padding-left: 110px !important;}

/* disable overflow on my profile text */
myprofile-widget myprofile-additional-field.additional-field div.root div.label {
	overflow: hidden;
	width: 100%;
}
/*expand my profile widget */
myprofile-widget div.additional-fields-container {
	padding-top: 8px !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* compactify my profile buttons*/
myprofile-widget widget-action-button div.root.action a.mdl-button.mdl-js-button.text-main {
	height: 24px;
    line-height: 24px;
}



/********************compactify***********************/

/*compactify "my home page" bar*/
div#page-title__wrapper {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	min-height: 50px !important;
}

/*compactify homepage widgets */
.single-widget.ng-star-inserted {
    margin-bottom: 10px;
}/* make all UI boxes closer together vertically*/

div.widget-render-column {
	margin-left: 4px !important;
	margin-right: 4px !important;
}/*widget columns closer together horizontally */

.mdl-grid .mdl-cell.mdl-cell--4-col, .mdl-grid .mdl-cell .mdl-cell--4-col-desktop {
    width: calc(33.3333333333% - 8px);
	margin: 2px;
}/*fix 3-col spacing*/

.mdl-grid .mdl-cell.mdl-cell--8-col, .mdl-grid .mdl-cell .mdl-cell--8-col-desktop {
    width: calc(66.6666666667% - 8px);
}/*fix 2-col spacing*/

div.widget-render-row {
	width: 100% !important;
	margin: 0px;
}
.mdl-grid .mdl-cell.mdl-cell--12-col, .mdl-grid .mdl-cell .mdl-cell--12-col-desktop {
    width: 100%;
}/*full width centered top images etc*/

div.pages-widget-page {
	padding-top: 8px;
}
div.pages-widget-page div.widget-render {
	padding-left: 8px;
	padding-right: 8px;
}/* wider content area */



/*compactify homepage LPs widget*/
doc-widget-course-catalog ui-data-browser div.course-catalog-content-wrapper {
	padding-top: 4px;
}
doc-widget-course-catalog ui-data-browser div.ui-data-browser-wrapper {
	margin-top: 6px;
}



/*compactify homepage channels widget*/
div.channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 {
	padding-top: 0px; /*top padding overall*/
}
div.channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-info {
	padding-bottom: 2px !important; /*between icon and "follow" on mobile*/
}
div.channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-items-wrapper {
	padding-top: 4px; /*between cards and follow*/
}
ui-carousel.dcb-ui-carousel.ui-carousel.ng-star-inserted {
	margin-top: 0px !important; /*between channels*/
}
ui-carousel div.ui-carousel-footer {
	margin: 0px !important;
}
ui-carousel div.ui-carousel-items-wrapper {
	padding-top: 8px !important;
}

/*not working - between cards horizontally
dcb-ui-carousel-item.ui-carousel-item.ng-star-inserted {
	padding-left: 3px !important;
	padding-right: 3px !important;
}*/

/* eliminate card white space!!! - not working
ui-card-content ul.ui-visually-hidden li.ng-star-inserted {
	height: 30px !important;
}*/


/***********************compactify activity stream**************/
activities-stream-widget widget-title div.common-widget-title.ui-typography-heading-3 {
	margin-bottom: 0px;
}/*compactify title*/

activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow {
	margin-bottom: 8px;}
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root {
	padding: 8px;} /* card bottom padding */
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root div.content div.header {
	margin-bottom: 3px;} /* compact header */
activities-stream-item-enrollment.item.item-enrollment.wrapper-shadow div.root div.content div.header div.title-container div.title {
	margin-bottom: 3px;} /* compact title */


activities-stream-item-question  {
	margin-bottom: 8px !important;}
activities-stream-item-question div.root question div.question-element {
	padding: 8px !important;}
activities-stream-item-question div.root div.question-content {
	margin-bottom: 3px;}
activities-stream-item-question div.root div.question-content div.question-owner-info {
	margin-bottom: 3px;}
activities-stream-item-question div.root div.question-content div.question-text {
	padding-bottom: 3px;}
activities-stream-item-question div.root div.question-content div.question-related-box-small {
	margin-bottom: 3px;}


activities-stream-item-asset  {
	margin-bottom: 8px !important;}
activities-stream-item-asset div.root {
	padding: 0px;}
activities-stream-item-asset div.root div.header {
	padding: 8px !important;}
activities-stream-item-asset div.root div.header div.title-container div.title {
	margin-bottom: 3px !important;}
activities-stream-item-asset div.root div.content-section {
	padding-top: 8px !important;
	padding-left: 8px !important;
	padding-right: 8px !important;}
activities-stream-item-asset div.root div.meta {
	padding: 8px !important;}
activities-stream-item-asset div.root div.meta div.rating-value {
	visibility: hidden;}


/*hide activity stream "e-learning" and "in-progress" text overlays*/
div.demo-card-image div.item-status-box.bolded.text-white.ng-star-inserted {
	visibility: hidden;}
div.demo-card-image div.type-box.bolded.ng-star-inserted {
	visibility: hidden;}


/********************sign-in page***********************/
/*compactify cookie popup*/
gdpr-policy-banner.bg-white.open {
	padding-top: 5px;
	padding-bottom: 5px;
    opacity: 0.8;
}

 

Bfarkas
Rank
Userlevel 7
Badge +3

oof, I hope you have someone dedicated to these things post updates, lot of changes for change sakes. Lot of tech debt.

N
Rank

Ok, so we still don’t have anyway to eliminate that white card space? Vertically or horizontally?

I don’t have DCS so I don’t need it and it looks so yucky.

lrodman
Rank
Userlevel 7
Badge +5

Ok, so we still don’t have anyway to eliminate that white card space? Vertically or horizontally?

I don’t have DCS so I don’t need it and it looks so yucky.

With CSS it can be done but it would require a bunch of ongoing maintenance

N
Rank

Ok. what is the initial CSS I can try? The code above says, “not working”. Is there something where it needs to read the text to decide the padding of the cell?

Do you mean everytime Docebo makes a change or I do?

Thank you!

Reply


Terms & ConditionsCookie settings