Latest topics
» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Delete the right Margin

View previous topic View next topic Go down

Neitsabg
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 95
Reputation : 0
Language : French, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostNeitsabg on Sat 10 Sep 2016, 13:57

Hello Smile

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

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 Smile ?




Thanks for your help Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 13 Sep 2016, 12:05

Hello and welcome to FM Design, @Neitsabg. Smile

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. Wink
Neitsabg
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 95
Reputation : 0
Language : French, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostNeitsabg on Sat 17 Sep 2016, 08:00

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

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 Smile !

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 20 Sep 2016, 11:10

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;}
Neitsabg
New Member
Title :
Gender : Unspecified
Posts : 3
Points : 95
Reputation : 0
Language : French, English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostNeitsabg on Sat 24 Sep 2016, 04:49

@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)

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 12 Oct 2016, 11:44

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. Think

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum