alaSimpleBT

Begonnen von pikar, 18 September 2015, 19:00:56

Vorheriges Thema - Nächstes Thema

0 Mitglieder und 1 Gast betrachten dieses Thema.

Drucken
Nach unten Seiten1
Benutzer-Aktionen

pikar

18 September 2015, 19:00:56
Hallo,

mal ein paar fragen zum theme alaSimpleBT

Das Theme ist ja 2 spaltig, gibts die möglichkeit die Linken Blöcke einfach einzuschalten?

wie bekomme ich nun um die Hauptblöcke also die die sonst im mittelteil sind, die gleichen rahmen undFarbgebunngen der Blocktietel usw. rum wie bei den rechten blöcken?

Bei bilder und grafiken hat das responsive aber problem da die bilder nicht verkleinert dargestellt werden....

mfg

alaniso

#1
20 September 2015, 15:09:50
Hallo pikar,

Die "responsive"-Funktionalität von bootstrap setzt bei der Verkleinerung des Bildschirms den horizontalen Aufbau (von links nach rechts) in den vertikalen Aufbau (von oben nach unten) um.

Ich habe das Theme 2-spaltig gebaut, damit die "Block"-Darstellung somit unter dem Inhalt dargestellt wird (übrigens wird der linke Block nicht ignoriert, sondern vor dem eigentlichen rechten Blockdargestellt).
Bei einem 3-Spaltigen Aufbau mit den Blöcken links und rechts wird bei Verkleinerung der Darstellung der linke Block oben, der Inhalt in der Mitte und der rechte Block unten angezeigt.

Falls das gewünscht ist, so ersetze doch den Inhalt vom <body>-Tag der Datei "theme.html" mit dem folgenden:
Code Auswählen

<body role="document">
 
      <!-- navbar -->
    <nav class="navbar navbar-inverse {NAVBARPOSITION}">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="./" title="{PAGE_SITENAME}">
            <span><img src="{LOGO}" alt="{PAGE_SITENAME}"></span> {PAGE_SITENAME}
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse"> 
          <!-- START headmenue -->
          <ul class="nav navbar-nav">               
            <li class="home"><a href="#">{_THEME_GOTOHOME}</a></li>
            <li class="active"><a tabindex="-1" href="#">Home</a></li>
            <li><a tabindex="-1" href="#">About</a></li>
            <li><a tabindex="-1" href="#">Account</a></li>
         </ul>
         <!-- END headmenue -->
         <ul class="nav navbar-right navbar-nav">
         <!-- START loginform -->
         {LOGINFORM}
         <!-- END loginform -->
         <!-- START searchform -->
         {SEARCHFORM}
         <!-- END searchform -->
         </ul>
       </div><!--/.nav-collapse -->
      </div>
    </nav>
 
 
  <div class="container theme-showcase" role="main">
    <!-- Main jumbotron for a primary marketing message or call to action -->
    {JUMBOTRON}
 
    <div class="row">     
    <div class="col-sm-3">

      <!-- START blocks_left_container -->
      <!-- START blocks_left_loop -->
      <!-- START block_left -->
      <div class="panel panel-default block __BLOCK_ID__">
        <div class = "panel-heading">
          <h4>{BLOCK_TITLE}</h4>
        </div>
        <div class="panel-body">
          {BLOCK_CONTENT}
        </div>
  </div>
      <!-- END block_left -->
      <!-- END blocks_left_loop -->
      <!-- END blocks_left_container -->     
     
      </div>
     
      <div class="col-sm-6">
        <!-- main -->
        <main>
          <div id="main" class="page-content clearfix">

            <div id="mainbar">
              <div id="mainbar-inside">

                <!-- START debugservice -->
                <div class="siteservice debugservice">{DEBUGSERVICE}</div>
                <!-- END debugservice -->

                <!-- START siteservice -->
                <div class="siteservice">{SITESERVICE}</div>
                <!-- END siteservice -->

                <!-- START blocks_center_top_loop -->
                <!-- START block_center_top -->
                <div class="panel panel-default block __BLOCK_ID__">
                  <div class="panel-heading"><h4>{BLOCK_TITLE}</h4></div>
                  <div class="panel-body">{BLOCK_CONTENT}</div>
                </div>
                <!-- END block_center_top -->
                <!-- END blocks_center_top_loop -->

                <!-- START script_output -->
               
                <!-- START opentable -->
                <div class="openclosetable clearfix">{OPENCLOSE_TABLE}</div>
                <!-- END opentable -->

                <!-- START opentable2 -->
                <div class="openclosetable2 clearfix">{OPENCLOSE_TABLE_2}</div>
                <!-- END opentable2 -->

                <!-- START opentableal -->
                <div class="openclosetableal warning clearfix">{OPENCLOSE_TABLE_AL}</div>
                <!-- END opentableal -->


                <div class="container-fluid">
                  <div class="row">
                    <!-- START themeindex -->
                       
                    <div class="col-sm-6 col-md-6 col-lg-4">
                   
                      <div class="thumbnail">
                       
                        {$image_src}
                        <div class="caption">
                       
                         
                          <h3>{$title}</h3>
                          <p>{$content}</p>
                          <p>{$readmore}</p>
                          <p>{$notes}</p>
                         
                          <div class="row small">
                          <em>
                            <div class="col-md-4 col-sm-12 col-xs-4">
                            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                            {$posted_day}. {$posted_month} {$posted_year}
                            </div>
                            <div class="col-md-4 col-sm-12 col-xs-4">
                              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                              {$author}
                            </div>
                            <div class="col-md-4 col-sm-12 col-xs-4">
                              <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                              {$newsgroup}
                            </div>
                          </em>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END themeindex -->
                  </div>
                </div>

                <!-- START themearticle -->
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-sm-12 col-md-12">
                      <h3>{$title}</h3>
                      <p>{$content}</p>
                      <p>{$notes}</p>
                    </div>
                  </div>
                </div>                       
                <!-- END themearticle -->

                <!-- END script_output -->

                <!-- START blocks_center_down_loop -->
                        <!-- START block_center_down -->
                        <div class="panel panel-default block __BLOCK_ID__">
                          <div class="panel-heading"><h4>{BLOCK_TITLE}</h4></div>
                          <div class="panel-body">
                            {BLOCK_CONTENT}
                          </div>
                        </div>
                        <!-- END block_center_down -->
                <!-- END blocks_center_down_loop -->

              </div>
            </div>

            <!-- // mainbar -->

          </div>
        </main><!-- //main -->   
      </div><!-- /main -->


      <div class="col-sm-3">
     
      <!-- START blocks_right_container -->
      <!-- START blocks_right_loop -->
      <!-- START block_right -->
      <div class="panel panel-default block __BLOCK_ID__">
        <div class = "panel-heading">
          <h4>{BLOCK_TITLE}</h4>
        </div>
        <div class="panel-body">
          {BLOCK_CONTENT}
        </div>
  </div>
      <!-- END block_right -->
      <!-- END blocks_right_loop -->
      <!-- END blocks_right_container -->
     
     
     
    </div>

    </div><!--/row-->
 
 
  </div><!-- <div class="container theme-showcase" role="main"> -->
 
  <footer>
    <div class="container">
       
      <div class="row">
        <div class="col-md-3">{FOOTMESSAGE1}</div>
        <div class="col-md-3">{FOOTMESSAGE2}</div>
        <div class="col-md-3">{FOOTMESSAGE3}<hr>{FOOTMESSAGE4}</div>
       
        <div class="col-md-3">
          <!-- START Socialmedia -->
          {LINK_RSSFEED}&nbsp;
          {LINK_FACEBOOK}&nbsp;
          {LINK_TWITTER}&nbsp;
          <!-- END Socialmedia -->
        </div>
        <div class="clearfix visible-lg"></div>
      </div>
     
      <div class="row">
        <div class="col-md-12">
          <p>&copy;&nbsp;{CURRENTYEAR} Theme <b>{THEMENAME}</b> by <a href="http://www.alaniso.de">aLaNiSo</a></p>
        </div>
      </div>
 
    </div><!--/.container-->
  </footer>



  </body>

