- Posts: 103
- Thank you received: 4
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Change a logo image depending on the screen size
- baltzis
- Topic Author
- Offline
- Premium Member
Less
More
7 months 3 days ago #250653
by baltzis
Change a logo image depending on the screen size was created by baltzis
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.2.8+230921
Own server or LimeSurvey hosting: own server
Survey theme/template: Any
==================
How can I make a different logo appear on smaller screens (e.g. mobile or tablet). For example the logo contains an image an some text, but in small screens only the image might appear. I guess this should be done using the custom .css, but I don't know what code I should add.
Thanks!
Your LimeSurvey version: 6.2.8+230921
Own server or LimeSurvey hosting: own server
Survey theme/template: Any
==================
How can I make a different logo appear on smaller screens (e.g. mobile or tablet). For example the logo contains an image an some text, but in small screens only the image might appear. I guess this should be done using the custom .css, but I don't know what code I should add.
Thanks!
Please Log in to join the conversation.
- tammo
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 967
- Thank you received: 220
7 months 2 days ago #250663
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Replied by tammo on topic Change a logo image depending on the screen size
Beginners guide to media queries:
developer.mozilla.org/en-US/docs/Learn/C...layout/Media_queries
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The following user(s) said Thank You: baltzis
Please Log in to join the conversation.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
7 months 1 day ago #250675
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Change a logo image depending on the screen size
The easiest way to insert the second image is to extend your theme and modify nav_bar.twig something like this:
You can see that the image wrappers have Bootstrap 5 classes to display depending on screen width.
- getbootstrap.com/docs/4.0/utilities/display/
Code:
{% set navClass = "navbar-light bg-light" %} {% if( aSurveyInfo.template == "bootswatch") %} {% set navClass = "navbar-default bg-primary" %} {% endif %} <!-- Bootstrap Navigation Bar --> <div id="survey-nav" class="navbar {{ navClass }} navbar-expand-md fixed-top border-bottom pt-0 pb-0"> <div class="container-fluid"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="small-screens-menus" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> {# Logo option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="navbar-brand logo-container d-block d-md-none"> <img class="logo img-fluid" src="pathTo/logo-small.png" alt="Some alt text"> </div> <div class="navbar-brand logo-container d-none d-md-block"> {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-fluid"}) }} </div> {% else %} <div class="navbar-brand"> {{ aSurveyInfo.name }} </div> {% endif %} <div id="navbar" class="collapse navbar-collapse navbar-nav-scroll pt-2"> <ul class="nav navbar-nav navbar-action-link navbar-right ms-auto"> {{ include('./subviews/navigation/save_links.twig') }} {{ include('./subviews/navigation/clearall_links.twig') }} {{ include('./subviews/navigation/question_index_menu.twig') }} {{ include('./subviews/navigation/language_changer_top_menu.twig') }} </ul> </div> </div> </div>
You can see that the image wrappers have Bootstrap 5 classes to display depending on screen width.
- getbootstrap.com/docs/4.0/utilities/display/
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Please Log in to join the conversation.
- baltzis
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 103
- Thank you received: 4
7 months 1 day ago #250684
by baltzis
Replied by baltzis on topic Change a logo image depending on the screen size
That's great! Thank you so much. It seems to work fine.
A final detail: it seems that a relative path (using "../files/etc.") is not accepted. The code works when I set the full path though.
I guess this is normal?
Thanks again.
A final detail: it seems that a relative path (using "../files/etc.") is not accepted. The code works when I set the full path though.
I guess this is normal?
Thanks again.
Please Log in to join the conversation.
- jorgesinval
- Offline
- Junior Member
Less
More
- Posts: 33
- Thank you received: 2
6 months 2 days ago #251490
by jorgesinval
Sinval
Replied by jorgesinval on topic Change a logo image depending on the screen size
Can you tell me which is the final path? I mean after my website address which should be the path?
Sinval
Please Log in to join the conversation.
- baltzis
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 103
- Thank you received: 4
6 months 2 days ago #251495
by baltzis
Replied by baltzis on topic Change a logo image depending on the screen size
Here it is:
https://Your_LimeSurvey_URL/upload/themes/survey/extends_Your_Theme/files/Your_Logo_Image.png
https://Your_LimeSurvey_URL/upload/themes/survey/extends_Your_Theme/files/Your_Logo_Image.png
The following user(s) said Thank You: jorgesinval
Please Log in to join the conversation.
- jorgesinval
- Offline
- Junior Member
Less
More
- Posts: 33
- Thank you received: 2
6 months 2 days ago #251496
by jorgesinval
Sinval
Replied by jorgesinval on topic Change a logo image depending on the screen size
Thank you so much. It worked with just adding "/upload/themes/survey/my_fancy_theme/files/logo.png"
Sinval
Please Log in to join the conversation.
- baltzis
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 103
- Thank you received: 4
6 months 2 days ago #251498
by baltzis
Replied by baltzis on topic Change a logo image depending on the screen size
Nice tip. Thanks!
Please Log in to join the conversation.
- jorgesinval
- Offline
- Junior Member
Less
More
- Posts: 33
- Thank you received: 2
6 months 2 days ago #251508
by jorgesinval
Sinval
Replied by jorgesinval on topic Change a logo image depending on the screen size
I am the one who is thankful to you and to @tpartner.
Sinval
Please Log in to join the conversation.