Post by Georg@astro-logikk » Sun Mar 03, 2019 4:34 am

Hallo Gemeinde,

bin neu im Thema Opencart und habe ein paar Tests gemacht um zu verstehen wie und was alles funktioniert, leider bin ich nach lagem nicht auf die Lösungen gekommen und möchte Euch bitten mir etwas unter die Arme zu greifen.

Ich habe versucht die Elemente MyShop / Features und den Footer über das catalog/view/theme/default/stylesheet/stylesheet.css
zu bearbeiten. bin jedoch gescheitert.

Im Anhang ein Bild, damit es etwas verständlicher wird was ich meine.

Danke im Voraus.
Gruß
Georg

Attachments

Opencart.png

Opencart.png (229.51 KiB) Viewed 965 times



Posts

Joined
Fri Mar 01, 2019 5:01 am

Post by OSWorX » Sun Mar 03, 2019 8:19 pm

Hallo,

das Zentrieren funktioniert einerseits über die CSS, andererseits sind all die von dir angeführten Elemente in Blocken angeordnet.
Da bootstrap verwendet wird, sieht das dann so aus:

Code: Select all

col-sm-4 col-md-6 col-xs-12
Dieser Code ist natürlich immer anders.
Auch entscheidend ob auch linker und/oder rechter Rand verwendet wird - die Vorlagen sollten sich danach richten und dementsprechend diese Codeblöcke anpassen.

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by Georg@astro-logikk » Tue Mar 05, 2019 6:16 am

OSWorX wrote:
Sun Mar 03, 2019 8:19 pm
Hallo,

das Zentrieren funktioniert einerseits über die CSS, andererseits sind all die von dir angeführten Elemente in Blocken angeordnet.
Da bootstrap verwendet wird, sieht das dann so aus:

Code: Select all

col-sm-4 col-md-6 col-xs-12
Dieser Code ist natürlich immer anders.
Auch entscheidend ob auch linker und/oder rechter Rand verwendet wird - die Vorlagen sollten sich danach richten und dementsprechend diese Codeblöcke anpassen.
Erstmal Dankeschön für die schnelle Antwort.
ich bin mir nicht sicher ob ich dich richtig verstanden habe, die oben angegeben Blocks kann ich zwar im CSS finden

Code: Select all

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
aber ein text-align: center oder align:center im CSS hat nichts bewirkt.

Gibt es ein Manual über den Aufbau des Default Themes, sprich die Struktur wie die Verlinkung der einzelnen Blöcke / Skripte aufgezeigt wird ?

Gruß
Georg


Posts

Joined
Fri Mar 01, 2019 5:01 am

Post by OSWorX » Tue Mar 05, 2019 3:04 pm

Wie immer wird es spannend wenn man raten muss ..
1. welche OpenCart Version
2. welche Vorlage

Denn davon wiederum ist es abhängig:
A. OpenCart 2.x bis 3.0.x > https://getbootstrap.com/docs/3.3/css/#grid
B. OpenCart 3.1.x > https://getbootstrap.com/docs/4.3/layout/grid/

Ein Zentrieren von Blöcken funktioniert nicht einfach so .. es ist abhängig wieviele davon in einer Reihe sind.
Beispiel Nummer 2: hier ist Platz für 4 Blöcke (in dieser Ansicht für PC), in mobiler Ansicht wiederum wird nur 1 Block bzw. wenn Tablett 2 Blöcke angezeigt.
Das ganze nennt sich Responsive : Anzeigen ändern sich automatisch nach Bildschirmauflösungen.

Sollen jetzt in Nummer 2 nur 2 Blöcke (in einer 4-Block-Reihe) angezeigt werden, so ist der jeweilige Block anzupassen.
So wird er z.B. standardmässig col-md-3 sein (bei 4 Blöcken), müsste das auf col-md-6 (2 pro Reihe) geändert werden.
Sollen es 3 sein dann col-md-4 usw.

Das Ganze dass auch noch anpassen für kleine Ausgabegeräte, z.B. col-xs-4 oder col-xs-6 (wobei col-xs-4 nicht viel bringen wird bei Nummer 2, da dann alles extrem gequetscht aussehen wird).

All das gilt auch für Nummer 1 & 3.

In Summe dann könnte derselbe Block so aussehen: col-lg-3 col-md-3 col-xs-6 oder col-lg-3 col-md-4 col-xs12

Es wird immer auf 12 gerechnet.
Das nennt sich dann Grid(system).

Um das Ganze variabel zu halten, müsste also die Gesamtanzahl der anzuzeigenden Blöcke je Reihe addiert werden, dann 12 / die Anzahl = Anzahl der Spalten (und das je Ausgabegerät/Bildschirmgröße).

Man könnte das auch so machen, dass man einen umschließenden Container hat <div class="row">
und darin die einzelnen Blöcke mit z.B. col-md-3
Somit hätte man einen flexiblen Container, egal wieviele Einzelblöcke darin sind.
Und alle werden linksbündig dargestellt (nicht deren Inhalte) was dazu führt dass egal ob 2 oder 20 Blöcke alle innerhalb dieses Containers dargestellt werden.
Und zudem flexibel ist.

Hat man jedoch pro Reihe nur 1-2 Inhalte (Blöcke - siehe Nummer 2), müsste man die css auf col-md-12 oder col-md-6 anpassen.
Was dann oft mehr als eigenartig aussehen wird ..

Um die Inhalte der jeweiligen Blöcke zu zentrieren müsste man zuerst nachsehen welche CSS-Klasse angewendet wird.
Und dann entweder diese in der stylesheet.css (oder wie die dann heissen möge) anpassen.
Oder eine neue CSS-Klasse zuweisen welche man neu definiert und darin die Zentrierung definiert.

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by IP_CAM » Thu Mar 07, 2019 10:45 am

Und meist sieht es dann auch noch SCHEI... aus, in zentrierter Form,
weil ja meist nicht alle Linknamen auch die gleiche Länge aufweisen.
Ich machte es so wie auf dem Bild, um es optisch etwas zu verbessern,
indem ich einen OUTERFOOTER Rahmen setze, bei welchem 'list-unstyled'
im Unterteil als Border-Linie ausgebildet ist. Man könnte diesen 'Rahmen-
Inhalt auch zentrieren und in grösseren Auflösungen und ca. 80% MAX-WIDTH
setzen, um es so vielleicht noch etwas gefälliger aussehen zu lassen, aber
ich hab das nie versucht.
---
stylesheet.css - unmittelbar vor der footer{.... Linie:

Code: Select all

.outerfooter{border-top:4px solid #fb6f58;}
.outerfooter .list-unstyled li{border-bottom:1px dotted #6c7172;}
#content{min-height:280px;}
footer{margin-top:0px;padding-top:0px;background-color:#2c3e50;border-top:1px solid #ddd;color:#e2e2e2;}
---
Thema footer.tpl File

Code: Select all

<footer>
<div class="outerfooter">
<span><h6>&nbsp;</h6></span> (dient nur als 'primitiver' Abstandhalter)
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3">
...
...
...
...
PLUS ein zusätzliches:
</div> 
Vor:
</footer>
Viel Glück!
Ernst
---
Test Site:
http://www.ocshop.li/shop/
---
Image

I am no longer active at the Forum. Please do NOT send me Personal Mails,
they will no longer be replied to.
My Github OC Site: https://github.com/IP-CAM
4'160 + FREE OC Extensions, on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Georg@astro-logikk » Fri Mar 08, 2019 2:06 pm

HI OSWorX und IP_CAM

Dankeschön für die Informationen, bin gerade dabei mich einzulesen und ein Verständnis zu entwickeln.

Ich berichte.

Gruß.
Georg


Posts

Joined
Fri Mar 01, 2019 5:01 am

Post by Georg@astro-logikk » Wed Mar 20, 2019 3:47 am

Hallo Gemeinde,

hab für mich eine Möglichkeit entdeckt wie ich meinen footer und die links zentriert erscheinen lassen kann.

Hierfür habe ich geändert
catalog/language/en-gb/common

Code: Select all

 <?php
// Text
$_['text_information'] = '';							 ###geändert#####
$_['text_service'] = 'Service';
$_['text_extra']= 'Contact';
$_['text_contact']= 'Contact Us';
$_['text_return']= 'Returns';
$_['text_sitemap']= 'Site Map';
$_['text_manufacturer'] = 'Brands';
$_['text_voucher'] = 'Gift Certificates';
$_['text_affiliate'] = 'Affiliate';
$_['text_special']= 'Specials';
$_['text_account']= '';                     						  #####geändert#####
$_['text_order']= 'Order History';
$_['text_wishlist'] = 'Wish List';
$_['text_newsletter'] = 'Newsletter';
$_['text_powered'] = 'Powered By <a href="http://www.opencart.com">OpenCart</a><br /> %s &copy; %s';
 
im Adminbereich unter Design/Theme Editor/common → footer.twig

Code: Select all

<footer>
<div class="container">
<div class="row">
{% if informations %}
<div class="col-sm-3">
<h5>{{ text_information }}</h5>
<ul class="list-unstyled">
</ul>
</div>
{% endif %}
<div class="col-sm-3">
<h5>{{ text_extra }}</h5>
<ul class="list-unstyled">
{% for information in informations %}
<li><a href="{{ information.href }}">{{ information.title }}</a></li>
{% endfor %}
</ul>
<ul class="list-unstyled">
<li><a href="{{ information.href }}">{{ information.title }}</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>{{ text_service }}</h5>
<ul class="list-unstyled">
<li><a href="{{ contact }}">{{ text_contact }}</a></li><li><a href="{{ voucher }}">{{ text_voucher }}</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>{{ text_account }}</h5>
<ul class="list-unstyled">
</ul>
</div>
</div>
<hr>
<p>{{ powered }}</p>
</div>
</footer>
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally
accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->
</body></html>
und in catalog /view/theme/default/stylesheet → stylesheet.css

Code: Select all

/* footer */
footer {
margin-top: 30px;
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
text-align: center; 		  						######geändert#######
}
footer hr {
Bild hab ich als PDF angehängt.

Danke für die Inspiration.


Posts

Joined
Fri Mar 01, 2019 5:01 am
Who is online

Users browsing this forum: No registered users and 5 guests