Set size of box dynamically

Hi,

i’m new to pulse and wanted to use my existing page ‘transformed’ into a page with pulse cms.

Now i have a question:
How can i reach, that the main content fits into the light box. So, that there is automatically a space of 20px between the end of the text and the bottom of the light box?

Please help me

Thanks @eltoron - it would just be a short CSS addition - can you repost a page with the lightbox? I couldn’t find it on the link you provided…

Thanks

Hi @eltoron ,

Good Day :slight_smile:

I can see 2 solutions for your page:

  1. Using JQuery to dynamically change the ‘.box’ size for your page but the thing it is just a quick fix.
  2. We need to fix the html structure and css for your page.

Thanks and regards,

Justin

1 Like

Hi @eltoron,

You try something like this: DEMO http://pulsefusion.net/sample/eltoron/

<!doctype html>
Structure and CSS
<style type="text/css">

	body{
		margin:0;
		padding:0;
		background-color:#abae7d;
		font-family:Arial, Helvetica, Sans-serif;
	}
	
	h1{
		color:#666600;
		font-size:2.5em;
		line-height:2em;
		border-bottom: 1px dotted gray;
	}
	
	p{
	  color:#666600;
	  font-size:100%;
	  line-height:2em;
	  text-align:justify;
	}
	
	#sliderArea{
		height:330px;
		display:block;
		margin:20px 50px;
		border-radius:15px;
		background-color:#7e7f4f;
		border:12px solid #7e7f4f;
	}
	
	#contentArea{
		padding:50px;
		display:block;
		margin:20px 50px;
		position:relative;
		border-radius:15px;
		background-color:#dbdcbf;
		box-shadow:0px 10px 20px rgba(0,0,0,0.35);
	}
	
	
	#navArea{
		top:-180px;
		width:280px;
		padding:10px;
		display:block;
		position:absolute;
	}
	
	#logoArea{
		width:280px;
		height:180px;
		margin:30px 0;
		display:block;
		border-radius:15px;
		background-color:#a1a26d;
	}
	
	nav{
		width:280px;
		height:600px;
		display:block;
		border-radius:15px;
		background-color:#fff;
	}
	
	section{
		display:block;
		max-width:680px;
		margin-left:400px;
	}

	#footerArea{
		height:300px;
		padding:50px;
		display:block;
		background-color:#5A6351;
		margin:20px 50px 0px 50px;
		border-radius:15px 15px 0 0;
	}

	#gallery{
		margin:10px 0;
		display:block;
		text-align:center;
	}
	
	#gallery .box{
		margin:4px;
		width: 210px;
		height: 150px;
		display:inline-block;
		background-color:#7e7f4f;;
	}
	
	@media only screen and (max-width : 768px){
		
		#sliderArea{
			height:100px;
			display:block;
			margin:20px 50px;
			border-radius:15px;
			background-color:#7e7f4f;
			border:12px solid #7e7f4f;
		}
		
		#navArea{
			display:none;
		}
		
		#sliderArea,
		#contentArea,
		#footerArea{
			margin:20px 10px;
			padding:30px 10px;
		}
		
		#footerArea{
			margin-bottom:0;
		}
		
		section{
			margin:10px;
		}
	}

</style>
<div id="sliderArea">

</div>

<div id="contentArea">

	<div id="navArea">
    
    	<div id="logoArea">
        
        </div>
        
        <nav>
        
        </nav>
    
    </div>
    
<section>

    <h1>Was ist Lorem Ipsum?</h1>
    
    <p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</p>

</section>

<section>

    <h1>Was ist Lorem Ipsum?</h1>
    
    <p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</p>

</section>

<section>

	<h1>Gallery</h1>
    
    
    <div id="gallery">
    
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        

    </div>

</section>



</div>

<div id="footerArea">

</div>

Please let me know if you have comments or feedback:

Thanks and regards,

Justin

2 Likes

Wow, thanks for your really great and helpful answers!
Special thanks to @JRAYCV for pimp up my site. I’m going to completely code the site new, so that it is so flat, how Jraycv has it made.

2 Likes

So, now I have recoded the site like the example of @JRAYCV. Thanks again for the template.
Now i try to get pulse working :slight_smile:

I have realized, that the pager is not translated, when i maximize an image in the slideshow. There should stand “Bild 1 von 3”, but there stands “1 of 3”

1 Like

That’s because the magnific popup library used there is only available in English.

Grüße Jannis :wink:

Danke @instacks (Jannis)
I hope that will be published in the next time.

I don’t think so. If you want to have it in German, you would have to change the text I side the JavaScript file by yourself.

Ok thanks Jannis, now the next question:
If i use Pulse CMS, the Mobile Menu is not displayed when i minimize the browser window or take a smartphone.

If i use the same Website without Pulse, it is displayed.
Can you please help me?:wink:

Hi @eltoron

Try to implement the following: Sample Link http://pulsefusion.net//sample/eltoron/menu.html

try o adjust your browser to be width 768px or below it will change to mobile menu.

<!doctype html>

Menu Normal- Menu Mobile
<style type="text/css">

	body{
		font-family:Arial;
	}

	#navArea{
		width:240px;
		display:block;
	}
	
	#navArea ul{
		margin:0;
		padding:0;
		display:block;
	}
	
	#navArea li{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	#navArea li a{
		color:#fff;
		padding:10px;
		display:block;
		text-decoration:none;
		background-color:#333;
	}
	
	#navArea li a:hover{
		background-color:#222;
	}
	
	#menu{
		right:10px;
		color:#fff;
		width:40px;
		padding:10px;
		display:none;
		font-size:14px;
		position:absolute;
		text-align:center;
		background-color:#333;
	}

@media only screen and (max-width : 768px) {
	#menu{
		display:block;
	}
	
	#navArea{
		width:100%;
		display:none;
		padding-top:40px;
	}
	
}
	

</style>
<div id="menu">MENU</div>

<div id="navArea">

    <ul>
        <li>Test</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </ul>
    
</div>


<script type="text/javascript">

$(window).load(function(){
	
	"use strict";
	
	orientDetect();
	
})

$(window).resize(function(){

	"use strict";
	
	orientDetect();

});


function orientDetect(){

	"use strict";
	
	if ( $(window).width() <= 768 ){
	
		$('#navArea').hide();
		$('#navArea').addClass('mobile');	
	
	}else{
	
		$('#navArea').show();
		$('#navArea').removeClass('mobile');
			
	}

};


$(function(){

	$('#menu').click(function(){
	
		$('#navArea.mobile').slideToggle(300);
	
	});
	
	
	$('#navArea a').click(function(){
	
		$('#navArea.mobile').slideUp(300);
	
	});
	
	
	$('section').click(function(){
	
		$('#navArea.mobile').slideUp(300);
	
	});

});

</script>

Thanks and regards,

Justin

3 Likes

Thanks for helping! You are great!
My Problem is solved, i had forgotten to set the id=“menu” to the navbar ul tag :dizzy_face:

2 Likes

One last thing: i can't see any stats of my website

How can I fix that?

Hi @eltoron,

You need the below code for tacking:

<!-- Stats Tracking Code -->
<script src="<?php echo $path; ?>/<?php echo $admin; ?>/inc/tracker.php?uri=<?php echo $_SERVER['REQUEST_URI']; ?>&ref=<?php echo $_SERVER['HTTP_REFERER']; ?>"></script> 

Thanks and regards,

Justin

2 Likes

Wow, thanks a lot!
This is a very well support in this forum. I’m surprised.

2 Likes