Topic Closed
Marick2k9
24 Posts

hallo zusammen, wäre einer von euch so nett und könnte mir etwas genauer erklären wie ich aus einem html style einen neuen style für gpeasy machen kann. Am besten auf deutsch da ich es in englisch schon nicht verstehe.

 

Hi together, one of you would be so kind and could something more accurately explain to me how I style a new from a html style for gpeasy can make. Best on german because I it in English already do not understand.

 

MfG Marick2k9

7 years ago#7483

juergen
1.5K Posts
61K Downloads
16 Plugins

Hallo Marick,

meinst du, aus einem Inline-Style, zB <a href="http://bla.com" style="color:#123456;">Bla</a> eine CSS-Klasse machen ?

das geht am besten, indem du im Admin-Menü -> Aussehen -> Dieses Layout bearbeiten klickst.
Dann kommt links neben dem Layout ein Editorfenster, wo du CSS oder LESS notieren kannst, zB dieses:

Diese CSS Klasse kannst du dann im Content verwenden. Sie gilt innerhalb des verwendeten Layouts.

Hier habe ich die Klasse für Anchor-Tags <a> notiert. In diesem Fall kann man die Klasse im CKeditor im Erweitert-Tag eines Links reinschreiben:

Bei anderen Elementen, zB <p> musst du ggf. in dern Quelltext gehen und die Klasse  händisch hineinschreiben.

Für Abschnitte (Sections) gibts dafür im Section Manager den "Options" Button.

 

 

Edited: 7 years ago#7486

Marick2k9
24 Posts

Hallo Jürgen,

 

danke schon mal für Deine Antwort, was ich meinte ist ein fertiges html layout anpassen an gpeasy.

Ich würde mir gerne dieses layout herunterladen und halt mit gpeasy verwenden.

Hab es schon nach der Anleitung hier auf der Seite probiert aber da mein englisch unter aller ... ist bekomme ich es einfach nicht hin :(

7 years ago#7487

juergen
1.5K Posts
61K Downloads
16 Plugins

Ok, naja, das ist allerdings schon etwas anspruchsvoller. Das wird in einem einzelnen Forumpost nicht gehn:-)

Undiskrete Frage: Wie gut kennst du dich mit HTML, CSS und jQuery aus? Und PHP?

7 years ago#7488

Marick2k9
24 Posts

Html und CSS geht würde ich sagen also ich bekomme einen Style von 0 an selber programmiert.
jQuery und PHP wird eine harte Nuss :) da müsste ich auf google zurückgreifen.

7 years ago#7489

juergen
1.5K Posts
61K Downloads
16 Plugins
OK, dann schaun wir mal, wie nahe wir dem ganzen kommen. Die Seitenanimationen werden so nicht gehen. gpEays lädt einzelne Seiten - das Template ist eigentlich ein One-Pager mit Ein/Ausblendeffekten. Die wird's so nicht geben.

Ich probier mal, das Theme grundsätzlich zu gpEasyifzieren.... poste es dann hier. Kann ein wenig dauern.
7 years ago#7490

Marick2k9
24 Posts

Du bist super! 
Die ein/Ausblendeffekte sind egal der Style an sich ist cool gemacht.
Es wäre der Hit wenn du es schaffst es gpEasy tauglich zu machen.
Und vielleicht mir dann sagen könntest wie ich so etwas dann auch in Zukunft allein hinbekommen kann.

schon mal 1000 dank für Deine mühe 

7 years ago#7491

juergen
1.5K Posts
61K Downloads
16 Plugins

Ok, hier mal eine erste Version: templatemo_410_circle.zip

Installier es mal und schau dir an, was alles anders ist im Vergleich zum Originaldownload (es ist einiges anders).

Demo-Link

Die Hintergrund-Sldeshow habe ich mit einem unveröffentlichten Plugin von mir gemacht.
Werde ich später verlinken oder posten.
Die Pfeile zum Bildwechseln habe ich noch nicht eingebaut.

Du brauchst auch das Font Awesome Plugin

Die Sections/Wrappers sehen so aus:

