Template anpassen: Schriftröße + Breite

Moderator: Sisko1990

Forum rules
Forumregeln
Locked
Sheltem
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jun 05, 2006 4:05 pm

Template anpassen: Schriftröße + Breite

Post by Sheltem » Mon Jun 05, 2006 4:23 pm

Hallo zusammen,

da die Suche-Funktion anscheinend gerade keine Lust hat, hoffe ich das ich nicht gesteinigt werde, wenn das hier schonmal gefragt wurde.

Ich nutze das Template "247portal-blue2" (kann man sich hier ansehen: http://www.mamboview.com/templatedemos/index.php). Und habe daran auch schon einiges geändert, zwei Dinge bekomme ich aber nicht gebacken:

1) Ich möchte die Schriftgröße von den Contenttexten erhöhen, finde im css-File aber nicht den passenden Eintrag. Habe schon etwas herumgespielt, bei meinen bisherigen Änderungen waren aber auch immer andere Teile des Templates betroffen. Gibt es in dem css-File überhaupt eine eigene Klasse, bei der ich per font-size die Schriftgröße nur für den Contenttext vergrößern kann? Hier das .css-File von dem Template:

Code: Select all

body {
  color            : #000000;
  margin-left      : 20px;
  margin-right     : 20px;
  margin-bottom    : 20px;
  padding          : 0px;
  background-color : #FFFFFF;
  background-image : url(../images/back.jpg);
  scrollbar-track-color : #00739E;
  scrollbar-arrow-color : White;
  scrollbar-base-color : #006699;
  scrollbar-shadow-color : #006699;  
  font-family      : arial, sans-serif;
  font-size        : 12px;
}
td, tr, p, div {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 12px;
  color            : #333333;
}
hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}
.mod {
  background       : #FFFFFF;
  width            : 2px;
}
.mt {
  font-family      : Verdana, Geneva, Arial, Helvetica, sans-serif;
  color            : #FEFEFE;
  font-size        : 4px;
  font-weight      : normal;
 }
.mt a:link, .mt a:visited {
  font-size        : 4px;
  color            : #FFFFFF;
  text-decoration  : none;
  font-weight      : bold;
}
.mt a:hover {
  font-size        : 4px;
  color            : #FEFEFE;
  text-decoration  : none;
  font-weight      : bold;
}
.main { 
  float            : left; 
  width            : 100%;
  margin           : 0px; 
  padding          : 0px;
}
.contentdescription { 
  width            : auto !important;
  display          : block;
} 
#buttons {
  float            : right;
  margin           : 0px;
  padding          : 0px;
  width            : 50%;
}
ul#mainlevel-nav {
  font-size        : 11px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  font-size        : 0.8em;
}
ul#mainlevel-nav li {
  display          : block;
  background-image : none;
  padding-left     : 1px;
  padding-right    : 1px;
  float            : right;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 22px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;
}
ul#mainlevel-nav li a {
  font-size        : 11px;
  display          : block;
  padding-left     : 16px;
  padding-right    : 15px;
  text-decoration  : none;
  color            : #999999;
  background       : transparent;
}
ul#mainlevel-nav li a:hover {
  font-size        : 11px;
  color            : #333333;
}
.sublevel {
  padding-left     : 10px;
}
.leftrow {
  background-color : #F1F1F1; 
  width            : 168px;
  height           : 100%;
  margin-right     : 5px;
}
.rightrow {
  background-color : #F1F1F1;
  height           : 100%;
  width            : 168px;
  align            : right;
  margin-left      : 5px;
}
table.moduletable {
  width			   : 100%;
  table-layout	   : auto;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
}
table.moduletable th {
  font-size        : 11px;
  font-weight      : bold;
  text-transform   : uppercase;
  text-align       : left;
  height           : 21px;
  line-height      : 21px;
  text-indent      : 8px;
  letter-spacing   : 1px;
  color            : #FFF;
  background-image : url(../images/modul.jpg);  
}
table.moduletable td {
  padding-left     : 0px;
  padding-right    : 0px;
}
#search {
  float            : left;
  margin-top       : 5px;
  border           : 1px solid #cccccc;
  padding          : 0px;
  width´           : 123px !important;
  width            : 125px;
  height           : 16px !important;
  height           : 16px;
  overflow         : hidden;
}
#search .inputbox {
  border           : 0px;
  margin-top       : 0px;
  padding          : 2px 3px 2px 6px !important;
  padding          : 0px 3px 2px 6px;
  font-family      : arial, helvetica, sans-serif;
  font-size        : 10px;
  height           : 12px !important;
  height           : 12px;
  width            : 123px !important;
  width            : 125px;
  color            : #999999;
  background       : #FFFFFF;
}
.back_button {
  color            : #333333;
  font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/bb.gif);
  background-repeat: no-repeat;
  white-space      : normal;
  font-weight      : normal;
  border           : 1px solid #999999;
  padding-bottom   : 4px;
  padding-left     : 20px;
  padding-right    : 2px;
  padding-top      : 1px;
  margin-right     : 4px;
  float            : right;
  font-weight      : normal;
  line-height      : 10px;
  text-decoration  : none; 
}
.button {
  font-size        : 11px;
  color            : #333333;
  border           : 1px solid #999999;
  margin-bottom    : 5px;
  background-color : #EDEDED;
  padding          : 1px;
}
.inputbox {
  border           : 1px solid #999999;
  background	   : transparent url(../images/back.gif);
  background-color : #EDEDED;
  margin-bottom    : 5px;
  color			   : #333333;
}
.sectiontableheader {
  font-size        : 11px;
  font-weight      : normal;
  text-transform   : uppercase;
  letter-spacing   : 1px;
  color            : #333333;
  background       : #EDEDED;
  padding          : 1px;
}
.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #E3E3E3;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
}
.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #999999;
}
a.mainlevel  {
  margin           : 0px;
  padding          : 0px;
  font-size        : 12px;
  width            : 168px;
  background-color : #ECEAD8;
  text-indent      : 10px;
}
a.mainlevel: link {
  padding          : 0px 0px 0px 0px;
  font-size        : 12px;
  width            : 168px;
  background-color : #E3E3E3;
  text-indent      : 10px;
}
a.mainlevel:link, a.mainlevel:visited {
  display          : block;
  font-size        : 12px;
  border-top       : 1px solid #ffffff;
  border-bottom    : 1px solid #999999;
  background-color : #EDEDED;
  font-weight      : normal;
  padding          : 2px 0px 2px 0px;
  color            : #333333;
  width            : 168px;
  text-indent      : 10px;
}
a.mainlevel:hover {
  background-color : #E3E3E3;
  font-size        : 12px;
  font-weight      : normal;
  text-decoration  : none;
  text-indent      : 10px;
}
#active_menu {
  color            : #333333;
  background-color : #E3E3E3;
  font-weight      : bold;
}
a#active_menu:hover {
  color            : #333333;
}
a:link, a:visited {
  font-size        : 11px;
  color            : #003366;
  text-decoration  : none;
  font-weight      : bold;
}
a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
a.category:link, a.category:visited {
  font-size        : 11px;
  font-weight      : bold;
}
a.readon:link, a.readon:visited {
  color            : #003366;
  font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/read.gif);
  background-repeat: no-repeat;
  white-space      : normal;
  font-weight      : bold;
  border           : 1px solid #999999;
  padding-bottom   : 3px;
  padding-left     : 21px;
  padding-right    : 2px;
  padding-top      : 1px;
  float            : left;
  line-height      : 10px;
  text-decoration  : none; 
}
a.readon:hover {
  color            : #333333;
  font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/read.gif);
  background-repeat: no-repeat;
  white-space      : normal;
  font-weight      : bold;
  border           : 1px solid #999999;
  padding-bottom   : 3px;
  padding-left     : 21px;
  padding-right    : 2px;
  padding-top      : 1px;
  float            : left;
  line-height      : 10px;
  text-decoration  : none; 
}
ul {float          : left;
  margin           : 2px;
  padding-left     : 10px;
  list-style       : none;
}
li {
  
  line-height      : 15px;
  padding-left     : 15px;
  padding-top      : 0px;
  background-image : url(../images/bullet.png) ;
  background-repeat: no-repeat;
  background-position: 0px 3px;
}
table.contenttoc {
  border           : 1px solid #FFFFFF;
  background       : #F1F1F1;
  padding          : 5px;
  margin-left      : 2px;
  margin-bottom    : 2px;
}
.pagenavcounter {
  font-size        : 10px;
  color            : #003366;
}
.pagenavbar {
  border-top       : 1px solid #999999;
  padding          : 2px;
}
.pagenav {
  font-weight      : bold;
  color            : #CCCCCC;
}
a.pagenav:link, a.pagenav:visited {
  text-decoration  : none;
}
a.pagenav:hover {
  text-decoration  : none;
}
.date {
  font-size        : 10px;
  color            : #333333;
  padding-right    : 10px;
}
.small {
  font-size        : 10px;
  color            : #333333;
}
.smalldark {
  font-size        : 10px;
  color            : #333333;
}
.createdate, .modifydate {
  font-size        : 10px;
  color            : #666666;
}
.content_vote {
  font-size        : 10px;
  height           : 22px;
  padding-top      : 2px;
  padding-bottom   : 2px;
}
.content_rating {
  font-size        : 10px;
  color            : #CC9900;
}
.pathway {
  font-size        : 10px;
  color            : #333333;
  padding-left     : 8px;
}
a.pathway:link, a.pathway:visited {
  font-size        : 10px;
  padding-left     : 0px;
}
a.pathway:hover {
  font-size        : 10px;
  padding-left     : 0px;
}
table.content{
  width            : 100%;
  padding          : 0px;
  border-collapse  : collapse;
  border-spacing   : 0px;
  margin-bottom    : 10px;
}
table.contentpane {
  width            : 100%;
  padding-left     : 5px;
  padding-right    : 5px;
  border-spacing   : 0px;
  margin-bottom    : 5px;
}
table.contentpaneopen {
  width            : 100%;
  padding-left     : 5px;
  padding-right    : 5px;
  border-spacing   : 0px;
  margin-bottom    : 5px;
}
.pollstableborder{
  border-color     : #999999;
}
.contentheading, .componentheading {
  background       : url(../images/header.gif) repeat;
  font-size        : 14px;
  font-weight      : bold;
  line-height      : 24px;
  text-transform   : uppercase;
  text-align       : left;
  color            : #003366;
  width            : 100%;
}
.title {
  font-family      : Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight      : bold;
  text-transform   : uppercase;
  text-indent      : 8px;
  font-size        : 20px;
  text-align       : left;
  color            : #FFFFFF;
}
.title a:link, .title a:visited {
  font-size        : 20px;
  color            : #FFFFFF;
  text-decoration  : none;
  font-weight      : bold;
}
.title a:hover {
  font-size        : 20px;
  color            : #FFFFFF;
  text-decoration  : none;
  font-weight      : bold;
}
.ontab {
  border-left      : 1px solid #404040;
  text-align       : center;
  font-weight      : bold;
  color            : #333333;
  padding          : 5px;
  cursor           : hand;
  line-height      : 40px;
}
.offtab {
  border-left      : 1px solid #404040;
  text-align       : center;
  color            : #999999;
  font-weight      : normal;
  padding          : 5px;
  cursor           : hand;
   line-height     : 40px;
}
.tabpadding {
 border-left       : 1px solid #404040;
}
.pagetext {
  visibility       : hidden;
  position         : relative;
  top              : -10;
  background-color : #FFFFFF;
  display          : none;
}
.footer {
  font-family      : Verdana, Geneva, Arial, Helvetica, sans-serif;
  color            : #FFFFFF;
  font-size        : 10px;
  color            : #FFFFFF;
  font-weight      : normal;
 }
.footer a:link, .footer a:visited {
  font-size        : 11px;
  color            : #FFFFFF;
  text-decoration  : none;
  font-weight      : bold;
}
.footer a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
.contact_email  {
  width            : 100%;
}
.contact_email .inputbox {
  width            : 345px;
}
2) Ich möchte das Template gern verbreitern und zwar genau in der Art und Weise wie auf joomla.org. Im Template ist die Breite der "Haupttabelle" auf eine absoulte Pixelzahl festgelegt, bei dem Template von Joomla.org auf 100%, trotzdem ist dort immer noch etwas Platz rechts und links. Wie kann ich das für mein Template realisieren?

User avatar
phreak_02
Joomla! Explorer
Joomla! Explorer
Posts: 375
Joined: Tue Aug 23, 2005 3:31 pm
Location: Austria
Contact:

Re: Template anpassen: Schriftröße + Breite

Post by phreak_02 » Tue Jun 06, 2006 1:14 pm

1.)
Jeder Text auf deiner Seite wird mit den Klassen

td, tr, p, div { ... }

angezeigt, außer er ist anders definiert in einer anderen Klasse.
Für deinen Contenttext zB.: dient die Klasse

.contentpaneopen { ... }

Wenn du hier ne font-size: ..px definierst "overrult" sie oben genannte Klasse.

