1. Gabriel Zanetti Avatar Gabriel Zanetti
  2. All repositories
  3. q2a-profile-customizer-public

Wiki

Clone wiki

q2a-profile-customizer-public / Theme-hacks

View History

PC - Profile Customizer

Table of contents:

Theme hacks

The following CSS theme hacks have to be added to the end of the pupi_pc_styles.css file. They are exclusive. This means if you have added the modifications for the Classic theme and then you start using the Snow theme then you will have to remove the Classic theme changes and add the Snow ones.

If you have an open source theme published in the Q2A forums, with at least 10 upvotes, feel free to contact me as I might give it a try and maybe add whatever hack is needed. On the other hand, if your theme does not fulfill these requirements and you don't have enough technical skills to handle this on your own, you can hire me at an hourly rate to see what can be done to improve the look and feel.

Candy theme (released with Q2A v1.7)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Works fine
  • Adding the delete as helpful option: Requires CSS changes to include the trash bin icon

All CSS changes to apply:

/* Hacks for the Classic theme released with Q2A 1.7 */

/* Hack to add the delete as helpful trash bin image to the button */
.qa-form-light-button-deleteashelpful {
    background: url(delete-as-helpful.png) no-repeat left center;
    padding-left: 18px;
}

Classic theme (released with Q2A v1.7)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Works fine
  • Adding the delete as helpful option: Works fine

Cleanstrap theme (version taken from GitHub repository on 2014-11-12)

Feature support:

  • Adding the reputation chart to the profile: Does not work. The only section displayed in the user profile is the Profile information, so even if added it is not displayed. Below is the theme hack that used to work when other sections were displayed
  • Profile section sorting: Does not work. The only section displayed in the user profile is the Profile information, so there is nothing to sort. It used to work when other sections were present in the theme
  • Adding the delete as helpful option: Works fine

All CSS changes to apply:

/* Hacks for the CleanStrap theme from 2014-11-12 */

/* Hack to make points section look like the rest of the sections */
.qa-template-user .qa-part-form-pupi-pc-pointschart {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}

Donut theme (version taken from GitHub repository on 2014-11-15)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Does not work. Changing the order of each section requires a custom CSS for that order because each section already has a custom CSS
  • Adding the delete as helpful option: Works fine

All CSS changes to apply:

/* Hacks for the Donut theme released on 2014-11-04 */

/* Hack to add the delete as helpful trash bin image to the button */
.qa-form-light-button-deleteashelpful::before {
    content: "\f014";
}

/* Hack to remove the space below the table */
.qa-template-user .qa-part-form-pupi-pc-pointschart table {
    margin-bottom: 0;
}

/* Hacks to display the chart in a similar way to other sections */

.qa-template-user .qa-part-form-pupi-pc-pointschart {
    float: left;
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #e2e2e2;
    padding: 15px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .qa-template-user .qa-part-form-pupi-pc-pointschart {
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    .qa-template-user .qa-part-form-pupi-pc-pointschart {
        border-left: 0;
    }
}

.qa-template-user .qa-part-message-list {
    border-top: 0;
    border-bottom: 0;
    padding-bottom: 30px;
}

Snow theme (released with Q2A v1.6.3)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Works fine as long as the profile section is on top of the sequence
  • Adding the delete as helpful option: Works fine

All CSS changes to apply:

/* Hacks for the Snow theme released with Q2A 1.6.3 */

/* Hack to add the delete as helpful trash bin image to the button */
.qa-form-light-button-deleteashelpful {
    background: url(delete-as-helpful.png) no-repeat left center;
    padding-left: 18px;
}

/* Hack to remove the hover effect */
.qa-template-user .qa-part-form-pupi-pc-pointschart table tr:hover {
    background-color: initial;
}

/* Hack to accomodate the points chart section aligned to the right */
.qa-template-user .qa-part-form-pupi-pc-pointschart {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    width: 50%;
    float: right;
    padding-left: 10px;
}

Snow Flat theme (released with Q2A v1.7)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Works fine as long as the profile section is on top of the sequence
  • Adding the delete as helpful option: Works fine

All CSS changes to apply:

/* Hacks for the Snow Flat theme released with Q2A 1.7 */

/* Hack to add the delete as helpful trash bin image to the button */
.qa-form-light-button-deleteashelpful {
    background-image: url(delete-as-helpful.png) !important;
}

/* Hack to accomodate the points chart section aligned to the right */
.qa-part-form-pupi-pc-pointschart {
    padding: 20px;
    margin-bottom: 5px;
    background: #fff;
}

/* Hack to remove the top margin from the title */
.qa-part-form-pupi-pc-pointschart h2 {
    margin-top: 0;
}

/* Hack to change from one to two columns based on window width */
@media (min-width: 980px) {
    .qa-part-form-pupi-pc-pointschart {
        width: 49.8%;
        float: right; /* Use "left" if using RTL */
        clear: right; /* Use "left" if using RTL */
    }
}

Lion theme (version 1.0.5)

Feature support:

  • Adding the reputation chart to the profile: Works fine
  • Profile section sorting: Works fine
  • Adding the delete as helpful option: This plugin treats answer buttons as comment buttons, which breaks the logic of the delete as helpful button in answers. This is something that should be fixed at a theme level. Delete as helpful button in questions and comments work fine.

All CSS changes to apply: 

.qa-part-form-pupi-pc-pointschart {
    padding: 16px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 20px;
    border-bottom: 1px solid #eee;
}

.qa-part-form-pupi-pc-pointschart a {
    color: #2a2a2a;
}

.qa-form-light-button-deleteashelpful {
    background-image: none !important;
}

.a-item-footer-inner .qa-form-light-button-deleteashelpful,
.qa-a-item-footer-inner .qa-form-light-button-deleteashelpful,
.qa-q-view-footer-inner .qa-form-light-button-deleteashelpful,
.qa-c-item-footer-inner .qa-form-light-button-deleteashelpful {
    display: none;
}

Updated