Flexile 1.1.5.1

[Saeed]

I'm having a bit of a pickle with this awesome theme guys. Perhaps some one of you would be kind enough to help me out.

I have the Flexile theme installed on my test site, installed without any parent, as you can see.



Now, some of the most easiest customizations don't seem to be taking place. e.g. I would like to change the colour of the selected tab in the navigation section.

That would be the colour marked in red below:



However, when I try to change this to any other colour by changing the background colour of the selected tab, it simply does not change. I have the right style selected, I save the changes and refresh the page, but without any luck. I believe it should be changed here, by changing the background colour:




And I have the feeling that I'm being perhaps a big silly who is overlooking something but I can't figure it out.

Am I doing something wrong? And could you please set this poor soul on the right path?

 

[Ccriminal]

How do I make the background of

yavuz help please

 

[yavuz]

View attachment 22327

How do I make the background of

yavuz help please

.navTabs .navTab.PopupClosed .navLink
{
    -webkit-box-shadow: black 0px 0px 5px;
    color: @lightTextColor;
    background: rgba(0, 0, 0, 0.5) url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x 50% 0%;
    height: 25px;
    line-height: 25px;
    margin: 5px;
    padding: 0px 10px;
}

 

[Ccriminal]

.navTabs .navTab.PopupClosed .navLink
{
    -webkit-box-shadow: black 0px 0px 5px;
    color: @lightTextColor;
    background: rgba(0, 0, 0, 0.5) url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x 50% 0%;
    height: 25px;
    line-height: 25px;
    margin: 5px;
    padding: 0px 10px;
}

was a very nice thank you .... Çok Teşekkür ederim Ellerine Sağlık

 

[Lone Wolf]

.navTabs .navTab.PopupClosed .navLink
{
    -webkit-box-shadow: black 0px 0px 5px;
    color: @lightTextColor;
    background: rgba(0, 0, 0, 0.5) url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x 50% 0%;
    height: 25px;
    line-height: 25px;
    margin: 5px;
    padding: 0px 10px;
}

Is there any way to make the buttons transparent/see thru?

 

[yavuz]

I would play with color: @lightTextColor; and maybe change the gradient, see how it goes.

 

[Erik]

Just posting to note that I will eventually get through this backlog of questions once I have the time to do so... sorry.

 

[Anthony Parsons]

For those that wanted the footer boxes, similar to the default one I did, except now for Flexile, the mod is at: http://xenforo.com/community/threads/flexile-footer-boxes.24726/

 

[SneakyDave]

Just FYI, the following templates are outdated between between Flexile 1.1.0 Update 1, and Xenforo 1.1.1:
node_list.css
form.css

 

[Anthony Parsons]

Flexile 1.1 doesn't change form.css by default, only node_list.css. I just installed a 1.1 and Flexile 1.1 by default on localhost to confirm.

Is it possible to know the changes made to node_list.css for manual updating?

 

[Erik]

Flexile 1.1 doesn't change form.css by default, only node_list.css. I just installed a 1.1 and Flexile 1.1 by default on localhost to confirm.

Is it possible to know the changes made to node_list.css for manual updating?

Compare the default node_list.css template in 1.1.0 and 1.1.1 in a file compare program. Then merge the changes into the Flexile template.

Will update as soon as I can.

 

[Anthony Parsons]

Ok, doing a merge comparison of node_list.css for 1.1.0 and 1.1.1, it was actually only an error in 1.1.0 that was changed in 1.1.1 template, being:

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

You can see the double ;; at the end of secondaryContent, being the error.

So in other words, Flexile will actually run perfectly on 1.1.1, however; the same error that was fixed in 1.1.1 node_list.css exists in 1.1.0 Flexile node_list.css.

Fix that error and Flexile is perfect for 1.1.1.

Here is the correct CSS for node_list.css to overwrite in your 1.1.1 upgrade for flexile light:

.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";
    /* need to change if customized node icons */
    }
 
    .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: @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;
}

 

[SneakyDave]

My apologies, the form.css must have been updated by myself or something else. Maybe it's flexile dark?

 

[Jaxel]

New 8WR exceptions for XF1.1...

<xen:if is="@8wayRunSupport">
 
/* FLEXILE > PORTAL > GENERAL SETTINGS */
    .EWRporta_Portal .mainContainer { margin-bottom: 0px; }
    .EWRporta_Portal .centerShift { margin-left: {xen:calc '@sidebar.width + 15'}px !important; }
    .EWRporta_Portal .section:first-child { margin: 0px auto 15px !important; }
 
/* FLEXILE > PORTAL > RECENT NEWS */
    #recentNews .recentNews.sectionMain
    {
        background-color: transparent;
        border: 0px;
        border-radius: 0px;
        box-shadow: none;
        -khtml-box-shadow: none;
        padding: 0px;
    }
    #recentNews .recentNews .sectionFooter
    {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        margin: 15px -15px -16px;
    }
    #recentNews .recentNews .subHeading,
    #recentThreads .sectionHeaders
    {
        border: 0px;
        {xen:property sidebarBlockHeading}
    }
    #recentNews .recentNews .subHeading a,
    #recentThreads .sectionHeaders a
    {
        {xen:property sidebarBlockHeading.font}
    }
 
/* FLEXILE > PORTAL > RECENT THREADS SETTINGS */
    #recentThreads .sectionHeaders
    {
        padding-right: 5px;
        margin: -10px -10px 0px;
    }
    #recentThreads .sectionHeaders a span { padding: 0px 10px; }
    #recentThreads .sectionHeaders .lastPost { width: 155px; }
 
/* FLEXILE > MEDIA > TAG CLOUD SETTINGS */
    .mediaCloud #keywordCloud { margin: -30px -15px -30px !important; }
    .mediaCloud #textCloud { margin: 40px 15px 30px !important; }
 
</xen:if>

 

[sforum]

New 8WR exceptions for XF1.1...

<xen:if is="@8wayRunSupport">
 
/* FLEXILE > PORTAL > GENERAL SETTINGS */
    .EWRporta_Portal .mainContainer { margin-bottom: 0px; }
    .EWRporta_Portal .centerShift { margin-left: {xen:calc '@sidebar.width + 15'}px !important; }
    .EWRporta_Portal .section:first-child { margin: 0px auto 15px !important; }
 
/* FLEXILE > PORTAL > RECENT NEWS */
    #recentNews .recentNews.sectionMain
    {
        background-color: transparent;
        border: 0px;
        border-radius: 0px;
        box-shadow: none;
        -khtml-box-shadow: none;
        padding: 0px;
    }
    #recentNews .recentNews .sectionFooter
    {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        margin: 15px -15px -16px;
    }
    #recentNews .recentNews .subHeading,
    #recentThreads .sectionHeaders
    {
        border: 0px;
        {xen:property sidebarBlockHeading}
    }
    #recentNews .recentNews .subHeading a,
    #recentThreads .sectionHeaders a
    {
        {xen:property sidebarBlockHeading.font}
    }
 
/* FLEXILE > PORTAL > RECENT THREADS SETTINGS */
    #recentThreads .sectionHeaders
    {
        padding-right: 5px;
        margin: -10px -10px 0px;
    }
    #recentThreads .sectionHeaders a span { padding: 0px 10px; }
    #recentThreads .sectionHeaders .lastPost { width: 155px; }
 
/* FLEXILE > MEDIA > TAG CLOUD SETTINGS */
    .mediaCloud #keywordCloud { margin: -30px -15px -30px !important; }
    .mediaCloud #textCloud { margin: 40px 15px 30px !important; }
 
</xen:if>

Is this something we (i.e. forum owners/XenForo customers) should do, or is this information meant for Erik, so that he can update Flexile & Flexile Dark?

If it's the former, could some kind soul point a luddite such as myself in the right direction as to where this code should go, please?

Thanks.

 

[Anthony Parsons]

If you're running the most recent, there are differences and should overwrite that portion of the flexile additions css template. I did a compare and there are differences... I am now running that updated version above with 1.1.1 and Flexile light.

 

[Pride1760]

I was messing around with the footer template and I clicked on "revert customizations" thinking it would delete all the changes I made and go back to the original flexile footer. However, now I have the default xenforo footer

Could someone post the default flexile footer template please?

Thanks!

 

[trilogy33]

Could someone post the default flexile footer template please?

<xen:edithint template="footer.css" />
 
<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
            <dl class="choosers">
                <xen:if is="{$canChangeStyle}">
                    <dt>{xen:phrase style}</dt>
                    <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                    <dt>{xen:phrase language}</dt>
                    <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                </xen:if>
            </dl>
            </xen:if>
 
            <ul class="legal">
                <li id="copyright">{xen:phrase xenforo_copyright}</li>
                <li id="copyrightErik"><span>Flexile theme by Erik Swan.</span></li>
            </ul>
           
            <ul class="footerLinks">
            <xen:hook name="footer_links">
                <xen:hook name="footer_links_legal">
                    <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                    <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
                </xen:hook>
                <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                </xen:if>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
 
            <span class="helper"></span>
        </div>
    </div>
</div>
 
<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:if is="{$debugMode}">
                <xen:if hascontent="true">
                    <dl class="pairsInline" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                    <xen:contentcheck>
                        <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                        <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                        <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                    </xen:contentcheck>
                    </dl>
                </xen:if>
            </xen:if>
 
            <span class="helper"></span>
        </div>
    </div> 
</div>
</xen:hook>

For future reference, you can extract this template code from the XML file betweem the <![CDATA[ and ]]></template> code.
Simply search the XML for the line that begins:

<template title="footer" addon_id="XenForo" version_id="1010070" version_string="1.1.0">

Hope this helps

 

[Pride1760]

I did get the code from the xml but the format was all messed up and I was having difficulty editing it.
thanks for the superfast response!

Another issue that I am facing is that the dropdown menu for navigation tabs appears only when I move my mouse over the tiny triangle. How can I make it so that the dropdown menu appears when I hover my mouse anywhere on the tab?

 

[Anthony Parsons]

Another issue that I am facing is that the dropdown menu for navigation tabs appears only when I move my mouse over the tiny triangle. How can I make it so that the dropdown menu appears when I hover my mouse anywhere on the tab?

That is default XF behaviour... not a fault.