时间戳

首页 > 解决方案 > TYPO3 felogin 插件没有 CSS

typo3 - TYPO3 felogin 插件没有 CSS

问题描述

无论我尝试什么，都无法使 Felogin 插件看起来像（引导）其他表单元素。

我还尝试使用“功能切换”并将 Felogin: extbase 设置为启用。

顺便说一句，永久登录功能也不起作用。

我是 Typo3 的新手！请帮忙。

这就是我对表单样式的看法：

在此处输入图像描述

这就是我要的：

在此处输入图像描述

标签： typo3typo3-extensionstypo3-10.x

解决方案

首先，您需要知道 pibase 和 extbase/fluid 的模板都位于EXT:felogin/Resources/Private/Templates/. 文件FrontendLogin.html仅用于 pibase，包含所有视图。对于 extabse/fluid，你有不同的文件用于不同的视图，登录表单在哪里EXT:felogin/Resources/Private/Templates/Login/Login.html等等。

复制Login/Login.html到您的自定义站点包。例如typo3conf/ext/custom_sitepackage/Resources/Private/Templates/Login/Login.html。然后你应该通过 TypoScript 配置它

plugin.tx_felogin_login {
    view {
        templateRootPaths.10 = EXT:custom_sitepackage/Resources/Private/Templates/Felogin
    }
}

调整您Login/Login.html的要求，适用于 TwitterBootstrap 4

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:flashMessages />
<f:if condition="{cookieWarning}">
    <f:render partial="CookieWarning" />
</f:if>
<f:switch expression="{messageKey}">
    <f:case value="welcome"><f:variable name="alertKey" value="info" /></f:case>
    <f:case value="error"><f:variable name="alertKey" value="danger" /></f:case>
    <f:defaultCase><f:variable name="alertKey" value="info" /></f:defaultCase>
</f:switch>
<f:if condition="{messageKey}">
    <div class="alert alert-{alertKey}" role="alert">
        <h3>
            <f:render partial="RenderLabelOrMessage" arguments="{key: '{messageKey}_header'}" />
        </h3>
        <p>
            <f:render partial="RenderLabelOrMessage" arguments="{key: '{messageKey}_message'}" />
        </p>
    </div>
</f:if>
<f:if condition="{onSubmit}">
    <f:then>
        <f:form target="_top" fieldNamePrefix="" action="login" onsubmit="{onSubmit}">
            <f:render section="content" arguments="{_all}" />
        </f:form>
    </f:then>
    <f:else>
        <f:form target="_top" fieldNamePrefix="" action="login">
            <f:render section="content" arguments="{_all}" />
        </f:form>
    </f:else>
</f:if>

<f:if condition="{settings.showForgotPassword}">
    <f:link.action action="recovery" controller="PasswordRecovery">
        <f:render partial="RenderLabelOrMessage" arguments="{key: 'forgot_header'}" />
    </f:link.action>
</f:if>

<f:section name="content">
    <fieldset>
        <legend>
            <f:translate key="login" />
        </legend>
        <div class="form-group row">
            <label class="col-12 col-sm-3 col-md-2 col-form-label">
                <f:translate key="username" />
            </label>
            <div class="col-12 col-sm-9 col-md-10">
                <f:form.textfield name="user" class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-12 col-sm-3 col-md-2 col-form-label">
                <f:translate key="password" />
            </label>
            <div class="col-12 col-sm-9 col-md-10">
                <f:form.password name="pass" data="{rsa-encryption: ''}" class="form-control" />
            </div>
        </div>
        <f:if condition="{permaloginStatus} > -1">
            <div class="form-group row">
                <div class="col-12 col-sm-3 col-md-2 col-form-label"></div>
                <div class="col-12 col-sm-9 col-md-10">
                    <div class="custom-control custom-checkbox">
                        <f:if condition="{permaloginStatus} == 1">
                            <f:then>
                                <f:form.hidden name="permalogin" value="0" additionalAttributes="{disabled: 'disabled'}" />
                                <f:form.checkbox name="permalogin" id="permalogin" value="1" checked="checked" class="custom-control-input" />
                            </f:then>
                            <f:else>
                                <f:form.hidden name="permalogin" value="0" />
                                <f:form.checkbox name="permalogin" id="permalogin" value="1" class="custom-control-input" />
                            </f:else>
                        </f:if>
                        <label for="permalogin" class="custom-control-label">
                            <f:translate id="permalogin" />
                        </label>
                    </div>
                </div>
            </div>
        </f:if>
        <div class="row">
            <div class="col-12 col-sm-9 col-md-10 ml-auto">
                <f:form.submit value="{f:translate(key: 'login')}" name="submit" class="btn btn-primary" />
            </div>
        </div>
        <div class="felogin-hidden">
            <f:form.hidden name="logintype" value="login" />
            <f:form.hidden name="pid" value="{storagePid}" />
            <f:if condition="{redirectURL}!=''">
                <f:form.hidden name="redirect_url" value="{redirectURL}" />
            </f:if>
            <f:if condition="{referer}!=''">
                <f:form.hidden name="referer" value="{referer}" />
            </f:if>
            <f:if condition="{redirectReferrer}!=''">
                <f:form.hidden name="redirectReferrer" value="off" />
            </f:if>
            <f:if condition="{noRedirect}!=''">
                <f:form.hidden name="noredirect" value="1" />
            </f:if>
            {extraHidden}
        </div>
    </fieldset>
</f:section>

</html>

推荐阅读