Die Darstellung der Hauptblöcke war noch fehlerhaft - die habe ich gleich mit angepasst :-)

Für die Bilder hätte ich gerne ein Beispiel - da habe ich Dich nicht so recht verstanden...

Viele Grüße,
André

pikar

#2
21 September 2015, 15:15:06
Hallo Andre

danke für deine Antwort, hab das mal getestet jetz, du hast recht mit 3 Spalten wird das nix, in der mobilen Ansicht weil da dann immer die linken spalten vor den modulen kommen,

würdest du den code noch mal für 2 spalten geben?  so wie im post vorher?  :smile:

Die mittleren Blöcke sind jetzt genau so wie gewünscht mit Blocktitel und Hintergrund toll  :thumbup:

bei 2 Spalten sollten aber irgendwo dann die linke spalte in der breite im Thema anpassbar sein, könntest du das erläutern?

Also das der mittlere teil (Blöcke) nicht automatisch größer wird durch den Wegfall der linken Blöcke...

dazuz müsste sich dann auch {JUMBOTRON}  an die breite der jeweiligen seite anpassen, weil wenn ich jetzt alle linken Blöcke deaktiviere steht das nach links noch über.



Das mit dem Bilder meinte ich wie folgt, wenn ich z.b. in {JUMBOTRON}  im adminmeüe eine Grafik mit 800 breite einfüge, wird diese in der mobilen ansicht auch mit 800 breite angezeit, wobei sich die Blöcke und der rest jeweils an das Handy anpassen genau so ist es mit bilder, die müssten sich halt dann auch verkleiner so wie das theme und sw. wo bei das für mich jetzt nicht vorrangig ist.




danke für deine mühen, finde das theme und die Mobile Ansicht echt toll  :thumbup:

AlternativeComputing

#3
21 September 2015, 17:42:47
Zitat von: pikar in 21 September 2015, 15:15:06
Hallo Andre

