# Displaced user-card, need some help with CSS

**URL:** <https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006>\
**Category:** Product Support\
**Created:** [August 17, 2018, 4:01pm UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006 "2018-08-17T16:01:44Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Pravi](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pravi](https://meta.discourse.org/u/Pravi)\
**Post date:** [August 18, 2018, 11:12am UTC](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006/3 "2018-08-18T11:12:15Z")

</div>

Thanks for the replay. I made the following changes as mentioned, but it didn’t get as well as expected. See the below images after making the above mentioned change.

 ![1](https://global.discourse-cdn.com/meta/original/3X/a/3/a32d665395733cced0d9e3e5efa719bd7d9152d6.png)

 ![2](https://global.discourse-cdn.com/meta/original/3X/5/b/5b668c68e06a155a78c4e0757fafab768275e63c.png)

**See the current custom CSS without making any new change.**

```
@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');

header #site-text-logo {
    font-size: 26px;
    //font-style: italic;
    font-family: 'Redressed', cursive;
    color: #2471a3; //#5c998b;
    position: relative;
    top: -5px;
    left: 25px;
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

.d-header {
    padding: 0;
    height: 0; 
    background-color: #323433; // Header Background color
    width: 100%;
    padding-top: 0;
    height: 48px;
    box-shadow: none;
}

.d-header .wrap {
    background-color: #fff;
    max-width: 1144px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

#main-outlet {
    padding-top: 70px;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 25px 25px; 
}

.title-wrapper {
    padding-bottom: 1px;
}

.extra-info-wrapper .topic-link {
    font-family: 'Philosopher', sans-serif;  
}

.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
    font-size: 13px;
}

#topic-title h1 a {
    font-family: 'Philosopher', sans-serif;
}

.badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
}

.d-header-icons .badge-notification {
    margin: 5px 0;
    //background: #00AEEF;
}

.d-header .contents {
   margin: 2px 0;
}
  /* dark gray background in body */
body {
  background-color: #323433;
  //height: 100%; 
    
}
html {
  background-color: #323433; 
    
}

/* set fixed container sizes */
div.full-width {
  width: 1110px; 
}
div.container {
  width: 1110px; 
}
.admin-content {
  width: 1110px; 
}
#user-menu {
  width: 1110px; 
}
.modal-outer-container {
  width: 1110px; 
}

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; 
}
  
/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); 
}
  
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; 
}
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); 
}
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; 
}
  
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; 
}
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; 
}
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333;
}
  
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; 
}
#main #topic-list th {
  background-color:#E6E6E6; 
}

```

---

_[View the full topic](https://meta.discourse.org/t/displaced-user-card-need-some-help-with-css/95006)._