Erste Text-Section hat die Klassen "toggle-content text-center"

2 Wrapper hat "row"

Die Wrapper darin jeweils "col-md-4 col-sm-4" und die Text-Sections "member-item"

Muss jetzt dringend weg, später dazu mehr.

7 years ago#7492

Marick2k9
24 Posts
Der Hammer! Ist jetzt schon perfekt nur schade das zb. beim Kontaktfeld der Text nicht weis hinterlegt ist. Hab mir mal die template.php von dir angesehen aber so ganz schlau werde ich da nicht raus. Weil ich hab das sonst nach einer Anleitung hier aus dem Forum mal selber probiert aber da klappte leider garnichts :(
7 years ago#7493

juergen
1.5K Posts
61K Downloads
16 Plugins

Hab mal die Demo-Seite aktualisiert.

Kontaktformular: Ja das ist das Standard Kontaktformular von gpEasy. Da kann man nicht alles leicht ändern. Es gibt aber ein Plugin -> Free Mail Form, wo man volle Gestaltungsfreiheit hat und die Felder und Buttons inkl. HTML5 placeholder-Attributen so nachbaen kann, wie im Originaltemplate.

Hab mir mal die template.php von dir angesehen aber so ganz schlau werde ich da nicht raus.

Naja, ist auch klar, dass du das nicht alles gleich verstehst. Hat bei mir auch eine Weile gebraucht.

Dateistruktur:

[..] themes                            <= themes Verzeichnis
  templatemo_410_circle     <= Plugin-Verzeichnis, kann man nennen wie man will
    ├ Addon.ini                      <= Die muss es geben und darin Addon_Name, Addon_Version und min_gpeasy_version.
    │                                            Die mit ; auskommmentierten Zeilen sind optional.
    ├ screenshot.png              <= Der wird dann als Vorschau in der Themes-Verwaltung angezeigt,
    │                                            am besten diese Größe (370x250px) verwenden.
    ├ settings.php                   <= $GP_GETALLGADGETS = true; bedeutet, dass alle installierten Plugin-Gadgets angezeigt werden
    │                                             und man sie erntfernen bzw. verschieben muss, wo man sie braucht.
    │                                             gpOutput::Area(...) Damit kann man gewisse Bereiche vordefinieren - vorerst nicht so wichtig.
    ├ template.php                 <= Da steht die Seitenstruktur drin und wo welche automatisch generierten Bereich ausgegeben werden
    │                                             (Menüs, Content, Sidebar, Footer, Admin-Links, etc.)
    ├ js                                   <= Hier sind unsereTheme JavaScript Dateien drin. Muss es nicth unbedingt geben oder so heißen
    └ standard                        <= Hier ist das Standard-Layout drin. Ein Theme kann mehrere vordefinierte Layouts haben, die aber
                                                  alle auf der selben template.php Datei basieren.

"standard" Verzeichnis:
Hier muss es entweder eine style.css oder in unserem Fall eine style.less Datei geben. In unserem Fall werden darin gleich mal die Bootstrap3 Styles inkluidiert., dann kommt der Rest. Du musst nicht LESS notieren, es kann auch ganz normales CSS vorkommen. Ich habe hier die einzelnen Sylesheets des templatemo_410_circle Originalthemes zusammengefasst, außer dem normalize.min.css, weil das als erstes geladen werden muss.
Font Awesome habe ich hier auch herausgenommen, weil das über das FA-Plugin geladen wird.

"js" Verzeichnis:
Hier sind alle JavaScript files drin, die wir brauchen, außer jener, die gpEasy schon selbst bereitstellt, oder die ggf. von anderen Plugins kommen - wie zB hier jQuery und Bootstrap.

 

template.php:
Diese Datei besteht zum Teil aus Elementen der index.html des templatemo_410_circle Themes, allerdings natürlich ohne Content. Im Head-Bereich ist aber einiges anders. Auch hier stehen nur jene Anweisungen fix drin, die NICHT von gpEasy kommen, wie der OpenSans-Webfont von Google fonts, das normalize.min.css und bei als Scripts Modernizr, jquery.easing und eben auch plugins.js und main.js, wo Theme-spezifische Funktionen drin sind.

Alle Bereiche innerhalb von <?php   ...  ?> sind Anweisungen, die vom Server ausgeführt werden und bestimmte Outputs haben:

  • common::LoadComponents('bootstrap3-all'); lädt z.B. alle Bootstrap3 Komponenten.
  • common::AddColorBox(); ermöglicht, die in gpEasy integrierte Lightbox auch auf Seiten zu verwenden, wo Colorbox sonst nicht gebraucht wird.
  • gpOutput::GetHead(); lädt alle Komponenten des Headers, die von gpEasy gesteuert werden. Das sind zB die Seitentitel <title>, meta keyword, die meta description, das verwendete Layout-Stylesheet und einige andere css- und scripts.
  • gpOutput::Get("Extra","Header"); lädt in unserem Fall den Logoblock, der für den Admin editiertbar ist.
  • gpOutput::Get('TopTwoMenu'); lädt das Hauptmenü (in dem Fall erste und zweite Hierrchieebene)
  • $page->GetContent(); hier wird der jeweilige Seiteninhalt geladen.

weiter unten gibts dann noch Aufrufe im Footerbereich.

Der Rest ist, wie du siehst, HTML. Grundsätzlich vollkommen frei gestaltbar. In unserem Fall kommt das weitgehend aus dem templatemo_410_circle-index.html.
Weil das templatemo_410_circle Theme auf Bootstrap basiert, gibt es eine Menge bootstrap-typische Elemente mit Klassennamen wie container-fluid, row, col-md-12 usw. Selbstgemachte Themes können da auch wesentlich einfacher sein. Diese hat ein eher komplexes Markup.

Wenn du gpEasy Themes selbst machen willst, empfehle ich dir übrigens, mit einem einfacheren Theme zu beginnen und es umzubauen. Auch besser vorerst mal ohne LESS, weil das Kompilieren von LESS zu CSS immer einige Sekunden dauert und das Resultat viel schwerer zu debuggen ist, als normales CSS.
Bootstrap CSS ist extrem umfangreich.

Das html5 Theme von Paolo Nunes (AKA syndicatefx) ist dafür zB gut geeignet.

So das wars erst mal für heute. Ich hoffe es hilft dir schon weiter.

PS: Meine Background-Slideshow Plugin muss ich erst ein wenig aufräumen bevor ich es veröffentlichen kann. Da gibt es ein paar Optionen drin, die in Wirklichkeit gar nichts tun. Die müssen raus sonst ist das Support Forum ruckzuck randvoll mit Anfragen :-)

