Flexile Dark

Flexile Dark 1.1.5.1

No permission to download
Overview Updates (4) Reviews (23) History Discussion
Status
Not open for further replies.
Erik said:
Yes, now they are in a single sprite image as per the move to CSS sprites in XenForo 1.1. What you'll have to do is edit /styles/flexiledark/xenforo/node-sprite.png and replace the icons inside that image with your own. For reference, each one is 44px wide (or rather, the image should be divided up into four 44px sections). :)
Click to expand...

Thanks Erik.

I get the concept of what youre saying. But how we stich 4 images together? I got MS paint lol, do I need something more advanced?
 
ddmmh said:
Thanks Erik.

I get the concept of what youre saying. But how we stich 4 images together? I got MS paint lol, do I need something more advanced?
Click to expand...
Yes, something that will handle proper transparency at least. Try paint.NET or GIMP. :)

You will have to either open node-sprite.png in your image-editing program and replace the sections that need to be replaced, or create a new image that is the same size and copy in your 4 separate images. :)
 
Another wee EXTRA.css edit if anyone wants it.
From as far back as I can remember I'd always set the "Share This Page" text in the thread view to this (lighter grey):
Code: 
/* Share This Page */
.larger.textHeading, .xenForm .sectionHeader {
    color: #CECECE !important;
}
 
ddmmh said:
I suck at this but I think I got it working. Not sure what the other 2 icons are used for? So im not sure if I messed them up. If you get a chance could you check out http://mmazone.com.au/community/forum/ and see if it looks ok? Thanks Erik.
Click to expand...
Looks good to me. The other two icons are for link forums and pages/"page forums" but if you're not using those, then you don't need to worry about them.

trilogy33 said:
Another wee EXTRA.css edit if anyone wants it.
From as far back as I can remember I'd always set the "Share This Page" text in the thread view to this (lighter grey):
Code: 
/* Share This Page */
.larger.textHeading, .xenForm .sectionHeader {
    color: #CECECE !important;
}
Click to expand...
I should probably just make this a permanent change...
 
trilogy33 said:
Another wee EXTRA.css edit if anyone wants it.
From as far back as I can remember I'd always set the "Share This Page" text in the thread view to this (lighter grey):
Code: 
/* Share This Page */
.larger.textHeading, .xenForm .sectionHeader {
    color: #CECECE !important;
}
Click to expand...
That is much better. Highly recommended.
 
Thanks for the update for 1.1 Erik, much appreciated.

However, there appears to be an issue in both Flextiles with the ad_above_top_breadcrumb placement.

See the attached for an example...

flextile.webp

With Flextile, it puts the ad block before the nav, when it wants to be above it - i.e. outside of the same block as the nav.

Whilst I'm at it, how do you change the blue text of the inactive tabs - I can't find the option anywhere.
 
Erik said:
Looks good to me. The other two icons are for link forums and pages/"page forums" but if you're not using those, then you don't need to worry about them.


I should probably just make this a permanent change...
Click to expand...

where do you find or add the EXTRA.css for the changes?
 
Hello I'm really needing some help as to how to customize some areas of text to another color. Please see attached photo. Thanks again this is really bugging me

Text colors.webp
 
You need to fix one small fault in the node_list.css which is updated in 1.1.1. Because node_list.css is customised for Flexile, here is the full dark node_list.css with the corrected mistake.

Upgrade to 1.1.1, revert node_list.css and then paste this over the entire thing in your dark flexile:

HTML: 
.nodeList { zoom: 1; }
.nodeList .node {
    zoom: 1;
    vertical-align: bottom;
}
 
.nodeList .node.level_1
{
    margin-bottom: 20px;
}
 
.nodeList .node.level_1:last-child
{
    margin-bottom: 0;
}
 
.nodeList .node.groupNoChildren + .node.groupNoChildren
{
    margin-top: -20px;
}
 
.node .nodeInfo
{
    overflow: hidden; zoom: 1;
    position: relative;
}
 
    .node .nodeInfo.primaryContent,
    .node .nodeInfo.secondaryContent
    {
        padding: 0;
    }
 
.node .nodeIcon
{
    @property "nodeIcon";
    margin: 10px 0 10px 4px;
    float: left;
    width: 44px;
    height: 34px;
    @property "/nodeIcon";
}
 
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
        background: @primaryLightish url('@imagePath/xenforo/node-sprite.png') no-repeat 0 0;
        @property "/nodeIconForum";
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        @property "nodeIconForumUnread";
        background: @primaryMedium url('@imagePath/xenforo/node-sprite.png') no-repeat -44px 0;
        @property "/nodeIconForumUnread";
    }
 
    .node .pageNodeInfo .nodeIcon
    {
        @property "nodeIconPage";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -88px 0;
        @property "/nodeIconPage";
    }
 
    .node .linkNodeInfo .nodeIcon
    {
        @property "nodeIconLink";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -132px 0;
        @property "/nodeIconLink";
    }
 
