News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Haben will?
Ja
Nein
Erstmal abwarten
Antworten: 9
Seite [1]
reVerB


Geekboy




Beiträge: 1237
# Thema - 18.06.2011 um 03:11 Uhr
Ich bin gerade dabei, CSP mit einem neuen Standardtheme zu versehen. Ich weiß auch, das ich nicht der erste bin. ich werde aber, wenn es fertig ist zur Verfügung stellen.

Dazu habe ich einmal 2 Fragen. Die erste lautet:
Soll es denn als Modul oder als Template hochgeladen werden?

Die 2. Frage:
ich habe einmal als Muster die News Recent einmal fertig gemacht. Darf ich einmal um meinung bitten?

Es soll folgendermaßen aussehen:
Jedes Theme bekommt einen umschließenden DIV, der als Klasse einmal contents und die 2. Klasse den Modulnamen enthält: z.B. class="contents news"

Jede News, Artikel, Download what ever bekommt ein DIV mi der Klasse entry und der eigentliche Content die Klasse entryText und ist ebenfalls ein DIV. Was für eine Überaschung ^^

Die Titelzeilen sind als Überschriften gekennzeichnet. Da H1 für die Überschrift der Webseite und H2 für die Überschrift der Unterseite dienen sollte, habe ich dafür H3 gewählt.

Formulare würde ich gerne in Fieldsets packen. ich bin am überlegen, ob ich nicht vielleicht aus der Recent das Formular pule. Da muss ich mir aber dann noch die PHP krallen. Denn da kann man ja auch einpaar über flüssige Zeilen PHP mit einsparen.

Das ganze sieht aktuell so aus:

HTML-Code:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
1. / 2. / ... 
 <div class="contents news">
    {
loop:news}
    <
div class="entry">
        <
h3>{news:news_headline}</h3>
        <
div class="fLeft subInfos">{news:news_time}<br />{news:comments_link} ({news:comments_count})</div>
        <
div class="fRight subInfos">Kategorie:  {news:categories_name}<br />Erstellt von: {news:users_link}</div>
        <
div class="entryText">{if:catimg}<img class="fRight" src="{page:path}{news:url_catimg}" alt="" />{stop:catimg}
            {
news:news_readmore}{news:news_text}
            {if:
readmore}
            <
br /><br /><class="readMore" href="{url:news_view:id={news:news_id}}">{lang:readmore_go}</a>
            {
stop:readmore}
            <
div class="cCenter">{news:pictures}</div>
            {if:
show}
            <
div>
            {
lang:mirror}: {loop:mirror}{mirror:news_mirror}{mirror:dot}{stop:mirror}
            </
div>
            {
stop:show}
        </
div>
    </
div>
    {
stop:news}

    <
form method="post" action="{url:news_recent}">
    <
fieldset>
      <
legend class="headLegends">Forum - {lang:recent}</legend>
      
Kategorie:  {cats:dropdown}
      <
input type="submit" name="submit" value="Anzeigen" />
      <
hr />
      <
div class="fLeft"><a href="{url:news_list}">Liste</a></div>
      <
div class="fRight">{head:pages}</div>
    </
fieldset>
    </
form>
</
div>


Das CSS sieht so aus:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
1. / 2. / ... 
 .fLeft floatlefttext-alignleft;}
.
fRight floatrighttext-alignright; }
.
cCenter text-aligncenter; }
.
headLegends font-weightboldfont-size120%; }
.
entry floatleftmargin-bottom15px; }
.
entryText floatleftmargin5px;}
.
subInfos font-size80%; }
.
contents margin5px; }
fieldset border1px solid #000000; }
legend border1px solid #000000; padding: 3px; }


Ich finde es auf die Art und Weise alleine nur durch die CSS leicht anpassbar.
Inaktiv
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
# Antwort: 1 - 18.06.2011 um 05:04 Uhr
Irgendwas scheint da noch nicht ganz zu passen.
Habe einen verzerrten Content, oder besser es ragt was (board_navlist) in das Control Panel hinein.

