Background je nach Jahreszeit ändern

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Background je nach Jahreszeit ändern

    Hallo php-Fachleute,

    ich würde mich freuen wenn mir jemand etwas helfen könnte.

    Ich habe eine Homepage, die ich mit einem Hintergrundbild versehen möchte, was sich je nach Jahreszeit ändert.

    Ich habe es mit folgendem Sript probiert, was ein Bild je nach Monat ausgibt:
    PHP-Code:
    <?php
    $monate     = array(1=>"winter",
                        2=>"winter",
                        3=>"fruehling",
                        4=>"fruehling",
                        5=>"fruehling",
                        6=>"sommer",
                        7=>"sommer",
                        8=>"sommer",
                        9=>"herbst",
                        10=>"herbst",
                        11=>"herbst",
                        12=>"winter");

    $monat = date("n");

    echo     "<img src='".$monate[$monat].".jpg'/>";
    ?>
    Meine Homepage wird per externer .css formatiert, dort ist das Hintergrundbild wie folgt eingebunden:
    Code:
    body {
background-image: url(hintergrundbild.jpg);
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
}
    Wie bringe ich nun die beiden Dateien zusammen?

    Oder hat jemand einen besseren Lösungsansatz?

    Über Tipps würde ich mich sehr freuen.

    Vielen Dank und viele Grüße

    fapl
    Stichworte: -
  • #2
    Lege in deinem Stylesheet Regeln für die unterschiedlichen Hintergrundbilder an:

    Code:
    body.winter { … }
body.fruehling { … }
...
    … und dann gibst du einfach dynamisch dem body-Element die entsprechende Klasse,
    Code:
    <body class="winter">
etc.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      @wahsaga: Vielen Dank für deine Antwort!

      Ihr überschätzt mich...

      html und css bekomme ich hin, in php bin ich jedoch blutiger Anfänger.

      Das genannte php-Script stammt nicht von mir, sowas bekäme ich auf keinen Fall hin. Es war ein www-Fundstück was zumindest ein Bild je nach Montat ausspuckt - ein erster Lösungsansatz für mich. Aber da verließen sie ihn...


      Also, in meiner style.css eine Klasse pro Monat anzulegen, verstehe ich noch.

      Aber wie gebe ich der index.php mit, welche Klasse sie gerade verwenden soll?


      Viele Grüße

      fapl

      Kommentar

      • #4
        Zitat von fapl Beitrag anzeigen
        Aber wie gebe ich der index.php mit, welche Klasse sie gerade verwenden soll?
        Das ist ja eigentlich HTML. Du musst halt folgendes ausgeben und dabei "winter" durch die entsprechende Jahreszeit ersetzen:

        Code:
        <body class="winter">