Edited: 7 years ago#7495

Marick2k9
24 Posts
Echt krass was du so kannst ich freue mich schon auf das plugin und auf deine weiteren arbeiten! Ganz großen Respekt
7 years ago#7502

Marick2k9
24 Posts

Eine Frage hab ich dazu :

Erste Text-Section hat die Klassen "toggle-content text-center"

2 Wrapper hat "row"

Die Wrapper darin jeweils "col-md-4 col-sm-4" und die Text-Sections "member-item"

woher weis ich was ich dort alles einstellen kann? Ich weis das klingt jetzt doof aber irgendwie verstehe ich das alles nicht.

7 years ago#7515

juergen
1.5K Posts
61K Downloads
16 Plugins

Ich weis das klingt jetzt doof aber irgendwie verstehe ich das alles nicht.

Nein, klingt nicht doof. Das Problem ist durchaus bekannt und tatsächlich versuchen Josh und die gpEasy-Community gerade, auch dafür eine gute Lösung zu finden, zuindest für Anwender, die vom Coden nichts verstehen. In deinem Fall, vor allem , wenn du selbst Themes bauen oder adaptieren lernen willst, wirst du nicht drunherum kommen, es zu verstehen. Es muss aber nicht so kompliziert sein, wie bei diesem Theme.