Wofür soll das denn dann sein ?
Soll es eine leichtere Anpassbarkeit bieten ?


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
# Antwort: 2 - 18.06.2011 um 05:10 Uhr
Meine ersten Gedanken dazu:
- leider hast du Klassen wie fLeft, fRight und cCenter übernommen, die in Clansphere schon extrem stören, weil sie gegen die Trennung von markup und style streben.
- "<br /><br />"... keine Sinnvollen Tags. Da solltest du lieber Parahraphs verwenden.
- Wie man die H1-6-Tags wählt hängt zwar stark von html5 oder html4/xhtml ab. Allerdings macht es wenig Sinn h1 als Titel der Homepage zu benutzen. Es hat sich bewährt h1 für die Wichtigste Überschrift im Content-Bereich zu benutzen.
- Überhaupt könntest du noch intensiver differenziertes Markup benutzen. z.B. bei "Kategorie: {news:categories_name}", wäre eine Definitions-Liste (dl, dt, dd) sinnvoll
- Zu der Vergabe von Klassen fällt mir ein, dass sich der camelCaseStyle mMn relativ schlecht lesen lässt und dass es vllt lohnt, wenn du dir mal Konzepte zum objektorientierten CSS anschaust

...nur mal so ein paar Anregungen....
Wenn du dir schon die Arbeit machst, macht es vllt Sinn einige Fehler nicht aus versehen gleich beizubehalten.


------------------
www.laszlokorte.de

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
# Antwort: 3 - 18.06.2011 um 10:40 Uhr
Vielen vielen dank für das Feedback.

@Tress13:
Dann stimmt eher etwas am Template nicht. Beim Standardtemplate passt es astrein. Bei meinen Templates passt es ebenfalls astrein. Der Fehler liegt daran, weil die Elemente keine feste Breite bekommen. Dadurch werden sie automatisch auf 100% gesetzt. So wird es aber bei den CMS-Systemen wie Contao oder Joomla gemacht. Das ist schon richtig so ^^

Es soll in erster Linie die Anzahl an Layouttabellen minimieren. Außerdem soll es leicht über die CSS anpassbar sein.

@SCHIRI:
Zu 1: Ich versuche es gerade zu verstehen, was du damit genau meinst. Liegt es an der Benennung der Klassen oder am Einsatz der Klassen bzw. ihrer Aufgabe? Denn wenn man von Trennung spricht sehe ich immer nur die 2 Dateien HTML und CSS und dann ist es für mich getrennt. Sollte ich die Aufgabe lieber mit Inline-Styles machen (was ich vermeiden wollte)?

Zu 2: BR gegen P austauschen kann ich machen.

Zu 3: Mir hat das mal einer erklärt, das man die Überschriften so nutzt. Und daran wollte ich mich dann halt orientieren. Es soll übrigens XHTML werden und nicht HTML5. Also sollte ich lieber H1 dafür nehmen?

Zu 4: Ach ja stimmt. Die Diflists gibts ja auch noch. Coole Idee. Mach ich.

Zu 5: Das camelCase liegt daran, weil ich in den letzten Monaten mehr Programmiert als Markups/CSS geschrieben habe. Hab ich mir blöderweise angewöhnt. Ich lass es ja schon ^^

Aus diesem Grund frage ich nach. Damit ich es nicht umsonst mache ^^
Danke schon einmal für das Feedback

ERWEITERUNG: Wenn ich nach OOCSS suche bekomme ich immer nur das Konzept von Sullivan. Da es sich hier um ein freies CMS handelt und überwiegend Einzelpersonen an den Designs arbeiten, lehne ih das Konzept strikt ab. Ich bevorzuge deutlich die Kaskade, da es einem die Möglichkeit gibt, für bestimmte Verschachtelungen schnell ein eigenes Style anzulegen. Durch fast-eindeutige Namen ist es schnell verständlich. Außerdem sorgt das OOCSS dafür, für fast jedes Element eine Klasse zuzuweisen, damit sich diese alle einzeln anpassen lassen. Da finde ich die Kaskade sinnvoller und vor allem auch logischer und erzeugt weniger HTML-Content.