.node .nodeText
{
    @property "nodeText";
    margin: 10px 270px 10px 56px;
    @property "/nodeText";
}
 
    .node .nodeTitle
    {
        @property "nodeTitle";
        font-size: 12pt;
        @property "/nodeTitle";
    }
 
        .node .unread .nodeTitle
        {
            @property "nodeTitleUnread";
            font-weight: bold;
            @property "/nodeTitleUnread";
        }
 
    .node .nodeDescription
    {
        @property "nodeDescription";
        font-size: 11px;
        @property "/nodeDescription";
    }
 
    .hasJs .node .nodeDescriptionTooltip
    {
        /* will be shown as a tooltip */
        display: none;
    }
 
    .Touch .node .nodeDescriptionTooltip
    {
        /* touch browsers don't see description tooltips */
        display: block;
    }
 
    .node .nodeStats
    {
        @property "nodeStats";
        font-size: 11px;
        margin-top: 2px;
        @property "/nodeStats";
    }
 
.node .nodeLastPost
{
    @property "secondaryContent";
    background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 10px;
    border-bottom: 1px solid @primaryLighterStill;
    @property "/secondaryContent";
 
    @property "nodeLastPost";
    font-size: 11px;
    padding: 3px 10px;
    margin: 10px;
    border: 1px solid @primaryLighterStill;
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 14px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 210px;
    height: 28px;
    @property "/nodeLastPost";
}
 
    .node .nodeLastPost .lastThreadMeta
    {
        display: block;
    }
 
    .node .nodeLastPost .noMessages
    {
        line-height: 28px;
    }
 
.node .nodeControls
{
    position: absolute;
    top: 0;
    right: {xen:calc '@nodeLastPost.border-left-width + @nodeLastPost.padding-left + @nodeLastPost.width + @nodeLastPost.padding-right + @nodeLastPost.border-right-width + @nodeLastPost.margin-right'}px;
    margin: 20px 0;
}
 
    .node .tinyIcon
    {
        @property "nodeTinyIcon";
        background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
        margin: 1px 4px;
        display: block;
        white-space: nowrap;
        text-indent: 9999px;
        overflow: hidden;
        opacity: 0.25;
        width: 14px;
        height: 14px;
        @property "/nodeTinyIcon";
    }
 
    .node .nodeInfo:hover .tinyIcon[href],
    .Touch .node .tinyIcon
    {
        @property "nodeTinyIconHover";
        opacity: 1;
        @property "/nodeTinyIconHover";
    }
 
        /*.node .feedIcon
        {
            background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
        }*/
 
/* description tooltip */
 
.nodeDescriptionTip
{
    @property "nodeDescriptionTip";
    padding: 4px 10px;
    margin-top: -22px;
    line-height: 1.5;
    width: 350px;
    height: auto;
    @property "/nodeDescriptionTip";
}
 
    .nodeDescriptionTip .arrow
    {
        @property "nodeDescriptionTipArrow";
        border: 6px solid transparent;
        border-right-color: @tooltip.background-color;
        border-left: 1px none black;
        top: 6px;
        left: -6px;
        bottom: auto;
        @property "/nodeDescriptionTipArrow";
    }
 
/* main area - used for L2 categories and most other nodes */
 
.nodeList .categoryForumNodeInfo,
.nodeList .forumNodeInfo,
.nodeList .pageNodeInfo,
.nodeList .linkNodeInfo
{
    @property "primaryContent";
    background-color: @contentBackground;
    padding: 10px;
    border-bottom: 1px solid @primaryLighterStill;
    @property "/primaryContent";
 
    padding: 0;
}
 
/* category strip - used for L1 categories and group headers */
 
.nodeList .categoryStrip
{
    @property "subHeading";
    font-size: 11px;
    color: white;
    background: @secondaryLighter url('@imagePath/xenforo/gradients/category-bar-gradient.png') repeat-x top;
    padding: 5px 10px;
    margin: 3px auto 0;
    border: 1px solid @secondaryLight;
    @property "/subHeading";
 
    @property "categoryStrip";
    padding: 6px 10px;
    margin: 0 0 5px;
    border-bottom-color: @subHeading.border-bottom-color;
    border-radius: 5px;
    min-height: 6px;
    @property "/categoryStrip";
}
 
    .nodeList .categoryStrip .nodeTitle
    {
        @property "categoryStripTitle";
        font-weight: bold;
        font-size: 13px;
        color: white;
        text-shadow: 0 1px 0 @primaryLightest;
        @property "/categoryStripTitle";
    }
 
        .nodeList .categoryStrip .nodeTitle a
        {
            color: @categoryStripTitle.color;
        }
 
    .nodeList .categoryStrip .nodeDescription
    {
        @property "categoryStripDescription";
        font-size: 10px;
        color: @faintTextColor;
        @property "/categoryStripDescription";
    }
 
        .nodeList .categoryStrip .nodeDescription a
        {
            color: @categoryStripDescription.color;
        }
 