2.) Sorry, hab grad kein Kopf dafür.

Grüße
Stefan
Last edited by phreak_02 on Tue Jun 06, 2006 2:10 pm, edited 1 time in total.
http://www.cycomsplat.com - I work for you !
http://www.kindaktuell.at - I'm running this !

MrDamage
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 180
Joined: Tue Mar 07, 2006 6:53 pm
Contact:

Re: Template anpassen: Schriftröße + Breite

Post by MrDamage » Tue Jun 06, 2006 2:07 pm

ad 2:
div Stylesheetangaben

margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 1050px;
_width: expression(((document.body.clientWidth)) 1050? "1050px": "auto" );

Sheltem
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jun 05, 2006 4:05 pm

Re: Template anpassen: Schriftröße + Breite

Post by Sheltem » Thu Jun 08, 2006 12:43 am

phreak_02 wrote: 1.)
Jeder Text auf deiner Seite wird mit den Klassen

td, tr, p, div { ... }

angezeigt, außer er ist anders definiert in einer anderen Klasse.
Für deinen Contenttext zB.: dient die Klasse

.contentpaneopen { ... }

Wenn du hier ne font-size: ..px definierst "overrult" sie oben genannte Klasse.
Das hat leider nicht funktioniert. Ich habe die .contentpaneopen-Klasse mit der font-size Information angelegt, dies bleibt ohne Wirkung. In dem Stylesheet vorhanden ist eine Klasse namens table.contentpaneopen, dort brachte ein zusätzliches font-size aber auch nichts. Nur wenn ich direkt in der Klasse td, tr, p, div {...} die Schriftgröße ändere, wird das auch sichtbar, aber dabei werden auch andere Teile des beeinflußt, wie Du ja auch geschrieben hast. Was mache ich falsch?

Sheltem
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jun 05, 2006 4:05 pm

Re: Template anpassen: Schriftröße + Breite

Post by Sheltem » Thu Jun 08, 2006 12:48 am

MrDamage wrote: ad 2:
div Stylesheetangaben

margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 1050px;
_width: expression(((document.body.clientWidth)) 1050? "1050px": "auto" );
Ich habe in dem Stylesheet des Templates folgendes hinzugefügt:

Code: Select all

div {
margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 1050px;
_width: expression(((document.body.clientWidth)) < 750? "750px": ((document.body.clientWidth)) > 1050? "1050px": "auto" );
}
(ist der Unterstrich vor dem letzten width eigentlicht so richtig?) Danach sah das Template so aus:

Image

Muß ich noch irgendwo anders etwas ändern?

MrDamage
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 180
Joined: Tue Mar 07, 2006 6:53 pm
Contact:

Re: Template anpassen: Schriftröße + Breite

Post by MrDamage » Thu Jun 08, 2006 6:37 am

Du musst dem id-Tag noch einen Namen geben, sonst wirkt sich die Breitenangabe auf alle div-Tags aus.
z.B. im Stylesheet:
div#wrapper {
  ...
}


In der index.php des Templates umschließt du die gewünschte Tabelle/den Bereich dann mit

...

MrDamage
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 180
Joined: Tue Mar 07, 2006 6:53 pm
Contact:

Re: Template anpassen: Schriftröße + Breite

Post by MrDamage » Thu Jun 08, 2006 8:30 am

ad 1: Füge im Stylesheet folgendes dazu (Anm.:  "..." durch gewünschte Schriftgröße ersetzen)

table.contentpaneopen td {
font-size: ...px;
}

ad 2: nicht vergessen die festen Breiten (width="770") bei den beiden ersten Tabellen im index-file rausnehmen.

sieht dann so aus:
[code]<body>
<div>
  <a name="up" id="up"></a>
  <div id="wrapper">
  <table  height="20" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" class="mt"></td>
    </tr>
  </table> 
  <table border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