Zuletzt editiert von reVerB am 18.06.2011 um 11:09 Uhr (1x Editiert)
Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
# Antwort: 4 - 18.06.2011 um 12:01 Uhr
http://lesscss.org/
das ist btw laszlos neue liebe

hatte sowas wie du ja auch mal angefangen, allerdings in html5
habs dann aber irgendwann gelassen weil es zuviel aufwand für zu wenig nutzen war :/


Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
# Antwort: 5 - 18.06.2011 um 12:29 Uhr
Mit JS? Sorry aber das auf keinen Fall. Nicht für ein optionales Standard-Theme


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
# Antwort: 6 - 18.06.2011 um 13:27 Uhr
less kannte ich noch garnicht aber ich finde das ist css für prgrammierer :-) gefällt mir, aber mit steigender logik steigt natürlich auch die warscheinlichkeit das es der kunde nicht versteht :-)


zum thema:

ich hatte das containerabierende themeing auch mal angefangen für clansphere, habs dann aber verworfen ;-) wenn die themes aussehen sollen wie die jetzigen ist es einfach unsinnig dafür container zu nehmen, falls du aber gleichzeitig ein neukonstruktion der themes anstrebst, wünsche ich dir viel erfolg, und hoffe du lässt dich nicht von der vielen arbeit abschrecken ;-)


------------------



Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
# Antwort: 7 - 18.06.2011 um 13:37 Uhr
Ich plane ein komplett neues Theme mit neuen CSS-Klassen und werde es Modul für Modul machen. Ich werde es durchziehen, da es mich mit den ganzen Tabellen einfach nur noch ankotzt. Man gibt sich viel mühe, das Template ohne Tabellen zu machen und dann schmeißen die Themes die Seite wieder mit Tabellen voll. Ich will auch die Standard-CSS Klassen übersichtlicher und logischer gestalten und mit geschickten Klassen eine gute Grundlage für Kaskadenanpassungen liefern, ohne die TPL-Dateien öffnen zu müssen (Es sei denn man will es ^^)

Mal sehen wie lange ich brauche. Aber vielen Dank


Inaktiv
|
cbw.lava


Rock the board





Beiträge: 63
# Antwort: 8 - 19.06.2011 um 20:25 Uhr
Zuerst mal meinen Respekt, das Du das tatsächlich angehst Hatte mir das auch mal überlegt für die Page meines Clans, aber dann aufgrund des doch hohen Arbeitsaufwands/Zeitmangels wieder verworfen (bzw. ich habe mir ein Skript geschrieben, das aus dem Standard-Theme ein geringfügig semantisch besseres HTML erstellt, durch Entfernen diverser Attribute und Tags bzw. Ersetzung derselben, allerdings bei Beibehaltung der Layouttabellen, also lange nicht so konsequent wie das, was Du vorhast). Ok noch etwas Feedback:

 
1.
2.
3.
1. / 2. / ... 
  .fLeft floatlefttext-alignleft;}
.
fRight floatrighttext-alignright; }
.
cCenter text-aligncenter; }

Ich denke, was Schiri hier meinte ist sowohl der Einsatz als auch der Name der Klassen. Beispiel:
 
1.
1. / 2. / ... 
 <div class="fLeft subInfos">{news:news_time}<br />{news:comments_link} ({news:comments_count})</div>

Hier würde ich das fLeft komplett weglassen und das text-align über die Klasse subInfos festlegen (wobei in diesem speziellen Fall 'left' ja eh der default wäre). Für fRight/cCenter gilt denke ich dasselbe.
Andere Punkte die ich auch gut finde hat Schiri schon genannt, darum hierzu kein gesondertes Feedback.
Objektorientiertes CSS würde ich am Anfang noch weglassen, auch wenn man sich dadurch evtl. die Arbeit erleichtern kann. Für spätere Optimierung aber durchaus interessant (aber nicht mit client-seitigem JS – gibt ja auch noch CSScaffold, Sass etc.).
Achja wenn es XHTML wird wäre ein Strict-Doctype schön.