....

Das mit dem Bilder meinte ich wie folgt, wenn ich z.b. in {JUMBOTRON}  im adminmeüe eine Grafik mit 800 breite einfüge, wird diese in der mobilen ansicht auch mit 800 breite angezeit, wobei sich die Blöcke und der rest jeweils an das Handy anpassen genau so ist es mit bilder, die müssten sich halt dann auch verkleiner so wie das theme und sw. wo bei das für mich jetzt nicht vorrangig ist.




danke für deine mühen, finde das theme und die Mobile Ansicht echt toll  :thumbup:


Wie das mit den Bildern geht zeigte ich ja schon in meiner Theme.
Die Bilder müssen Skalierbar sein oder Skalierbar gemacht werden.
Das machst Du über die css Dateien.
MfG

Peter

alaniso

#4
21 September 2015, 20:55:01
Hallo Pikar,

die Anpassungen im 2-spaltigen Layout erhälst Du, wenn Du Dir das Theme erneut herunterlädst - ich habe die Download-Datei angepasst:
http://www.pragmamx.org/Downloads-alaSimpleBT-view-898.html

Das mit den Bildern ist - wenn Du das Theme verwendest - recht einfach:

Füge zum Image bitte die Klasse "img-responsive" ein:
Code Auswählen

<img src="..." class="img-responsive" alt="Responsive image">

Hinweis:
Das funktioniert allerdings nur, wenn Du - und darüber reden wir ja - eine Theme verwendest, welches auf die Standard bootstrap-Funktionalität aufbaut.

Viele Grüße,
André

pikar

#5
23 November 2015, 10:13:10
Hallo @ alaniso

noch ein paar Fragen zu dem Theme alaAnimateBT

z.B Farbschema united 

da wird der Footer nicht immer angezeigt ab und an ist er leer vorallem bei nicht Standard Modulen bzw. wenn ich nicht eingeloggt bin, logge ich mich dann z.b. als admin ein erscheit beim gleichen Modul der Footer wieder,

dann noch eine frage, ich versuche hier das gleiche Farbschema aufzubauen wie bei meinem alten Theme und alten pmx,
so wenn ich nun die Datei united.bootstrap.min.css  bearbeite erscheinen bei mir über 5000 Zeilen die mich erschlagen, und ich habe da keine Ahnung usw.  hab nun lange rum gespielt und nicht wirklich was erreicht, zumindest nichts was man nach aussehen und Schönheit bewerten könnte da ich da leihe bin

könntest du da nicht noch so was wie hier gezeigt im Bild (nicht pmx aber genial)  einbauen für Blocktitel, Hintergrund Textfarben usw.. das wäre doch viel einfacher als verscheiden Farbschemen usw... das würde das leben echt erleichtern für nicht Programmierer, ansonsten finde ich das Theme wie gesagt toll.

mfg

alaniso

#6
24 November 2015, 11:16:11
Hallo Pikar,

ich habe in dem alaAnimateBT ein paar "Standard-Farbschemata" hinterlegt.
Natürlich kann man sich hier eines herauskopieren und die *.css - Dateien manuell bearbeiten.

Es geht jedoch auch einfacher - z.B. hier:
Standard-Bootstrap:
http://getbootstrap.com/customize/
oder etwas schöner:
http://bootstrap-live-customizer.com/

Hier definierst Du sogenannte LESS-Variablen, die dann von den Seiten in die korrekten *.css - Dateien umgesetzt werden (beim Download).

Diese Dateien kannst Du dann in das entsprechende Theme-Verzeichnis (z.B. themes/alaAnimateBT/styles/bootstrap.css und bootstrap.min.css einfügen/ersetzen.

Die Dateien werden dann wirksam, wenn Du in den Theme-Einstellungen das Farbschema "Default" setzt.

Das mit dem Footer schaue ich mir noch mal an!

Viele Erfolg,
André

pikar

#7
17 Mai 2016, 16:00:45
Hallo André

hast du das mit dem Fotter nochmal angesehen?

Mir ist aufgefallen in der Mobilen Ansicht wird er angezeigt in der Monitoransicht nicht...

waltkemper

#8
13 November 2016, 11:06:58
Hallo,
habe in der mobilen Ansicht als erstes unter dem Header einen Searchbutton (Jumbotron?) Wie kann ich den entfernen. Habe mir in der theme.html bereits einen Wolf gesucht.

http://www.pendelfeder.com

Viele Grüße aus Winterscheid

pyr0

#9
16 November 2016, 07:36:40
Moin Moin

schau mal in die theme.functions.php Zeile 203, da kannst Du es einfach mal mit // auskommentieren

Code Auswählen
// $out .= '<a href="modules.php?name=Search" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>';
ich hoffe das reicht Dir ?!  :gruebel:

Gruss pyr0
Kein Support über PN, Mail !
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

waltkemper

#10
16 November 2016, 08:15:28
Das wars,
vielen Dank. Hat sehr geholfen.

Grüße aus Winterscheid
Drucken
Nach oben Seiten1
Benutzer-Aktionen