PDA

Zobacz pełną wersję : templatka trentco obraz w tle problem.


Colored
03-12-2010, 19:13
Witam.
Mam problem z umieszczeniem obrazka w tle templatki trentco (http://joomla15.cmslounge.com/?template=tem_trentco).
Chcialbym aby obraz dopasowywal sie do wielkosci przegladarki.
Znalazlem w sieci przepis css-tricks (http://css-tricks.com/perfect-full-page-background-image/) dokladnie chodzi mi o zaimplementowanie css-only technique #2.

moj zmodyfikowany index.php wyglada tak

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/common.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/overIE.js"></script>
<style type="text/css" media="all">
<?php if ($this->params->get('authorName')=='no') { ?> .author {display:none} <?php } ?>
<?php if ($this->params->get('dateCreated')=='no') { ?> .createdate {display:none} <?php } ?>
<?php if ($this->params->get('dateModified')=='no') { ?> .modifydate {display:none} <?php } ?>
<?php if ($this->params->get('Buttons')=='no') { ?> .buttons {display:none} <?php } ?>
</style>
</head>

<body id="body">
<div id="wrapper">
<div id="header">
<div id="logo">
<a href="<?php echo $this->baseurl ?>" title="Home">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.jpg" width="200" height="90" alt="logo" />
</a>
</div>
<div id="menu"><jdoc:include type="modules" name="mainmenu" /></div>
</div><!-- end header div -->

<div id="wrapper_content">
<?php if(JRequest::getVar('view') == 'frontpage') {?>
<div id="home_img">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<div id="home_module">
<jdoc:include type="modules" name="center_header" style="xhtml" />
</div>

<?php } else { ?>
<div id="in_img">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/in_img.jpg" width="518" height="115" alt="logo" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="content">
<div id="content-padding">
<div class="module-padding">
<jdoc:include type="modules" name="abovemain" style="xhtml" />
</div>
<jdoc:include type="component" style="xhtml" />
<div class="module-padding">
<jdoc:include type="modules" name="belowmain" style="xhtml" />
</div>
</div>
</div>
<?php } ?>

<div class="clear"></div>
</div><!-- end wrapper_content div -->
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div class="clear"></div>

<div id="footer">
<div id="footermenu">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
</div><!-- end wrapper div -->
<div class="space"></div>
</body>
</html>Prosze o podpowiedz jak lub gdzie uzyc kodu z techniki nr 2.
Probowalem juz wszystkiego i za kazdym razem porazka.
Ps. oczywiscie jestem swiadomy ze div umieszczam w index.php (tylko w ktorym miejscu?)

<div id="bg">
<img src="images/bg.jpg" alt="">
</div>reszta w pliku css

#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

Z gory dziekuje i pozdrawiam.
KYCu
03-12-2010, 19:24
Witaj :)

Płatny szablon? chyba tak. Zdaje mi się, że support ze strony twórców istnieje, więc proszę zgłaszać problem do nich. :)

Prawdopodobnie "gryzą się" jakieś skrypty, a po drugie, strona demo techniki#2 w nowej operze nie rozciąga tła...
http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

P.S
Kolega jest zarejestrowany na forum od 2006 roku i jeszcze nie wie jak się to wszystko kręci? ;)
Colored
03-12-2010, 19:43
Witaj :)

Płatny szablon? chyba tak. Zdaje mi się, że support ze strony twórców istnieje, więc proszę zgłaszać problem do nich. :)

Prawdopodobnie "gryzą się" jakieś skrypty, a po drugie, strona demo techniki#2 w nowej operze nie rozciąga tła...
http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

P.S
Kolega jest zarejestrowany na forum od 2006 roku i jeszcze nie wie jak się to wszystko kręci? ;)

Szablon jest darmowy templatka (http://www.cmslounge.com/free-joomla-templates.html).
Prawdopodobnie masz racje z tym skryptem wiec ktora technikie proponujesz ?
Mimo ze jestem czlonkiem tego forum od 2006 roku to nadal nie wiem jak rozwiazc problem.

Ps. Dzieki kolego za cenna pomoc :P
KYCu
04-12-2010, 01:16
Tak się składa, że ostatnio stosowałem podobną metodę na dostosowanie tła do okna tyle, że w jQuery i działa.

http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/
Colored
04-12-2010, 13:40
Dzieki za odp.
Wiec zrobilem tak

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/common.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/overIE.js"></script>

<script type="text/javascript">
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);

