Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Standard font für Custom Text in Navbar

  • BBSR-SR5
  • BBSR-SR5's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
3 weeks 4 days ago #259119 by BBSR-SR5
Bitte helfen Sie uns, Ihnen zu helfen und füllen Sie folgende Felder aus:
Ihre LimeSurvey-Version: Version 6.4.12
Eigener Server oder LimeSurvey-Cloud: LimeSurvey Cloud
Genutzte Designvorlage: Eigene auf Grundlage fruity_twentythree - Blueberry
==================
Hallo allerseits,

ich habe meine Designvorlage so angepasst, dass der Umfragename in der Navbar angezeigt wird:
 

Das habe ich im Nav_Bar.twig gemacht in dem ich den Code angepasst habe:
Code:
<div class="container-fluid col-xl-8">
            {% if( aSurveyInfo.options.brandlogo == "on") %}
                <div class="navbar-brand logo-container d-none d-md-block">
                    {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-fluid"}) }}
                </div>
            {% endif %}
            <div id="survey-title" class="surveytitle">{{oSurvey.localizedTitle}} </div>
            <div id="navbar-menu" class="dropdown ms-auto ls-no-js-hidden">
                {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                    aSurveyInfo.aNavigator.save.show == "Y" or
                    ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                    aSurveyInfo.options.showclearall == 'on') or
                    aSurveyInfo.aQuestionIndex.bShow == true or
                    aSurveyInfo.alanguageChanger.show == true) %}
                    <div id="navbar-toggler" class="navbar-toggler" data-bs-toggle="dropdown"
                        data-bs-auto-close="outside" aria-expanded="false">
                        <span class="ri-more-fill"></span>
                    </div>
                    <ul id="main-dropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-toggler">
                        {{ include('./subviews/navigation/language_changer_top_menu.twig') }}
                        {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                            aSurveyInfo.aNavigator.save.show == "Y" or
                            ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                            aSurveyInfo.options.showclearall == 'on') or
                            aSurveyInfo.aQuestionIndex.bShow == true) %}
                            <li class="dropdown-header text-uppercase">{{ gT("Survey options") }}</li>
                        {% endif %}
                        {{ include('./subviews/navigation/save_links.twig') }}
                        {{ include('./subviews/navigation/question_index_menu.twig') }}
                        {{ include('./subviews/navigation/clearall_links.twig') }}
                    </ul>
                {% endif %}
            </div>
            <ul id="back-content" class="d-none"></ul>
        </div>

Für die Positionierung habe ich im .css die class "surveytitle" erstellt:
Code:
.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Change font /
        font-family: Arial, sans-serif; /* Change to desired font family */
        /* Other styling /
        font-size: 24px; /* Adjust font size as needed /
        font-weight: bold; /* Adjust font weight as needed /
    }

Während ich darüber natürlich auch die Schrift einstellen kann, wäre es schön, wenn ich stattdessen die für den Survey eingestellte font und irgendwelche default Schriftgrößeneinstellungen übernehmen könnte.

Wie mache ich das?

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 weeks 4 days ago - 3 weeks 4 days ago #259125 by Joffm
Replied by Joffm on topic Standard font für Custom Text in Navbar
Vielleicht so:
Code:
<div class="d-none d-md-block survey-name large-heading surveytitle">
       {{oSurvey.localizedTitle}}
</div>



Und dies in die blueberry.css
Code:
.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }


 

Dann werden die Titel in der Einstellung von "large-heading in der "blueberry.css" dargestellt.
Du könntest ja noch "color" hinzufügen.

 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 weeks 4 days ago by Joffm.

Please Log in to join the conversation.

Moderators: Joffm

Lime-years ahead

Online-surveys for every purse and purpose