Delete the right Margin

Hello

I need some help to setup my FME forum and I would be pleased if you could helped !

I would like to reduce the size of the right margin at the right of last post column.
And I would like to know if we can delete the Re: when they're is an answer. And can we enlarge pictures by default ?




Thanks for your help

Hello and welcome to FM Design, @Neitsabg.

1. For the lastpost column, you can try reducing the space on the left by floating the column to the right. Add the following CSS rule to your stylesheet.
Admin Panel > Display > Colors

Code:

.forum-lastpost {
  float:right;
}

2. For "Re: " in the topic titles, feel free to try the following solution. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Remove "Re: " in replies.
Placement : In the topics
Paste the following code and click submit.

Code:

$(function() {
  for (var a = $('.topic-title a'), i = 0, j = a.length, regex = /^re: /i; i < j; i++) {
    if (regex.test(a[i].innerHTML)) {
      a[i].innerHTML = a[i].innerHTML.replace(regex, '');
    }
  }
});

This ought to strip out "Re: " from all the replies that contain it.


3. For enlarging images by default, try installing the following script. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Auto-enlarge Images
Placement : In all the pages
Paste the following script and click submit.

Code:

$(window).load(function() {
  $(function() {
    for (var a = $('.fa_img_enlarge'), i = 0, j = a.length; i < j; i++) {
      a[i].click();
    }
  });
});

This should automatically enlarge all images that are reduced. If it doesn't, let me know.

Hello, thanks for helping me and thanks for the warm welcome

Point 2. & 3. perfectly works.
Unfortunatly it's not the case of the point 1:

Reducing the value at this line only reduce de size for the lastpost but not the margin:

What I would like to have :


How it is:



