Detour - PixelExit.com [Deleted]

Steve F said:
Should work fine but we do have an update coming mid week next week if you can hold out. :)
Click to expand...
I couldn't hold out! It's by far my favorite theme. I went ahead and bought it anyways. WORKS GREAT! Thanx for the heads up on the update.
 
Hey there... love the style. Biggest problem I'm having is the left-side of threads where the user avatar and name is seems to be too narrow. A few people have long/spaceless usernames and it's wrapping their name down a line... example:

The user:
"MercenarySnake"

Shows up as:
"MercenarySnak
e"

The best I could do was hide the overflow, so now their names show up like:
"MercenarySnak..."

Which is less than ideal. Example here:
http://www.nma-fallout.com/threads/...5-post-issues-here.204833/page-6#post-4115231

Any idea how I can widen that area without breaking anything else? I tried customizing it but I made a terrible mess.
 
As an update I added the following to the extras.css but I'm not sure if this was the best way to do it... haven't seen whether it's broken anything or not:


.messageUserInfo {
float: left;
width: 140px !important;
}
.message .messageInfo, #QuickReply {
margin-left: 156px !important;
}
 
As an update to my previous post, this broke the mobile version of the site, so I've had to revert it yet again... any suggestions?
 
misterburke_ said:
As an update to my previous post, this broke the mobile version of the site, so I've had to revert it yet again... any suggestions?
Click to expand...

You can wrap that in a media query:

Code: 
@media (min-width:@maxResponsiveNarrowWidth)
{
.messageUserInfo {
float: left;
width: 140px !important;
}
.message .messageInfo, #QuickReply {
margin-left: 156px !important;
}
}

min-width setup so the CSS only applies above that small resolution so it won't break mobile.

There are a few ways of approaching something like this, smaller font size, increasing the width as you're doing or cutting off the name which wouldn't be ideal in that area.
 
If you use the style property Meesage Layout -> User Info Container - change 124px to something like 136px it should adjust all automatically.
 
Steve F updated Detour - PixelExit.com with a new update entry:

New XenBase Features/Bug Fixes/General Updates!

Before upgrading please make sure to take backups of your styles (XenBase, Purchased Style, and any child styles) before attempting updates. It is recommended to do some test imports so you can see what is affected!

https://pixelexit.com/resources/general-style-upgrading.15/

New to XenBase
  • ADDED FLEXible Nodes, you now have more control over your node setup than ever ( Style Properties -> -- Nodes )
  • ADDED Font Awesome inside...
Click to expand...

Read the rest of this update entry...
 
Hello,

I purchased this theme.
And have some questions:

1/ How can i put the vertical message user info to the horizontal
2/ What template should i edit to add custom link to Floating Nav Bar in mobile?
 
Last edited:
PeterChen said:
Hello,

I purchased this theme.
And have some questions:

1/ How can i put the vertical message user info to the horizontal
2/ What template should i edit to add custom link to Floating Nav Bar in mobile?
Click to expand...

Since you have seemed to have run into an issue with the message template we need to fix that first.

Does any templates show outdated? Also do you have a child style to Detour?
 
Steve F said:
Since you have seemed to have run into an issue with the message template we need to fix that first.

Does any templates show outdated? Also do you have a child style to Detour?
Click to expand...

Hi,
No outdated template.

yes, i do have a child style to Detour. I installed this style as the manual.
 

Attachments

  • style.webp
    style.webp
    22.3 KB · Views: 7
On the style LauXahn, when creating that did you import Detour again or did you use the "Create New Style" button and set Detour (Parent DO NOT EDIT) as the parent?
 
Steve F said:
On the style LauXahn, when creating that did you import Detour again or did you use the "Create New Style" button and set Detour (Parent DO NOT EDIT) as the parent?
Click to expand...


I rememberd i followed the READ ME closely when i installed, it was 3 weeks ago, i am not too sure but i think i Use the Create New Style.
 
here it is, i reverted it back.

Code: 
<xen:if is="@xb_famessageuser_boxed">