.nodeList .node.groupNoChildren + .node.groupNoChildren .categoryStrip
{
    display: none;
}
 
/* node stats area */
 
.nodeStats
{
    overflow: hidden; zoom: 1;
}
 
.nodeStats dl,
.subForumsPopup
{
    float: left;
    display: block;
    margin-right: 3px;
}
 
/*.nodeStats dl,
.subForumsPopup .PopupControl
{
    padding-top: 2px;
}*/
 
.subForumsPopup a.PopupControl
{
    padding-left: 5px;
    padding-right: 5px;
}
 
.subForumsPopup .dt
{
    color: @mutedTextColor;
}
 
.subForumsPopup .PopupOpen
{
    color: @primaryDark !important;
}
 
.subForumsPopup .PopupOpen .dt
{
    color: @primaryDark;
}
 
.subForumsMenu .node .node /* for depths 2+ */
{
    padding-left: 10px;
}
 
    .subForumsMenu .node .nodeTitle
    {
        font-size: 11px;
    }
 
/** new discussion button below nodelist **/
 
.nodeListNewDiscussionButton
{
    margin-top: 10px;
    text-align: right;
}
 
Anthony Parsons said:
You need to fix one small fault in the node_list.css which is updated in 1.1.1. Because node_list.css is customised for Flexile, here is the full dark node_list.css with the corrected mistake.
Click to expand...

Hmm, I'm still getting the following listed in 'Outdated Templates':

Flexile Dark
form.css Custom Version: 1.1.0, Master Version: 1.1.1
 
It's a different template, form.css is changed for flexile dark, I think node_list.css is just changed for the original flexile theme. I did a compare, and it appears these are the main changes.

The things I did see is that flexile dark form.css has a missing comma
Code: 
.xenForm .ctrlUnit.fullWidth > dd > input,
.xenForm .ctrlUnit.submitUnit > dd > input,
.xenForm .ctrlUnit.fullWidth > dd > select,
.xenForm .ctrlUnit.submitUnit > dd > select,
.xenForm .ctrlUnit.fullWidth > dd > textarea,
.xenForm .ctrlUnit.submitUnit > dd > textarea,
.xenForm .ctrlUnit.fullWidth > dd > ul
.xenForm .ctrlUnit.submitUnit > dd > ul
{
margin-top: 0;
}

xenforo 1.1.1
Code: 
.xenForm .ctrlUnit.fullWidth > dd > input,
.xenForm .ctrlUnit.submitUnit > dd > input,
.xenForm .ctrlUnit.fullWidth > dd > select,
.xenForm .ctrlUnit.submitUnit > dd > select,
.xenForm .ctrlUnit.fullWidth > dd > textarea,
.xenForm .ctrlUnit.submitUnit > dd > textarea,
.xenForm .ctrlUnit.fullWidth > dd > ul,
.xenForm .ctrlUnit.submitUnit > dd > ul
{
margin-top: 0;
}

The following change might be the styling that Kier mentioned in the release note for form.css regarding line height.

flexile dark
Code: 
.xenForm .ctrlUnit.submitUnit dd
{
/*url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;*/
/*background: @primaryLightest;
 
border: 1px solid @primaryLighterStill;
border-bottom-color: @primaryLighter;
border-top: none;
padding-left: 10px;
 
width: {xen:calc '@formWidth - @ctrlUnitLabelWidth - @ctrlUnitEdgeSpacer - 10 - 2'}px;
 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;*/
 
padding-top: 5px;
padding-bottom: 5px;
}

Xenforo 1.1.1
Code: 
.xenForm .ctrlUnit.submitUnit dd
{
line-height: 31px;
padding-top: 0;
}

To get the flexile dark "node_list.css" template up to date, remove the extraneous semi colon in this code:
Code: 
@property "/secondaryContent";;
 
Status
Not open for further replies.

Similar threads

Ozzy47
[OzzModz] User Message Styles [Paid]
Replies
1
Views
229
Ozzy47
Ozzy47
CedricV
PalworldForums.net - Your Ultimate Palworld Community!
Replies
7
Views
947
Vercingetorix
Vercingetorix
Veer
[XenCustomize] Limit Resource Downloads [Paid]
2
Replies
35
Views
2K
Veer
Veer
Osman
Shadow [Paid]
Replies
7
Views
962
Osman
Osman
hstammlerj
Dark / Light Mode Automatic Toggle Switch / jsdmat
Replies
13
Views
2K
TimWilson
TimWilson
Top Bottom