bgImg.addClass('fullBg');

function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();

var winwidth = $(window).width();
var winheight = $(window).height();

var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;

var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;

if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
};
})(jQuery)

jQuery(function($) {
$("#background").fullBg();
});
</script>

<style type="text/css">
.fullBg {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
</style>

<style type="text/css" media="all">
<?php if ($this->params->get('authorName')=='no') { ?> .author {display:none} <?php } ?>
<?php if ($this->params->get('dateCreated')=='no') { ?> .createdate {display:none} <?php } ?>
<?php if ($this->params->get('dateModified')=='no') { ?> .modifydate {display:none} <?php } ?>
<?php if ($this->params->get('Buttons')=='no') { ?> .buttons {display:none} <?php } ?>


</style>



</head>

<body id="body">
<img src="images/bg.jpg" alt="" id="background" />

<div id="wrapper">
<div id="header">
<div id="logo">
<a href="<?php echo $this->baseurl ?>" title="Home">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.jpg" width="200" height="90" alt="logo" />
</a>
</div>
<div id="menu"><jdoc:include type="modules" name="mainmenu" /></div>
</div><!-- end header div -->

<div id="wrapper_content">
<?php if(JRequest::getVar('view') == 'frontpage') {?>
<div id="home_img">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<div id="home_module">
<jdoc:include type="modules" name="center_header" style="xhtml" />
</div>

<?php } else { ?>
<div id="in_img">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/in_img.jpg" width="518" height="115" alt="logo" />
</div>
<div id="left">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="content">
<div id="content-padding">
<div class="module-padding">
<jdoc:include type="modules" name="abovemain" style="xhtml" />
</div>
<jdoc:include type="component" style="xhtml" />
<div class="module-padding">
<jdoc:include type="modules" name="belowmain" style="xhtml" />
</div>
</div>
</div>
<?php } ?>

<div class="clear"></div>
</div><!-- end wrapper_content div -->
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div class="clear"></div>

<div id="footer">
<div id="footermenu">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
</div><!-- end wrapper div -->
<div class="space"></div>

</body>


</html>
Niestety cos nie dziala. Co zrobilem zle ?
larry_krk
04-12-2010, 14:43
Nie widzę pliku jquery, ale może to kwestia niewyspania :) ale raczej nie, bo ctrl + f tez nie pokazuje.
Colored
04-12-2010, 15:09
Chodzi ci o ?
<script type="text/javascript"
src="http://www.google.com/jsapi (http://forum.joomla.pl/view-source:http://www.google.com/jsapi)"></script>

Czy moze o
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/jQuery.fullBg.js"></script>

Nie bardzo rozumiem :obojetny: Zrobilem analogicznie do zrodla strony demo (http://bavotasan.com/demos/fullbg/) tego pluginu.
I cos nie dziala.
larry_krk
04-12-2010, 15:18
chodzi o bibliotekę jquery.
na stronie demo masz
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.1).
google.load("jquery", "1.4.1");
</script>

możesz to zrobić też tak : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

albo pobrać plik >> stąd << (http://docs.jquery.com/Downloading_jQuery#Download_jQuery) i umieścić to u siebie na serwerze.
Colored
04-12-2010, 16:11
Bardzo dziekuje za odpowiedz dodalem jak napisales lecz nadal nie dzialalo.
Cos mnie tchnelo i odpalilem IE a tam wiedze czerwony X jak bym w zlym miejscu umiescil obrazek ??!!
Myslalem ze zrodlem obrazka jest katalog images w katalogu templatki niestety sie mylilem obrazek musi znajdowac sie w glownyn katalogu joomli.
Dlaczego skrypt "pobiera" obrazk z glownego katalogu ?
KYCu
04-12-2010, 16:21
bo masz taką ścieżkę podaną w zapisie.

<img src="images/bg.jpg" alt="" id="background" />

musisz dać pełną ścieżkę do obrazka czyli np www.twojastrona.cos/templates/twoja-templatka/images/tlo.jpg

dodam, że zapis php jaki stosuje się w Joomla nie zadziała, mam na myśli

templates/<?php echo $this->template ?>/images/tlo.jpg

lub

<?php echo $this->baseurl ?>templates/<?php echo $this->template ?>/images/tlo.jpg