Problem with a site when zooming in

[Cris74]

Hello and I am so glad for joining this community! I am not sure if this is the right place to post my question.

I work on a website, using CMSimple 5.8 and flex3cols2020_02 and I want to insert a slider with some pictures in the header, through MultiMediaSlider.

I got an issue... when zooming in to more than 80% on my PC, only the menu stays up, and the header and content go down below it.

If zooming out, it doesn't go back to the original layout.

This does not occur if instead of the slider I just insert a picture. The header stays well positioned at the top, no matter how large I zoom in.

Is there a solution so that when the slider is in the header and zooming in more and more, it stays at the top of the page? Any help would be appreciated.

[Gert]

Hello,

welcome to CMSimple

If zooming out, it doesn't go back to the original layout.

Only after page reload it goes back to the original layout.

MultiMediaSlider is not the best choice to switch images in header. The slider script "Fotorama" is not under developement anymore, and it did need jQuery to work.

Try ImageChangers, Demo:

https://www.ge-webdesign.de/demotpl/?Pl ... _im_Header

ImageChangers does not need jQuery or such things, and it is easier to handle in the backend.

Download: https://www.ge-webdesign.de/cmsimpleplu ... geChangers

Gert

[Cris74]

Hello Gert,

Thank you very much! It works flawless with ImageChangers, it keeps the original layout, both when zooming in and out.

I would have two small additional questions, if possible. How can I write the site name over this slider as background ? Like in the demo page https://www.ge-webdesign.de/demotpl/?Pl ... _im_Header.

And I wonder if there is any possibility to add in the site name field some new lines.

In the CMS Configuration/Title, the command <br>, after the site name does not creates a new line.

I could not find a better solution, but to create a separate <div> with two <p>'s for these two lines.

Regards,
Cris

[Gert]

In the CMS Configuration/Title, the command <br>, after the site name does not creates a new line.

A template is a template and nothing more - nobody forces you to use functions like sitename() in the header. You can write your output directly in the template.htm:

Code: Select all

<!-- sitename -->
<?php 
if(!$edit && !isset($_REQUEST['login']) && !isset($_REQUEST['logout']))
{
	echo '<h2 class="tplge_sitename">CMSimple Tests & Demos<br>... and something more</h2>';
}
?>

CSS for the class tplge_sitename, added " z-index: 2;" at the end of the line:

Code: Select all

.tplge_sitename {position: absolute; top: 0; max-width: 100%; background: transparent; font-family: SpecialElite, monospace; font-size: 56px; line-height: 64px; font-weight: 400; line-height: 1em; color: #fff; padding: 20px 20px 0 20px; font-variant: small-caps; opacity: 0.9; z-index: 2;}

The CSS tricks are position:absolute and z-index (increment until it works). You can surround the whole output with a div, for example:

Code: Select all

<div class="header_text">
...
</div>

... and style the class "header_text" with position: and z-index:, have fun and be creative

Gert

[Cris74]

Thank you so very much, Gert! It is now clear how to change the header section according to the preferences.
Cris