Konkret, in unseren Fall, kommen die verfügbaren Klassennamen aus 2 Quellen:

  • Bootstrap bzw. das Bootstrap Grid System
  • Das heruntergeladene Theme bzw. dessen Stylesheets.

Themes, die auf Bootstrap aufbauen, verwenden meist Bootstrap-Klassen für den grundsätzlichen Layout-Aufbau und eigene Klassen/Styles für die Optik der Seite. Ist hier auch so.

Hier ein Link zu einer Illustration des Bootstrap Grids: http://getbootstrap.com/css/#grid-example-basic

row, container, container-fluid, col-md-4 usw. - das sind alles Bootstrap-Klassen

toggle-content, text-center, member-item sind eigene Klassen der Theme-Designer

Falls du nicht die Entwicklertools deines Webbrowsers verwenendest, ist das ein guter Startpunkt, es zu tun.
Im Prinzip haben alle neuen Browser ganz gute Entwicklertools, ich bevorzuge Firefox und das Firebug-Plugin. Aber auch Chrome, IE und Safari sind da echt ok. Auch die in Firefox integrierten Tools sind gut. Firebug ist insgesamt das leistungsfähigste Tool.

Du kannst zB im Live-Demo des Templates hier http://www.templatemo.com/templates/templatemo_410_circle/ einfach Elemente rechtsklicken->"Element untersuchen" oder "Mit Firebug untersuchen...", wenn du den verwendest.

Dann siehst du, welche Klassen die Designer des Themes verwendet haben und auch welche/wie viele Wrapperelemente dafür gebraucht werden.
Diese Strukturen musst du dann mit dem Abschnitte Verwalten Tool nachbauen und den Wrappern und Sections die entsprechenden Klassennamen geben

 

 

 

 

 

Edited: 7 years ago#7516

juergen
1.5K Posts
61K Downloads
16 Plugins

Here ist the Background Slideshow Plugin: Background_Slideshow02a.zip

***
NOTE FOR EVERYONE WHO WANTS TO USE THIS PLUGIN:
Background Slideshow is not ready for a release. It has some glitches and does not always work out-of-the-box.
It won't break your website but may perform lousy in some setups ;)
It has 2 preset Slideshows that will get assigned to the Home and About pages by default.
There is a considerable amount of configuration options. Most but not all work.
Do *NOT* use Render Slideshow Method -> server-side(PHP) in Configuration->Global Options, it most likely will cause hassle.
I will try to release a more reliable version some time.

edit:/  The minicolors.js plugin used to pick tint colors is not compatible with gpEasy 4.4 jQuery version and will cause JS errors. Therefore the tint feature is currently not usable in gpEasy 4.4+
I just fixed this one. Just download again if you have the broken version.
***

 

@ Marick:

Installier es mal und schau, ob du damit klar kommst.

Diese Codelines müssen in die /themes/templatemo_410_circle/standard/style.less Datei des Themes eingefügt werden:

/* BACKGROUND SLIDESHOW */

.gpE_BGSS_CurrentSlide, .gpE_BGSS_Slash, .gpE_BGSS_SlideCount {
display:none;
}

a.gpE_BGSS_PrevSlide {
position: absolute;
right: 40px;
top: 0;
}

a.gpE_BGSS_NextSlide {
position: absolute;
top: 41px;
right: 40px;
}

a.gpE_BGSS_PrevSlide,
a.gpE_BGSS_NextSlide {
width: 40px;
height: 40px;
background-color: #d8aa46;
color: white!important;
opacity: 1 !important;
cursor: pointer;
text-align: center;
line-height: 36px;
font-size: 24px;
}

Weiters musst du über "dieses Layout verwalten" den "Background Slideshow Navigation"-Gadget in die Extra Area unterhalb des Menüs ziehen, damit die Pfeilbuttons an der richtigen Stelle rendern.

Die Hintergrundbilder für die Slideshow musst du aus dem original Theme nehmen und erstmal über die Dateiverwaltung hochladen. Dann kannst du sie im "Manage Slideshow(s)" Adminbereich verwenden.

Edited: 7 years ago#7517

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in Tórshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register