...[/code]


und endet mit
...
[code]    </tr>
  </table>
</div>
</div>
</body>
</html>[/code]

Sheltem
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jun 05, 2006 4:05 pm

Re: Template anpassen: Schriftröße + Breite

Post by Sheltem » Thu Jun 08, 2006 11:34 pm

Das hat alles wunderbar funktioniert, tausend Dank! Das table.contentpaneopen td... hat zwar erst nicht den kompletten Contenttext in die gewünschte Größe gebracht, aber ich konnte dann doch soweit denken und ein contentpaneopen p... mit dem passenden font-size-Attribut dazuzupacken.
;)

Ich verstehe zwar nicht ganz, warum es nicht wie weiter oben vorgeschlagen funktioniert hat, weil doch ein Eintrag der font-size bei table.contentpaneopen auf die ganzen anderen Tags hätte vererbt werden müssen, wenn diese nicht nochmal extra definiert sind. Bin jetzt aber trotzdem glücklich.

:D

Dextrose
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Jun 16, 2006 12:48 pm

Re: Template anpassen: Schriftröße + Breite

Post by Dextrose » Fri Jun 16, 2006 2:57 pm

Hallo, ich habe ein ähnliches Problem mit dem Template Joomla_Black. http://www.joomlademo.de/index.php?mos_ ... omla_black

Leider werde ich aus den Replies nicht wirklich schlau. Ich schätze dazu fehlt mir noch Hintergrundwissen, weil ich ganz neu bin bei Joomla.

Soweit ich das richtig verstanden habe, sind die PX Werte in der CSS Datei abhängig von einem Rahmen, den man in der index.php des Templates festlegt. Wenn dann beispielsweise die PX Werte auf 0 stehen und der Rahmen nicht auf 100% steht, erscheinen die einzelnen Module auch nicht am Bildschirmrand, sondern dort wo der Rahmen anfängt.

Ich würde nun gerne das Joomla_black Template so anpassen, dass es sehr viel mehr in die Breite geht. (Bis fast zum Bildschirmrand) Muss ich dazu nun alle Module einzeln verschieben, oder kann ich das in der Index.php festlegen.

Danke für jede Hilfe.
Gruß,
Dextro

MrDamage
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 180
Joined: Tue Mar 07, 2006 6:53 pm
Contact:

Re: Template anpassen: Schriftröße + Breite

Post by MrDamage » Fri Jun 16, 2006 11:15 pm

@ Dextrose
(Angaben ohne Gewähr, habe das Template nicht ausprobiert.)
Im Joomla_Black-Template ist die äußere Breite mit

Code: Select all

<div id="main_outline"> .... </div>
definiert. Im CSS-File findest du dazu die folgenden Angaben

Code: Select all

#main_outline {
	width: 802px !important;
	width: 808px;
	padding: 2px;
	background-color:#ffffff;
}
Wobei sich die Breitenangabe mit !important auf Firefox/Mozilla-Browser bezieht. MSIE ignoriert das und nimmt die nächste Zeile.
Wenn du also alles breiter machen möchtest, dann ändere die Pixelwerte (px). Du kannst statt den festen px auch % angeben. Aber Achtung: Hat jemand eine sehr hohe Bildschirmauflösung, dann dehnt sich bei Prozentangaben das doch sehr weit und Textzeilen, die über eine große Breite gehen, sind sehr unangenehm zu lesen (Usability!). Fixe Breiten haben schon ihren Sinn!
An den Breiten der Module (Main menu, Umfrage, Poll) würde ich nichts ändern.
Wahrscheinlich wirst du aber im CSS noch einige Breiten ändern müssen (pathway, etc. also alles was in der Mitte breiter werden soll)
Last edited by MrDamage on Fri Jun 16, 2006 11:16 pm, edited 1 time in total.

Dextrose
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Jun 16, 2006 12:48 pm

Re: Template anpassen: Schriftröße + Breite

Post by Dextrose » Sat Jun 17, 2006 9:02 am

Danke für diese ausführliche Antwort. Wieder was gelernt. Mittlerweile habe ich auch den linken Rand auf eine Linie gebracht. ;)


Locked

Return to “Template, CSS und Designfragen 1.0.x”