.xbMainUserInfo
{
    display: flex;
    justify-content: space-around;
}

.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints
{
        @property "xb_famessageuser_dl";
        font-size: 120%;
        background-color: @alt1Background;
        margin: 2px 0px;
        border: 1px solid @xbPrimaryBorder;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
        min-width: 29%;
        @property "/xb_famessageuser_dl";
}

.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dt
{
    @property "xb_famessageuser_dt";
    font-size: @xb_fontsizel;
    color: @primaryMedium;
    margin-right: 0px;
    float: none;
    text-align: center;
    @property "/xb_famessageuser_dt";
}
.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dd
{   
    @property "xb_famessageuser_dd";
    font-size: @xb_fontsizes;
    margin-right: 0px;
    float: none;
    text-align: center;
    width: auto;
    @property "/xb_famessageuser_dd";
}
.Responsive .messageUserBlock .extraUserInfo .fa
{
    color: @xb_famessageuser_dt.color;
    font-size: @xb_famessageuser_dt.font-size;
}
</xen:if>

.messageUserInfo
{
    @property "messageUserInfo";
    margin-bottom: 20px;
    @property "/messageUserInfo";
}
.messageUserBlock img
{
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
    .messageUserBlock
    {
        @property "messageUserBlock";
        background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        height: 122px;
        @property "/messageUserBlock";
    }
    .messageUserBlock
    {
        position: relative;
    }
       
        .messageUserBlock div.avatarHolder
        {
            @property "messageAvatarHolder";
            background-color: @primaryLightest;
            padding: 10px;
            margin-right: 15px;
            border-radius: 4px;
            float: left;
            @property "/messageAvatarHolder";   
            position: relative;   
        }
       
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
           
   
           
        .messageUserBlock h3.userText
        {
            @property "messageUserText";
            padding: 6px;
            @property "/messageUserText";
        }
       
        .messageUserBlock .userBanner
        {
            display: block;
            margin-bottom: 5px;
            margin-left: -{xen:calc '@messageUserText.padding-left + 6'}px;
            margin-right: -{xen:calc '@messageUserText.padding-right + 6'}px;
        }
       
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
        }
   
        .messageUserBlock a.username
        {
            @property "messageUsername";
            font-weight: bold;
            display: inline;
            overflow: hidden;
            line-height: 16px;
            @property "/messageUsername";
           
        }
       
        .messageUserBlock .userTitle
        {
            @property "messageUserTitle";
            font-size: 11px;
            margin-bottom: 16px;
            display: block;
            @property "/messageUserTitle";
        }
       
        .messageUserBlock .extraUserInfo
        {
            @property "messageExtraUserInfo";
            font-size: 10px;
            background-color: @primaryLightest;
            padding: 10px 10px 7px;
            margin: -58px 0;
            border-radius: 4px;
            float: right;
            height: 105px;
            @property "/messageExtraUserInfo";
        }
       
            .messageUserBlock .extraUserInfo dl
            {
                margin: 2px 0 0;
            }
                           
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
       
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
           
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
           
            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            -moz-border-left-colors: @messageUserBlock.border-color;
            border-right: none;
           
            /* Hide from IE6 */
            _display: none;
        }
       
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
               
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
               
                border: 10px solid transparent;
                border-left-color: @messageAvatarHolder.background-color;
                -moz-border-left-colors: @messageAvatarHolder.background-color;
                border-right: none;
            }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }
    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
   
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
   
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}
</xen:if>
 
You must log in or register to reply here.

Similar threads

Katsuro
NoOverlightenedTextColor
Replies
1
Views
99
cjwinternet
C
Pixel Exit
Bolt [Paid]
Replies
14
Views
1K
Russ
Russ
webtiryaki
SenSai [Paid]
Replies
2
Views
300
CedricV
CedricV
Mr Lucky
Making a custom style (for absolute beginners)
Replies
6
Views
652
Wildcat Media
Wildcat Media
021
[021] Real-Time Chat + UI.X [Deleted]
Replies
1
Views
531
021
021
Top Bottom