Flexile

Flexile 1.1.5.1

No permission to download
Overview Updates (4) Reviews (19) History Discussion
Status
Not open for further replies.
Erik said:
The amount of changes between beta 2 and beta 3 have validated my decision to hold off on upgrading the theme for now. I'll try to release an update when 1.1 hits the first release candidate, but until then with all my themes it's simply too much work to make it worthwhile. :)
Click to expand...
Thanks for the comment (y)
 
Blueprint4Love said:
Does anyone know what the dimensions of the header need to be for this style? 975 x 250 maybe? I'm in particular liking the header width and size of Jaxel's http://8wayrun.com.
Click to expand...

You can choose the size of the header yourself. Choose a width that suits your site and then adjust the height of the header from...

ACP --> Style Properties --> Header and Navigation --> Height of Header Logo

Just add the header to the Styles/Flexile/Xenforo folder and then add the location to...

ACP --> Style Properties --> Header and Navigation --> Header Logo Image Path

...the path to your image should be...

@imagePath/xenforo/your_header.png

I found you can adjust the height of the header from Style Properties till it fits your site perfectly.
 
Erik said:
The amount of changes between beta 2 and beta 3 have validated my decision to hold off on upgrading the theme for now. I'll try to release an update when 1.1 hits the first release candidate, but until then with all my themes it's simply too much work to make it worthwhile. :)
Click to expand...

makes sense to me
 
Does anyone know how to add a white background behind the forum blocks? I don't want to change the actual background to white, I want to keep it what I have right now (d9d9d9) but have a white like "border" around it. Here is an example of what I want...

screenshot20111028at322.png
 
eod said:
I copied the entire node_list.css from the default style and pasted it into the node_list.css for the flexile styles and it fixed the issue.

Thanks
Click to expand...
Lone Wolf said:
Thank you, this works!!
Click to expand...
i did this, and it got rid of the coloured squares, but left nothing in their place - so there is nothing at all now where the node indicators should be :( ah well, i'll just wait for the official 1.1 i guess..
i've got a web designer friend who is going to redesign my site for me - i figured it would be best to wait for 1.1 final to be released before he starts, in case anything major changes between now & then, but i've been putting him off for too long now.. hopefully the changes he makes will survive the transition to the final version once it's released!
 
sforum said:
i did this, and it got rid of the coloured squares, but left nothing in their place - so there is nothing at all now where the node indicators should be :( ah well, i'll just wait for the official 1.1 i guess..
i've got a web designer friend who is going to redesign my site for me - i figured it would be best to wait for 1.1 final to be released before he starts, in case anything major changes between now & then, but i've been putting him off for too long now.. hopefully the changes he makes will survive the transition to the final version once it's released!
Click to expand...

Did you put the node icon in the relevant folder?
 
eod said:
I mirrored everything for both the node icon and forum node list and I still see those blue squares :(
the default image paths for flexile in the settings is styles/flexile
For the flexile style, the node icon forum and node icon unread image path is set as: @imagePath/xenforo/node-sprite.png
For the default xenforo style, the node icon forum paths are the same
@imagePath/xenforo/node-sprite.png
Click to expand...

This is the code that allows you to keep everything looking the same while also using the Flexile icons. If you copy and paste the code from the default xF skin, the font changes, and so does the node icons. Hope it helps.

Code: 
.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";
    background: transparent none no-repeat center center;
    margin: 10px 0 10px 4px;
    float: left;
    width: 44px;
    height: 34px;
    @property "/nodeIcon"; 
}
 
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        background-image: url('@imagePath/xenforo/widgets/forum-read.png');
        background-color: @primaryLightish;
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        background-image: url('@imagePath/xenforo/widgets/forum-unread.png');
        background-color: @primaryMedium;
    }
 
    .node .pageNodeInfo .nodeIcon
    {
        background-image: url(@pageIconPath);
    }
 
    .node .linkNodeInfo .nodeIcon
    {
        background-image: url(@linkIconPath);
    }
 
.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";
    }
 
    .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-image: url(@feedIconPath);
        }
 
