Publicaciones
Certificados
Me gusta
Avatar

Estilos personalizados para la plataforma EDteam

Avatar
Steveen Echeverri Silva

@steveenecheverrisilva

Hola comunidad, si alguien le interesa como personalizar los colores de la plataforma, y demás estilos, yo les recomiendo la extensión de Ghrome que se llama Stylish (temas a medida para cada sitio web), en mi caso modifique los estilos como un tema dark. Aquí les dejo una vista y las modificaciones en las clases que hice: Extención: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=es

body {
   background: var(--dark-color);
   color: var(--light-color);
}
.main-header {
   border-bottom: 1px solid #fff;
   background: var(--dark-color);
}
.main-menu a {
   color: var(--light-color);
}
.main-logo {
   height: 2.5rem;
   background-color: #fff;
   border-radius: 5px;
   padding: 5px;
   box-shadow: 0 0 6px 2px rgba(255,255,255,1);
}
.topbar {
   background-color: var(--dark-color);
}

.meatballs-menu__nav {
	background: var(--dark-color-darker);
   box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.lg-tooltip {
	background-color: var(--dark-color-darker);
}
.dropdown ul .main-menu__item a {
    color: var(--light-color);
}

.notification-panel {
	background-color: var(--dark-color-darker);
}
.color {
   color: var(--color);
}
.text-color,
.publication-editor__textarea{
   --color: var(--text-color-light);
}
textarea{
	color: #fff;
}
.dark-color {
   --color: var(--grey-color-lighter);
   --color-alt: var(--grey-color-lighter);
}
.answer {
   color: var(--fourth-color-darker);
}
.vote{
	color: var(--first-color);
}
.featured-publication, 
.featured-publication__item,
.foro-sidebar__list {
   background-color: var(--dark-color-darker);
}
.create-publication.active.main .create-publication__container {
   background-color: var(--dark-color);
   border-radius: 5px;
   box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.courses-searchbar {
   background-color: var(--dark-color-dark);
}
.footer-card {
   background-color: var(--thumb-color-hover);
}
.s-bg-white {
	background-color: var(--dark-color-darker);
}
.t4, .aside-course-card__price .t4, h3{
   color: var(--light-color);
}
.class-page-container{
   background-color: var(--dark-color);
}
.main-banner {
   background-color: var(--dark-color-darker);
}
.s-to-bottom {
   background-color: var(--dark-color-darker);
}
.lg-bg-white {
   background-color: var(--dark-color-dark);
}
.scroll, [class*=scroll], body {
   --thumb-color: var(--dark-color-dark);
   --thumb-color-hover: var(--dark-color-smooth);
   --track-color: var(--dark-color-smoother);
}
Avatar

Comparto mi sitio de tarjeta personal (HTML y CSS)

Avatar
Steveen Echeverri Silva

@steveenecheverrisilva

Buen día comunidad, este es un pequeño proyecto de una tarjeta de presentación personal, en la que practique lo básico en el desarrollo web (html y css), usando el editar de código visual studio code, aplicando flex-box para darle la estructura sencilla, iconos de font-awesome, y una media query haciendo una pequeña adaptación móvil.

Publicado en: https://styvensoft.github.io/card-site/

Diseño basado: https://dribbble.com/shots/2316130-Riche-vCard-Personal-vCard-HTML-Template