I also have an other trouble (I know I'm annoying...)

Mobile version is completly unusable because of the design, I would like to use FM new mobile version but when I delete the overall header to desactivate FME mobile version it just gets weird (like at the right)


Thanks for your help !

Hello again,

For the first question, could you provide an URL to the forum ?

For the mobile version, once you've removed the redirect you will need to add the mobile CSS somewhere on the forum. By default the mobile version isn't styled, because Forumactif Edge was designed for mobile. This is the CSS for the mobile version ( minified ) :

Code:

/*Forumotion - Mobile Version Stylesheet*/* {transition: all 0.16s ease;}*,*:before,*:after {border: none;box-sizing: border-box;margin: 0;padding: 0;}html, body {background-color: #F5F5F5;color: #222222;height: 100%;}html {overflow-x: hidden;overflow-y: scroll;}body {direction: ltr;font-family: "Roboto";font-size: 10px;}a {color: inherit;text-decoration: none;}i {vertical-align: middle;}input,select {-moz-appearance: none;}img {display: inline-block;max-width:100%;width: auto;height: auto;}#wrap {margin: 0 auto;max-width: 1200px;padding-bottom: 35px;}/* Clear */header:after,.pagination:after,.forum-section:after,.box-login-btns-main:after,label:after {clear: both;content: "";display: block;}/* Clear *//* Header */#header {background-color: #222222;color: #FFFFFF;height: 76px;line-height: 76px;margin-bottom: 16px;position: relative;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;}#header .mobile_prev_button {cursor: pointer;float: left;font-size: 0;height: 56px;text-align: center;width: 56px;position: relative;}#header .mobile_prev_button:hover {background-color: #1976D2;}#header .mobile_prev_button + h1 {margin-left: 56px;}#header .mobile_prev_button:after {color: #FFFFFF;content: "\e408";position: absolute;top: 0;left: 0;width: 100%;height: 56px;line-height: 56px;}#header .mobile_prev_button, #header h1, #header #mToggleContainer {display: block;vertical-align: middle;}#header .mobile_prev_button, #header #mToggleContainer {line-height: 56px;margin-top: 10px;}#header #mToggleArrow {bottom: 0;display: block;height: 56px;position: absolute;right: 0;top: 10px;width: 56px;}#header #mToggleArrow:hover {background-color: #1976D2;}#header #mToggleArrow:after {color: #FFFFFF;content: "\e5d2";font-size: 24px;left: 0;right: 0;position: absolute;text-align: center;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}#header #mToggleArrow.shownBar:after {content: "\e5cd";}#header #mNavbar {background-color: #222222;box-shadow: 0 0 20px #000000;color: #FFFFFF;border-radius: 0 0 0 3px;display: none;left: auto;line-height: 1.5;list-style: none;padding: 10px 0;position: absolute;right: 0;text-align: left;top: 76px;z-index: 100;transition: none;}#header .navElement {display: block;clear: both;overflow: hidden;padding: 15px 40px;}#header .navElement > .navBtnIcon {margin-right: 15px;}#header .navElement > .navBtnIcon,#header .navElement > .navBtnLabel {display: block !important;float: left;}#header .navElement > .navBtnLabel {padding: 0;}h1 {font-size: 20px;font-weight: 400;overflow: hidden;margin-left: 16px;margin-right: 56px;text-align: center;text-overflow: ellipsis;max-width: 100%;padding: 0;font-family: "Roboto";}/* Header */.pagination {line-height: 32px;margin: 16px 0;position: relative;}.pagination ul {font-size: 14px;list-style: none;margin: 0 32px;text-align: center;}.pagination li {cursor: pointer;display: inline-block;height: 24px;line-height: 24px;margin: 0 8px;text-align: center;width: 24px;}.pagination-prev,.pagination-next {cursor: pointer;height: 24px;line-height: 24px;position: absolute;text-align: center;top: 4px;width: 24px;}.pagination-prev i,.pagination-next i {font-size: 20px;}.pagination-prev {left: 8px;}.pagination-next {right: 8px;}/* Forum */.forum {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);border-radius: 3px;margin: 16px 8px;}.forum h2 {background-color: #0598E4;color: #FFFFFF;border-radius: 3px 3px 0 0;display: block;font-size: 14px;font-weight: 500;padding: 16px;}.forum-empty {background-color: #FFFFFF;font-size: 16px;text-align: center;padding: 18px;border-radius: 0 0 3px 3px;}.forum-section {background-color: #FFFFFF;display: block;line-height: 22px;padding: 16px 16px 0;position: relative;}.forum-section:last-child {padding-bottom: 16px;}.forum-section:last-child:before {border-radius: 0 0 0 3px;}.forum-section:hover .forum-icon {background-color: #1976D2;}.forum-section:last-child {border-radius: 0 0 3px 3px;}.forum-section:not(:last-child):after {background-color: #EBEBEB;clear: both;content: "";display: block;height: 1px;margin-left: -16px;margin-right: -16px;margin-top: 12px;position: relative;z-index: 2;}.forum-section:before {background-color: #FAFAFA;border-color: #EBEBEB;content: "";display: block;clear: both;position: absolute;top: 0;left: 0;bottom: 0;width: 32px;border-right-width: 1px;border-right-style: solid;z-index: 1;}.forum_new:before,.folder_new:before {background-color: #D6E6FF;border-color: #94BEFF;}.forum-content {margin-left: 48px;overflow: hidden;position: relative;}.forum-icon {background-color: #B2B2B2;color: #FFFFFF;border-radius: 18px;float: left;height: 36px;line-height: 36px;margin-right: 16px;margin-top: 2px;text-align: center;width: 36px;position: relative;z-index: 2;}.forum-icon.unread {background-color: #039BE5;}.forum-icon i {display: none;font-size: 16px;}.forum-icon i:only-child {display: inline-block;}.forum-icon img {width: 36px;}.forum-avatar {border-radius: 18px;height: 36px;overflow: hidden;width: 36px;}.folder_locked .forum-icon:after {clear: both;display: block;position: absolute;content: "\e899";color: #BABABF;font-size: 15px;left: -7px;position: absolute;text-align: center;top: 35px;z-index: 3;font-family: 'Material Icons';font-weight: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}h3 {color: #222222;float: left;font-size: 16px;font-weight: 400;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;}.forum-lastpost-time {color: #797979;font-size: 14px;}.forum-lastpost {color: #222222;clear: both;font-size: 14px;}.forum-lastpost span {color: #797979;}.forum-statistics {background-color: #EBEBEB;color: #797979;display: block;border-radius: 3px;font-size: 12px;padding: 0 6px;position: absolute;right: 0;top: 0;white-space: nowrap;direction: ltr;}/* Topic */.topic h2 {color: #222222;font-size: 16px;font-weight: 400;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.post-section {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);border-color: #DDDDDD;border-style: solid;border-width: 1px;display: block;border-radius: 3px;line-height: 22px;margin: 16px 8px;padding: 16px;}.post-head {margin-bottom: 8px;position: relative;}.post-icon {background-color: #B2B2B2;color: #FFFFFF;border-radius: 18px;float: left;height: 36px;line-height: 36px;margin-right: 16px;margin-top: 2px;text-align: center;width: 36px;}.post-icon.unread {background-color: #039BE5;}.post-icon i {display: none;font-size: 16px;}.post-icon i:only-child {display: inline-block;}.post-icon img {width: 36px;}.post-icon a, .post-icon .avatarContainer {border-radius: 18px;display: block;height: 36px;overflow: hidden;width: 36px;}.post-time {color: #797979;float: right;font-size: 12px;position: absolute;right: 0;top: 0;}.post-details {color: #797979;font-size: 14px;}.post-content {font-size: 14px;white-space: normal;word-wrap: break-word;}.post-content a {color: #0598E4;border-bottom-style: solid;border-bottom-width: 1px;font-weight: 500;}.post-content .mentiontag {font-weight: 500;border: none;}.post-content embed {height: auto !important;max-width: 100%;}.post-content ul, .post-content ol {margin-left: 25px;}.spoiler {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;cursor: pointer;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}.spoiler:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e002";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}.spoiler_title {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}.spoiler_title a {border: none !important;}.spoiler_content {display: none;}.spoiler_content.hidden {display: block !important;}.codebox {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}.codebox p {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}.codebox code {direction: ltr;font-family: monospace;white-space: nowrap;overflow: auto;width: 100%;display: block;max-height: 250px;}.codebox:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e86f";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}/* Footer */footer {font-size: 14px;margin: 16px 0;text-align: center;}/* Footer */.btn-floating {background-color: #0598E4;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);color: #FFFFFF;border-radius: 24px;bottom: 15px;height: 48px;line-height: 48px;position: fixed;right: 15px;text-align: center;width: 48px;z-index: 1000;transition: all 0.16 ease;}.btn-floating i {font-size: 18px;}/* Buttons */.btn {background-color: #0598E4;color: #FFFFFF;border-radius: 3px;display: block;float: left;font-size: 14px;font-weight: 400;height: 36px;line-height: 36px;margin-bottom: 8px;padding: 0 16px;}.btn-subtle {background-color: transparent;color: #222222;border-radius: 3px;display: block;float: left;font-size: 14px;font-weight: 700;height: 30px;line-height: 30px;margin-bottom: 11px;margin-top: 3px;padding: 0 10px;}.btn + .btn, .btn + .btn-subtle,.btn-subtle + .btn,.btn-subtle + .btn-subtle {margin-left: 8px;}/* Inputs */.checkbox {border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.25);display: inline-block;font-size: 12px;height: 18px;line-height: 16px;position: relative;text-align: center;width: 18px;vertical-align: -4px;}.checkbox input {display: block;height: 16px;opacity: 0;width: 16px;}input:checked + .checkbox-check:after {opacity: 1;}.checkbox-check:after {color: #222222;bottom: 0;height: 16px;left: 0;line-height: 16px;opacity: 0;pointer-events: none;position: absolute;right: 0;text-align: center;top: 0;width: 16px;content: "\e876";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;transition: all 0.16s ease;}.input {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);border-radius: 3px;display: block;height: 48px;margin-bottom: 8px;padding: 0 16px;width: 100%;font-family: "Roboto";}.input-subtle {border-bottom: 2px solid rgba(0, 0, 0, 0.25);border-radius: 0 !important;display: block;width: 100%;clear: both;font-family: "Roboto";background-color: transparent;margin-bottom: 8px;}input.input-subtle {line-height: 36px;height: 36px;}textarea.input-subtle {line-height: 22px;min-height: 88px;}.box {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;overflow: hidden;padding: 16px;}.box .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-subtle {background-color: #F0F0F0;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);border-color: #DDDDDD;border-style: solid;border-width: 1px;display: block;border-radius: 3px;line-height: 22px;margin: 16px 8px;overflow: hidden;padding: 16px;}.box-subtle h2,.box-subtle .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-success {background-color: #449900;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);color: #FFFFFF;border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;padding: 16px;}.box-success .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-error {background-color: #DD4400;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);color: #FFFFFF;border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;padding: 16px;}.box-error .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-login {display: block;margin: 16px 8px;}.box-login-btns-main .btn,.box-login-btns-main .btn-subtle {float: left;}label {display: block;font-size: 14px;line-height: 30px;margin-bottom: 8px;}label input {vertical-align: -2px;}label span + span {margin-left: 12px;}.poll dt {font-size: 14px;font-weight: 500;margin-bottom: 4px;width: 100%;display: block;}.poll dd {margin-bottom: 12px;width: 100%;display: block;}.poll-bar-wrap {background-color: #BBBBBB;border-radius: 3px;width: 100%;}.poll-bar {background-color: #0598E4;color: #FFFFFF;width: auto;border-radius: 3px;height: 22px;line-height: 22px;}.poll-percent {padding: 0 6px;}.poll-num {color: #FFFFFF;float: right;padding: 0 6px;}.poll-total {width: auto !important;display: inline-block !important;margin-bottom: 0 !important;}dd.poll-total {margin-left: 8px;font-size: 14px;}blockquote {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}blockquote:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e244";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}cite {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}cite a {border: none !important;}.quote_content {font-style: italic;}.open_quote, .close_quote {display: none;}#swipe_back_arrow,#swipe_next_arrow {background-color: #FFFFFF;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);color: #222222;position: fixed;height: 36px;width: 36px;top: 50%;margin-top: -18px;z-index: 9999;opacity: 0;border-radius: 36px;transition: none;text-align: center;line-height: 36px;}#swipe_back_arrow:after,#swipe_next_arrow:after {color: #222222;font-size: 24px;z-index: 3;line-height: 36px;text-align: center;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}#swipe_back_arrow {left: 0;}#swipe_back_arrow:after {content: "\e408";}#swipe_next_arrow {right: 0;}#swipe_next_arrow:after {content: "\e409";}/* Can't change id/class name */.mobile_title {background-color: rgba(0, 0, 0, 0.05);display: block;font-size: 14px;height: 48px;line-height: 48px;position: relative;text-align: center;width: 100%;}.mobile_title .mobile_next_button {bottom: 0;display: block;font-size: 0;height: 48px;position: absolute;right: 0;top: 0;width: 48px;}.mobile_title .mobile_next_button:after {content: "\e409";}.mobile_title .mobile_prev_button {bottom: 0;display: block;font-size: 0;height: 48px;left: 0;position: absolute;top: 0;width: 48px;}.mobile_title .mobile_prev_button:after {content: "\e408";}.mobile_title .mobile_next_button:after,.mobile_title .mobile_prev_button:after {color: #222222;font-size: 24px;z-index: 3;line-height: 48px;text-align: center;position: absolute;width: 48px;top: 0;left: 0;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}.mobile_title #mNavbar {background-color: #222222;color: #FFFFFF;display: none;left: 0;line-height: 1.5;list-style: none;padding-left: 48px;position: absolute;right: 0;text-align: left;top: 48px;z-index: 100;transition: none;}.mobile_title .navElement > * {display: none;}.mobile_title .navElement > .navBtnLabel {display: block !important;padding: 12px 0;}.banniere,#m_dcontentglobal_ad_id1 {width: 320px;text-align: center;margin: 0 auto;}

Ange Tuteur wrote:Hello again,

For the first question, could you provide an URL to the forum ?

For the mobile version, once you've removed the redirect you will need to add the mobile CSS somewhere on the forum. By default the mobile version isn't styled, because Forumactif Edge was designed for mobile. This is the CSS for the mobile version ( minified ) :

Code:

/*Forumotion - Mobile Version Stylesheet*/* {transition: all 0.16s ease;}*,*:before,*:after {border: none;box-sizing: border-box;margin: 0;padding: 0;}html, body {background-color: #F5F5F5;color: #222222;height: 100%;}html {overflow-x: hidden;overflow-y: scroll;}body {direction: ltr;font-family: "Roboto";font-size: 10px;}a {color: inherit;text-decoration: none;}i {vertical-align: middle;}input,select {-moz-appearance: none;}img {display: inline-block;max-width:100%;width: auto;height: auto;}#wrap {margin: 0 auto;max-width: 1200px;padding-bottom: 35px;}/* Clear */header:after,.pagination:after,.forum-section:after,.box-login-btns-main:after,label:after {clear: both;content: "";display: block;}/* Clear *//* Header */#header {background-color: #222222;color: #FFFFFF;height: 76px;line-height: 76px;margin-bottom: 16px;position: relative;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;}#header .mobile_prev_button {cursor: pointer;float: left;font-size: 0;height: 56px;text-align: center;width: 56px;position: relative;}#header .mobile_prev_button:hover {background-color: #1976D2;}#header .mobile_prev_button + h1 {margin-left: 56px;}#header .mobile_prev_button:after {color: #FFFFFF;content: "\e408";position: absolute;top: 0;left: 0;width: 100%;height: 56px;line-height: 56px;}#header .mobile_prev_button, #header h1, #header #mToggleContainer {display: block;vertical-align: middle;}#header .mobile_prev_button, #header #mToggleContainer {line-height: 56px;margin-top: 10px;}#header #mToggleArrow {bottom: 0;display: block;height: 56px;position: absolute;right: 0;top: 10px;width: 56px;}#header #mToggleArrow:hover {background-color: #1976D2;}#header #mToggleArrow:after {color: #FFFFFF;content: "\e5d2";font-size: 24px;left: 0;right: 0;position: absolute;text-align: center;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}#header #mToggleArrow.shownBar:after {content: "\e5cd";}#header #mNavbar {background-color: #222222;box-shadow: 0 0 20px #000000;color: #FFFFFF;border-radius: 0 0 0 3px;display: none;left: auto;line-height: 1.5;list-style: none;padding: 10px 0;position: absolute;right: 0;text-align: left;top: 76px;z-index: 100;transition: none;}#header .navElement {display: block;clear: both;overflow: hidden;padding: 15px 40px;}#header .navElement > .navBtnIcon {margin-right: 15px;}#header .navElement > .navBtnIcon,#header .navElement > .navBtnLabel {display: block !important;float: left;}#header .navElement > .navBtnLabel {padding: 0;}h1 {font-size: 20px;font-weight: 400;overflow: hidden;margin-left: 16px;margin-right: 56px;text-align: center;text-overflow: ellipsis;max-width: 100%;padding: 0;font-family: "Roboto";}/* Header */.pagination {line-height: 32px;margin: 16px 0;position: relative;}.pagination ul {font-size: 14px;list-style: none;margin: 0 32px;text-align: center;}.pagination li {cursor: pointer;display: inline-block;height: 24px;line-height: 24px;margin: 0 8px;text-align: center;width: 24px;}.pagination-prev,.pagination-next {cursor: pointer;height: 24px;line-height: 24px;position: absolute;text-align: center;top: 4px;width: 24px;}.pagination-prev i,.pagination-next i {font-size: 20px;}.pagination-prev {left: 8px;}.pagination-next {right: 8px;}/* Forum */.forum {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);border-radius: 3px;margin: 16px 8px;}.forum h2 {background-color: #0598E4;color: #FFFFFF;border-radius: 3px 3px 0 0;display: block;font-size: 14px;font-weight: 500;padding: 16px;}.forum-empty {background-color: #FFFFFF;font-size: 16px;text-align: center;padding: 18px;border-radius: 0 0 3px 3px;}.forum-section {background-color: #FFFFFF;display: block;line-height: 22px;padding: 16px 16px 0;position: relative;}.forum-section:last-child {padding-bottom: 16px;}.forum-section:last-child:before {border-radius: 0 0 0 3px;}.forum-section:hover .forum-icon {background-color: #1976D2;}.forum-section:last-child {border-radius: 0 0 3px 3px;}.forum-section:not(:last-child):after {background-color: #EBEBEB;clear: both;content: "";display: block;height: 1px;margin-left: -16px;margin-right: -16px;margin-top: 12px;position: relative;z-index: 2;}.forum-section:before {background-color: #FAFAFA;border-color: #EBEBEB;content: "";display: block;clear: both;position: absolute;top: 0;left: 0;bottom: 0;width: 32px;border-right-width: 1px;border-right-style: solid;z-index: 1;}.forum_new:before,.folder_new:before {background-color: #D6E6FF;border-color: #94BEFF;}.forum-content {margin-left: 48px;overflow: hidden;position: relative;}.forum-icon {background-color: #B2B2B2;color: #FFFFFF;border-radius: 18px;float: left;height: 36px;line-height: 36px;margin-right: 16px;margin-top: 2px;text-align: center;width: 36px;position: relative;z-index: 2;}.forum-icon.unread {background-color: #039BE5;}.forum-icon i {display: none;font-size: 16px;}.forum-icon i:only-child {display: inline-block;}.forum-icon img {width: 36px;}.forum-avatar {border-radius: 18px;height: 36px;overflow: hidden;width: 36px;}.folder_locked .forum-icon:after {clear: both;display: block;position: absolute;content: "\e899";color: #BABABF;font-size: 15px;left: -7px;position: absolute;text-align: center;top: 35px;z-index: 3;font-family: 'Material Icons';font-weight: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}h3 {color: #222222;float: left;font-size: 16px;font-weight: 400;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;}.forum-lastpost-time {color: #797979;font-size: 14px;}.forum-lastpost {color: #222222;clear: both;font-size: 14px;}.forum-lastpost span {color: #797979;}.forum-statistics {background-color: #EBEBEB;color: #797979;display: block;border-radius: 3px;font-size: 12px;padding: 0 6px;position: absolute;right: 0;top: 0;white-space: nowrap;direction: ltr;}/* Topic */.topic h2 {color: #222222;font-size: 16px;font-weight: 400;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.post-section {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);border-color: #DDDDDD;border-style: solid;border-width: 1px;display: block;border-radius: 3px;line-height: 22px;margin: 16px 8px;padding: 16px;}.post-head {margin-bottom: 8px;position: relative;}.post-icon {background-color: #B2B2B2;color: #FFFFFF;border-radius: 18px;float: left;height: 36px;line-height: 36px;margin-right: 16px;margin-top: 2px;text-align: center;width: 36px;}.post-icon.unread {background-color: #039BE5;}.post-icon i {display: none;font-size: 16px;}.post-icon i:only-child {display: inline-block;}.post-icon img {width: 36px;}.post-icon a, .post-icon .avatarContainer {border-radius: 18px;display: block;height: 36px;overflow: hidden;width: 36px;}.post-time {color: #797979;float: right;font-size: 12px;position: absolute;right: 0;top: 0;}.post-details {color: #797979;font-size: 14px;}.post-content {font-size: 14px;white-space: normal;word-wrap: break-word;}.post-content a {color: #0598E4;border-bottom-style: solid;border-bottom-width: 1px;font-weight: 500;}.post-content .mentiontag {font-weight: 500;border: none;}.post-content embed {height: auto !important;max-width: 100%;}.post-content ul, .post-content ol {margin-left: 25px;}.spoiler {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;cursor: pointer;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}.spoiler:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e002";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}.spoiler_title {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}.spoiler_title a {border: none !important;}.spoiler_content {display: none;}.spoiler_content.hidden {display: block !important;}.codebox {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}.codebox p {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}.codebox code {direction: ltr;font-family: monospace;white-space: nowrap;overflow: auto;width: 100%;display: block;max-height: 250px;}.codebox:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e86f";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}/* Footer */footer {font-size: 14px;margin: 16px 0;text-align: center;}/* Footer */.btn-floating {background-color: #0598E4;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);color: #FFFFFF;border-radius: 24px;bottom: 15px;height: 48px;line-height: 48px;position: fixed;right: 15px;text-align: center;width: 48px;z-index: 1000;transition: all 0.16 ease;}.btn-floating i {font-size: 18px;}/* Buttons */.btn {background-color: #0598E4;color: #FFFFFF;border-radius: 3px;display: block;float: left;font-size: 14px;font-weight: 400;height: 36px;line-height: 36px;margin-bottom: 8px;padding: 0 16px;}.btn-subtle {background-color: transparent;color: #222222;border-radius: 3px;display: block;float: left;font-size: 14px;font-weight: 700;height: 30px;line-height: 30px;margin-bottom: 11px;margin-top: 3px;padding: 0 10px;}.btn + .btn, .btn + .btn-subtle,.btn-subtle + .btn,.btn-subtle + .btn-subtle {margin-left: 8px;}/* Inputs */.checkbox {border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.25);display: inline-block;font-size: 12px;height: 18px;line-height: 16px;position: relative;text-align: center;width: 18px;vertical-align: -4px;}.checkbox input {display: block;height: 16px;opacity: 0;width: 16px;}input:checked + .checkbox-check:after {opacity: 1;}.checkbox-check:after {color: #222222;bottom: 0;height: 16px;left: 0;line-height: 16px;opacity: 0;pointer-events: none;position: absolute;right: 0;text-align: center;top: 0;width: 16px;content: "\e876";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;transition: all 0.16s ease;}.input {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);border-radius: 3px;display: block;height: 48px;margin-bottom: 8px;padding: 0 16px;width: 100%;font-family: "Roboto";}.input-subtle {border-bottom: 2px solid rgba(0, 0, 0, 0.25);border-radius: 0 !important;display: block;width: 100%;clear: both;font-family: "Roboto";background-color: transparent;margin-bottom: 8px;}input.input-subtle {line-height: 36px;height: 36px;}textarea.input-subtle {line-height: 22px;min-height: 88px;}.box {background-color: #FFFFFF;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;overflow: hidden;padding: 16px;}.box .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-subtle {background-color: #F0F0F0;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);border-color: #DDDDDD;border-style: solid;border-width: 1px;display: block;border-radius: 3px;line-height: 22px;margin: 16px 8px;overflow: hidden;padding: 16px;}.box-subtle h2,.box-subtle .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-success {background-color: #449900;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);color: #FFFFFF;border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;padding: 16px;}.box-success .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-error {background-color: #DD4400;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);color: #FFFFFF;border-radius: 3px;display: block;font-size: 14px;margin: 16px 8px;padding: 16px;}.box-error .box-header {font-size: 16px;margin-bottom: 8px;font-weight: 400;}.box-login {display: block;margin: 16px 8px;}.box-login-btns-main .btn,.box-login-btns-main .btn-subtle {float: left;}label {display: block;font-size: 14px;line-height: 30px;margin-bottom: 8px;}label input {vertical-align: -2px;}label span + span {margin-left: 12px;}.poll dt {font-size: 14px;font-weight: 500;margin-bottom: 4px;width: 100%;display: block;}.poll dd {margin-bottom: 12px;width: 100%;display: block;}.poll-bar-wrap {background-color: #BBBBBB;border-radius: 3px;width: 100%;}.poll-bar {background-color: #0598E4;color: #FFFFFF;width: auto;border-radius: 3px;height: 22px;line-height: 22px;}.poll-percent {padding: 0 6px;}.poll-num {color: #FFFFFF;float: right;padding: 0 6px;}.poll-total {width: auto !important;display: inline-block !important;margin-bottom: 0 !important;}dd.poll-total {margin-left: 8px;font-size: 14px;}blockquote {background-color: rgba(0, 0, 0, 0.05);border-color: rgba(0, 0, 0, 0.05);border-style: solid;border-width: 1px;border-radius: 3px;display: block;min-width: 100%;padding: 16px;margin: 0 0 8px;font-style: normal;font-family: "Roboto";position: relative;}blockquote:after {display: block;font-size: 20px;position: absolute;top: 16px;right: 16px;color: rgba(0, 0, 0, 0.5);content: "\e244";font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}cite {display: block;border-bottom: 1px dashed rgba(0, 0, 0, 0.25);padding-bottom: 8px;margin-bottom: 8px;font-weight: 500;font-style: normal;font-family: "Roboto";}cite a {border: none !important;}.quote_content {font-style: italic;}.open_quote, .close_quote {display: none;}#swipe_back_arrow,#swipe_next_arrow {background-color: #FFFFFF;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);color: #222222;position: fixed;height: 36px;width: 36px;top: 50%;margin-top: -18px;z-index: 9999;opacity: 0;border-radius: 36px;transition: none;text-align: center;line-height: 36px;}#swipe_back_arrow:after,#swipe_next_arrow:after {color: #222222;font-size: 24px;z-index: 3;line-height: 36px;text-align: center;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}#swipe_back_arrow {left: 0;}#swipe_back_arrow:after {content: "\e408";}#swipe_next_arrow {right: 0;}#swipe_next_arrow:after {content: "\e409";}/* Can't change id/class name */.mobile_title {background-color: rgba(0, 0, 0, 0.05);display: block;font-size: 14px;height: 48px;line-height: 48px;position: relative;text-align: center;width: 100%;}.mobile_title .mobile_next_button {bottom: 0;display: block;font-size: 0;height: 48px;position: absolute;right: 0;top: 0;width: 48px;}.mobile_title .mobile_next_button:after {content: "\e409";}.mobile_title .mobile_prev_button {bottom: 0;display: block;font-size: 0;height: 48px;left: 0;position: absolute;top: 0;width: 48px;}.mobile_title .mobile_prev_button:after {content: "\e408";}.mobile_title .mobile_next_button:after,.mobile_title .mobile_prev_button:after {color: #222222;font-size: 24px;z-index: 3;line-height: 48px;text-align: center;position: absolute;width: 48px;top: 0;left: 0;font-family: 'Material Icons';font-weight: normal;font-style: normal;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-moz-font-feature-settings: 'liga';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}.mobile_title #mNavbar {background-color: #222222;color: #FFFFFF;display: none;left: 0;line-height: 1.5;list-style: none;padding-left: 48px;position: absolute;right: 0;text-align: left;top: 48px;z-index: 100;transition: none;}.mobile_title .navElement > * {display: none;}.mobile_title .navElement > .navBtnLabel {display: block !important;padding: 12px 0;}.banniere,#m_dcontentglobal_ad_id1 {width: 320px;text-align: center;margin: 0 auto;}

Thanks!

frct3.forumactif.com

Your code works great except it creates a weird bug on normal version (lastpost author name is not as the good place when I put the code)

Hm.. did you put the mobile CSS into the stylesheet in the AP ? If so, that's why it's displaying like that. By default, the mobile version CSS is usually separate from the classic version, when both are join together that may cause some conflicts. Hmm... The only solution I can thing would be to try and add the mobile CSS in the the overall_header template of the mobile version. It can be inline OR hosted on an external webhost.