/* 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;
}

More specifically, this area -

Code: 
.node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        background-image: url('@imagePath/xenforo/widgets/forum-read.png');
        background-color: @primaryLightish;
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        background-image: url('@imagePath/xenforo/widgets/forum-unread.png');
        background-color: @primaryMedium;
    }
 
Lone Wolf said:
Did you put the node icon in the relevant folder?
Click to expand...
I copied the entire contents of the nod_list.css from the default template set over to the flexile node_list.css and that fixed it. That was the only thing that fixed it. I moved the images over as well.
 
Lone Wolf said:
Did you put the node icon in the relevant folder?
Click to expand...
no; i don't even know what that is, or where the relevant folder is!

one of the reasons i bought xenforo is that i want to move my forum away from the current punbb platform, which i have hacked to pieces trying to add functionality/correct little idiosyncrasies, to the point where i can't update/patch it any further as it is so far removed from the original punbb source.. as a result, i'm reluctant to muck about with code & unofficial mod's with xenforo - the reason i laid down my money is that i want a platform the i can just install & modify (via official plug-ins/mod's) without having to drill-down to the code, and therefore apply updates without worrying about it breaking stuff i've "hacked" in..

remember that many customers just want a "plug & play" forum platform - we're not all developers/coders! ;)

(oh, and that was just a general thinking-out-loud post; i realise it's not relevant to the flexile developer(s) or those graciously offering their help in this thread.. just hoping the xenforo developers notice & bear it in mind :) )
 
Ok for those like me who are willing to test all new features of 1.1.0 beta 5 and want to use flexible style as well ... (that's only a hack, waiting just like you for the official release ... only 2 things for time being, will uptade other stuf if i find anything) :

- Icons on forum main page are not displayed.

Put all images (included in zip file) in your style folder (/styles/flexile/xenforo).
Edit node_list.css in admin panel / appearance / template and replace the whole thing with :

Code: 
.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";
    background: transparent none no-repeat center center;
    margin: 10px 0 10px 4px;
    float: left;
    width: 44px;
    height: 34px;
    @property "/nodeIcon";  
}

    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -36px 0;
        @property "/nodeIconForum";
    }

    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        @property "nodeIconForumUnread";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -36px 0;
        @property "/nodeIconForumUnread";
    }

    .node .pageNodeInfo .nodeIcon
    {
        @property "nodeIconPage";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -72px 0;
        @property "/nodeIconPage";
    }

    .node .linkNodeInfo .nodeIcon
    {
        @property "nodeIconLink";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -108px 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";
    }

    .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: @secondaryDarker;
    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: @secondaryDarker;
        text-shadow: 0 1px 0 @primaryLightest;
        @property "/categoryStripTitle";
    }
    
        .nodeList .categoryStrip .nodeTitle a
        {
            color: @categoryStripTitle.color;
        }

    .nodeList .categoryStrip .nodeDescription
    {
        @property "categoryStripDescription";
        font-size: 10px;
        color: @secondaryDarker;
        @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 .dt
{
    color: @body.color;
}

.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;
}

- Thread Prefixes don't use the required css :
Edit thread_list in admin panel / appearance / template and add at the very first line :

Code: 
<xen:require css="thread_prefixes.css" />
 

Attachments

Pras said:
;)

notices don't work with flexible as well ... i fixed it, do you want the code ?
Click to expand...
please!

i presume that all these "unofficial" mod's (i.e. these little code tweaks) will be fixed/corrected/overwritten with "official" code when erik releases flexile for xenforo 1.1 final?
 
- Notices to work with Flexible

Edit PAGE_CONTAINER in admin panel / appearance / template

1 - find

Code: 
        <div class="pageContent">
            <!-- main content area -->

Add after :

Code: 
<xen:hook name="page_container_content_top" />

2 - find

Code: 
         <xen:include template="ad_above_top_breadcrumb" />

add after

Code: 
            <xen:hook name="page_container_notices">
               <xen:include template="notices" />                        
            </xen:hook>

enjoyyyy
 
sforum said:
please!

i presume that all these "unofficial" mod's (i.e. these little code tweaks) will be fixed/corrected/overwritten with "official" code when erik releases flexile for xenforo 1.1 final?
Click to expand...

Yup, when official will release just install it ... on the "home" tab of admin control panel, u will notice that you have "outdated templates" -- theses modifications actually ... just revert them and forget them ;)
 
Status
Not open for further replies.

Similar threads

Digital Jedi
  • Question Question
XF 2.2 Flex Box Suggestions
Replies
0
Views
289
Digital Jedi
Digital Jedi
Dixie McCall
Lipstick (Free) Default Theme [Deleted]
Replies
1
Views
610
Dixie McCall
Dixie McCall
ShikiSuen
[ShikiSuen] More Flexible forumbit
Replies
5
Views
945
ShikiSuen
ShikiSuen
Alternadiv
Peculiar & Retro Web Design || Alternadiv
Replies
19
Views
2K
Alternadiv
Alternadiv
Sonnie
XF 2 Looking for trustworthy tech to upgrade forum and add-ons.
Replies
9
Views
3K
Alpha1
Alpha1
Top Bottom