...
</body>
        Das machst du mit PHP so:

        PHP-Code:
        echo "<body class=\"".$monate[$monat]."\">\n";
        ...
        echo         "</body>\n"; 

        Kommentar

        • #5
          Zitat von berni15 Beitrag anzeigen
          [/CODE]Das machst du mit PHP so:

          PHP-Code:
          echo "<body class=\"".$monate[$monat]."\">\n";
          ...
          echo           "</body>\n"; 
          Oberlehrer an:
          Man sollte mit Singlequotes (') PHP-Ausgaben machen.
          Dann fallen die Maskierungen mit Backslash ( \ ) weg.

          Oberlehrer aus.


          Gruss WW

          Kommentar

          • #6
            PHP-Code:
            <body class="<?php echo htmlspecialchars($monate[$monat], ENT_COMPAT, 'UTF-8'); ?>">
                ...
            </body>

            Kommentar

            • #7
              Vielen Dank für eure Antworten!

              Ich habe jetzt schon hin- und her Probiert, bekomme es aber nicht hin

              Folgendes habe ich gemacht:

              - Für jede Jahreszeit ein Hintergrundbild in den ordner /images/backgrounds geladen.

              - Die Datei "style.css" sieht jetzt wie folgt aus:

              Code:
              body.fruehling {
background-image: url(/images/backgrounds/fruehling.jpg);
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
}

body.sommer {
background-image: url(/images/backgrounds/sommer.jpg);
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
}

body.herbst {
background-image: url(/images/backgrounds/herbst.jpg);
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
}

body.winter {
background-image: url(/images/backgrounds/winter.jpg);
    background-size: 100%;
    background-position: center top;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
}

(...)
              Meine Datei "index.php" sieht wie folgt aus:

              PHP-Code:
              <?php defined( '_JEXEC' ) or die; $this->setMetaData('generator',''); ?>
              <?php 
              JHtml              ::_('behavior.framework', true);
              JHtml::_('bootstrap.framework');
              $doc = JFactory::getDocument();
              $doc->setMetaData( 'cleartype', 'on', true );
              ?>
              <!doctype html>
                  <head>
                  <jdoc:include type="head" />
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">



                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/text.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/nav.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/typography.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive-template.css" media="screen" />
                  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" media="print" />
                  

                  
                  <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/selectnav.min.js"></script>
                  
              <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie6.css" media="screen" /> <![endif]-->
              <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie.css" media="screen" /> <![endif]-->

                  <link rel="stylesheet" type="text/css" href="/templates/pulsar/css/style.css" media="screen" />
                  
                  <?php if($this->params->get("usedropdown")) : ?> 
                  <script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/superfish.js"></script>
                  <script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/supersubs.js"></script>
                  <script type="text/javascript">
                  jQuery(document).ready(function(){ 
                      jQuery("ul.menu-nav").supersubs({ 
                          minWidth: <?php echo $this->params->get("dropdownhandler1"); ?>,
                          extraWidth:  1
                      }).superfish({ 
                          delay:500,
                          animation:{opacity:'<?php if($this->params->get("dropopacity")) : ?>show<?php else: ?>hide<?php endif; ?>',height:'<?php if($this->params->get("dropheight")) : ?>show<?php else: ?>hide<?php endif; ?>',width:'<?php if($this->params->get("dropwidth")): ?>show<?php else: ?>hide<?php endif; ?>'},
                          speed:'<?php echo $this->params->get("dropspeed"); ?>',
                          autoArrows:true,
                          dropShadows:false 
                      });
                  }); 
                  </script>
                  <?php endif; ?>

                  <?php echo $this->params->get("headcode"); ?>
                      
                  <?php if( $this->countModules('builtin-slideshow')) : ?>
                  <!-- Built-in Slideshow -->
                  <?php if($this->params->get("cam_turnOn")) : ?>
                      <link rel="stylesheet" id="camera-css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/camera.css" type="text/css" media="all" /> 

                  
                  <style type="text/css"
              <?php endif; ?>
              </style>
              </head>
              <body>
              <div id="top-a-line"></div>
              <?php if(JFactory::getApplication()->getMessageQueue()) : ?>
                  <div class="container navbar-fixed-top">
                      <div class="alert alert-block alert-error fade in">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                          <jdoc:include type="message" />
                      </div>
                  </div>
              <?php endif; ?>
              <div class="container" id="tmp-container">
              <div id="header-bg">
                  <header id="top-handler">
                      <div id="top" class="row-fluid">
                          </div>
                          <div class="clear"> </div>
                      </div>
                  </header>
              </div>
                      
                  
              <?php if( $this->countModules('position-1 or position-0 or search')) : ?>
              <nav id="menu">
                  <div id="menu-handler">
                      <div class="row-fluid">
                          <?php if( $this->countModules('position-0 or search')) : ?><div class="span8"><?php else : ?><div class="span12"><?php endif; ?><jdoc:include type="modules" name="position-1" /></div>
                          <?php if( $this->countModules('position-0 or search')) : ?><div id="search-position" class="span4"><jdoc:include type="modules" name="position-0" /><jdoc:include type="modules" name="search" /></div><?php endif; ?>
                      </div>
                  </div>
              </nav>
              <?php endif; ?>

              <?php if( $this->countModules('builtin-slideshow or slideshow') ) : ?>
              <div id="slideshow-handler"> 
                  <?php if( $this->countModules('builtin-slideshow') ) : ?>
                  <?php
                  $count_slides               = JDocumentHTML::countModules('builtin-slideshow');
                                $module = JModuleHelper::getModules('builtin-slideshow');
                                $moduleParams = new JRegistry();
                  echo               "<div class=\"camera_wrap\" id=\"ph-camera-slideshow\">"; 
                  for(              $sld_a=0;$sld_a<$count_slides;$sld_a++) { 
                                    $moduleParams->loadString($module[$sld_a]->params);
                                    $bgimage[$sld_a] = $moduleParams->get('backgroundimage', 'defaultValue'); 
                                    $caption_effect[$sld_a] = $moduleParams->get('moduleclass_sfx', 'defaultValue'); 
                                ?>
                  <div data-thumb="<?php if($bgimage[$sld_a] == "defaultValue") : echo $this->baseurl."/templates/".$this->template."/images/slideshow/no-image.png"; else : echo $this->baseurl."/".$bgimage[$sld_a]; endif; ?>" data-src="<?php if($bgimage[$sld_a] == "defaultValue") : echo $this->baseurl."/templates/".$this->template."/images/slideshow/no-image.png"; else : echo $this->baseurl."/".$bgimage[$sld_a]; endif; ?>">
                      <div class="camera_caption container <?php if(($caption_effect[$sld_a] == "defaultValue")) : ?>fadeFromLeft<?php else: echo $caption_effect[$sld_a]; endif; ?>" style="<?php if(empty($module[$sld_a]->content)) : ?>display:none !important;visibility: hidden !important; opacity: 0 !important;<?php endif; ?>">
                          <div class="container"><div><?php echo $module[$sld_a]->content; ?></div></div>
                      </div>
                  </div>
                  <?php } echo "</div>"; // End of camera_wrap ?> 
                  <?php elseif( $this->countModules('slideshow') ) : ?>
                  <div class="sl-3rd-parties">
                      <jdoc:include type="modules" name="slideshow" />
                  </div>
                  <?php endif; ?>
              </div>
              <?php endif; ?>
                          
              <div id="">
                  <div id="content-handler">
                      
                      <?php if( $this->countModules('position-2')) : ?>
                      <div id="nav-line">
                          <div id="breadcrumb-handler" class="row-fluid"><div class="span12" id="breadcrumb-bg"><jdoc:include type="modules" name="position-2" /></div></div>
                      </div>
                      <?php endif; ?>
                      
                      <?php if( $this->countModules('position-3')) : ?>
                      <div class="row-fluid">
                          <div class="span12"><div id="newsflash-position"><jdoc:include type="modules" name="position-3" style="vmdefault" /></div></div>
                      </div>
                      <?php endif; ?>
                      <div id="main-content-handler">
                          <div class="row-fluid">
                              <?php if( $this->countModules('top-left-1 or top-left-2 or position-7 or bottom-left-1 or bottom-left-2')) : ?>
                              <?php endif; ?>
                      </div>
                      <?php if( $this->countModules('bottom-long')) : ?>
                      <div class="bot-longgg">
                          <div class="row-fluid">
                              <div class="span12">
                                  <jdoc:include type="modules" name="bottom-long" style="vmdefault" />
                              </div>
                          </div>
                      </div>
                      <?php endif; ?>
                  </div>
              </div>
              </body>
              </html>>
              Wo muss ich den von euch vorgeschöagenen Wert eingeben???

              Vielen Dank und viele Grüße

              Kommentar

              • #8
                Nicht wundern, die wahnsinnige index.php stammt von joomla.


                Eine andere Idee:

                Ist es nicht irgendwie möglich, das in dem Zeitraum von Dezember bis Januar das Bild "winter.jpg" in "background.jpg" umbenannt wird.

                Im Zeitraum von März bis Mai wird dann das Bild "fruehling.jpg" in "background.jpg" umbenannt usw?

                Viele Grüße

                fapl

                Kommentar

                • #9
                  [QUOTE=fapl;672471]
                  PHP-Code:
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/text.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/nav.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/typography.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive-template.css" media="screen" />
                      <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" media="print" />
                  Hier kannst du noch eine Zeile anfügen, bei der du deine style.css einbindest:

                  PHP-Code:
                    <link rel="stylesheet" type="text/css" href="style.css"> 
                  Danach ersetzt du die Zeile "<body>" durch

                  PHP-Code:
                   <?php
                  $monate                   = array(1=>"winter",
                                                    2=>"winter",
                                                    3=>"fruehling",
                                                    4=>"fruehling",
                                                    5=>"fruehling",
                                                    6=>"sommer",
                                                    7=>"sommer",
                                                    8=>"sommer",
                                                    9=>"herbst",
                                                    10=>"herbst",
                                                    11=>"herbst",
                                                    12=>"winter");

                  $monat = date("n");

                  echo                   '<body class="'.$monate[$monat].'">\n';
                  ?>
                  Das sollte dann tun.

                  Kommentar

                  • #10
                    Man kann das Ganze auch noch etwas vereinfachen, wie mir heute Nacht eingefallen ist. Hier nur der relevante Code:

                    style.css:
                    Code:
                    body {
  background-size: 100%;
  background-position: center top;
  background-attachment: fixed;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
}

body.background0 { 
  background-image: url(/images/backgrounds/winter.jpg);
}

body.background1 { 
  background-image: url(/images/backgrounds/fruehling.jpg);
}

body.background2 { 
  background-image: url(/images/backgrounds/sommer.jpg);
}

body.background3 { 
  background-image: url(/images/backgrounds/herbst.jpg);
}
                    index.php:
                    PHP-Code:
                    <!doctype html>
                      <head>
                        <link rel="stylesheet" type="text/css" href="style.css">
                      </head>
                      <body class="background<?php echo (date('n')/3)%4; ?>">
                      </body>

                    Kommentar

                    • #11
                      Vielen, vielen Dank für eure Antworten!

                      Ohne eure Hilfe hätte ich das nie hinbekommen, aber mit den verschiedenen Methoden habe ich das jetzt schon bei mehreren Joomla-Installation und deren Templates eingerichtet.

                      Ich bin echt baff was php alles kann und was man damit alles machen kann wenn man es clever kombiniert.

                      Viele Grüße

                      fapl

                      Kommentar

                      Vorherige template Weiter
                      Lädt...
                      X