Viel Erfolg!


Inaktiv
|
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
# Antwort: 9 - 01.07.2011 um 03:46 Uhr
Oh, ganz vergessen mal wieder in den Thread hier zu schauen....

Zu den Klassennamen - lava hats ja schon gesagt: eine Klasse mit dem Namen "fLeft" impliziert ja schon so etwas wie float:left; oder text-align:left;
Wenn man aber später möchte, dass die subinfos nach rechts gefloatet sind, müsst man entweder:

.subinfos { float:right; } schreiben und wäre genau damit im Konflikt zwischen

.subinfos { float:right; }
und
.fleft { float:left; }

und müsste man subinfos{} entweder mit !important oder durch das präzisieren des Selektors (.subinfos.fleft {} ) eine höhere Wertigkeit verleihen womit man dann genau da steht, wo oopcss versucht gegen zu wirken.

Oder man änder .fleft{float:left} einfach in .fleft{float:right} wodurch man dann das ganze Konzept sprengt.
Daher sollte man direkt auf Klassen-Namen, die einen Style implizieren verzichten.

Das genau Gegenteil davon wäre, jedem Element immer genau die Klasse zu geben, die beschreibt was das Element beinhaltet:
class="news_list"
class="news_item"
class="news_title"
class="news_subinfos_autor_name"

Dann wiederum hat man das Problem, dass der "news_title" genau so aussehen soll, wie der "user_title" und der "thread_title" und alle anderen Überschriften auf der Seite.

Man endet also bei einer solchen Css:

.user_title, .news_title, .thread_title, .article_title, .category_title {
font-size: 1.2em;
}

Sobald ein neues Modul hinzukommt, muss quasi auch die css darum erweitert werden. Ebenfalls nicht Sinn der Sache.

Man könnte anstelle der ganzen Title-Klassen natürlich auch h1 { ... } oder so stylen. Problem ist dann nur, dass du den Style direkt an das verwendete Markup koppelst. Wenn du also später den gesamten Seiteneinhalte eine Hirarchiestufe tiefer verlagerst und aus einem h1 ein h2, aus einem h2 ein h3 und so weiter wird (oder wenn du ul in ol änderst, div in p, p in div, a in span) (Gründe erstmal egal, passiert nunmal schnell, wenn man einen Link nicht mehr verlinkt haben will, eine Liste doch lieber sortiert haben will oder merkt, dass ein Block Text doch lieber in mehrere Absätze geteilt werden soll, die dann in einen Div zusammengefasst werden), dann gehen alle (zumindest einige) Styles kaput.

Der letzte Schritt wäre dann doch wieder Klassen zu benutzen, diese aber generischer zu benennen. z.B. nur eine Klasse title für alle Seitentitel, eine Klasse "item_list" für Listen Darstellungen von sowohl Usern, als auch Threads oder Artikeln. Wie man diese Klassen dann genau weiter benennt hängt von dem vorgesehenen Design ab.
Und das ganze würde schon wieder sehr in Richtung oocss gehen.

Ich bin selber aus denen von dir schon genannten Gründen nicht 100%ig sicher, ob oocss hier wirklich der richtige Weg ist, aber nach den oben genannten überlegungen würde ich doch sehr dazu tendieren.

PS: Ich bin gar nicht mehr soo der Fan von Lesscss, möchte aber anmerken, dass es auch davon genau wie bei Sass einen serverseitigen Converter gibt.


------------------
www.laszlokorte.de

Zuletzt editiert von SCHIRI ClanSphere Team am 01.07.2011 um 03:47 Uhr (2x Editiert)
Inaktiv
|
Antworten: 9
Seite [1]


Sie müssen sich registrieren, um zu antworten.


ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo