Headergrafik implimentieren

Hallo liebe Wordpress-Community,

ich als absoluter Programmier-Leihe - im Elektronikbereich würde mich man wohl als elektrotechnisch unterwiesene Person (EuP) bezeichnen - hofft auf eure freundliche Untersützung...

Folgende Ausgangssituation:
Für meine Feuerwehr administriere ich den eigens angelegten Blog, um somit die Bevölkerung zu informieren. - Church von StudiPress ->http://feuerwehr-bruchkoebel.de/

Angedacht ist nun auf folgendes Template umzusteigen- iMagPress Premium Theme von Different Themes
-> http://feuerwehr-bruchkoebel.de/cms2/
Die Gründe für diesen Umstieg sind:
- Performence-Probleme des alten Templates
-die Bedienbarkeit via Touch-Device soll verbessert werden

Die Problematik / Fragestellung:
Wie bekomme ich die alte Headergrafik ( siehe erstes Template) in das neue, über die Menüleiste, implementiert ?
Das Webinterface / Menü des neuen Templates gibt es nicht her...

Sollten Detailinformationen und oder Datein benötigt werden - bitte Feedback.

Ich hoffe sehr Ihr könnt mir / uns als Feuerwehr helfen...

Liebe Grüße HACHSS

Hallo Preskopp,

ich danke dir für deine schnelle Antwort - echt TOP.

Richtig wir benutzen es nur. - schande über mein Haupt.
Auf die Antwort vom Hersteller wird noch sehnsüchtig gewartet...
Ich bezweifel jedoch, das dieser es uns kostenlos einfügen/beibringen wird...

Bestünde denn generell die Möglichkeit, eine Grafik dort einzufügen ?
Das dürfte für euch PRO´s sicherlich eine Arbeitsaufwand von 10 Minuten bedeuten, oder ?

Denn im alten Theme hatten wir es auch, nach langem basteln, hinbekommen.
Doch die Struktur der "Programmierung" scheint eine andere zu sein ?!

liebe Grüße

Hier die Antwort vom Hersteller >.< - dislike:

[FONT=arial]"Hi![/FONT][FONT=arial][/FONT]
[FONT=arial]Thanks for purchase![/FONT]
[FONT=arial][/FONT]
[FONT=arial][/FONT]
[FONT=arial]You will need to edit includes/top.php file and maybe some style files in lib/css/, but you need some html/css knowledge for that. You can also find some developers here: http://www.microlancer.com/explore/wordpress Than can do it for you.[/FONT]
[FONT=arial][/FONT]
[FONT=arial]Our support can make just small theme modifications, but this will be a bit bigger, so we can tell you just what files you will need to edit."

Nun geht meine Hoffnung wieder an euch ...
So würde es im Idealfall aussehen - wenn sich jemand findet der mir / uns helfen könnte...

[/FONT]

Hallo Presskopp,

gerade musste ich feststellen das kein Absatz mit "[COLOR=#333333]#top-bar {" in der style.css enthalten ist.
Es wäre ja auch zu genial gewesen :-)

Hier die style.css:

[/COLOR]

/*Theme Name: iMagPress Premium ThemeTheme URI: http://imagpress.diffrent-themes.com/Description: iMagPress Premium Wordpress ThemeAuthor: Different ThemesAuthor URI: http://www.diffrent-themes.com/Version: 1.0.8Tags:License: GNU General Public LicenseLicense URI: README_License.txt*/


/** Wordpress default clases */
/* =WordPress Core-------------------------------------------------------------- */.remove-br br{     display:none; }
.alignnone {    margin: 15px 15px 15px 0;}
.aligncenter,div.aligncenter {    display: block;    margin: 15px auto;}
.alignright {    float:right;    margin: 15px 0 10px 20px;}
.alignleft {    float: left;    margin: 15px 20px 10px 0;}
.aligncenter {    display: block;    margin: 15px auto;}
a img.alignright {    float: right;    margin: 15px 0 10px 20px;}
a img.alignnone {    margin: 15px 15px 15px 0;}
a img.alignleft {    float: left;    margin: 15px 20px 10px 0;}
a img.aligncenter {    display: block;    margin: 15px auto;}
.wp-caption {    background: #f5f5f5;    border: 1px solid #ddd;    max-width: 100%;    padding: 5px;    text-align: center;}
.wp-caption.alignnone {    margin: 15px 15px 15px 0;}
.wp-caption.alignleft {    margin: 15px 20px 10px 0;}
.wp-caption.alignright {    margin: 15px 0 10px 20px;}
.wp-caption img {    border: 0 none;    height: auto;    margin: 0;    max-width: 100%;    padding: 0;    width: auto;}.wp-caption p.wp-caption-text {    text-align: center;    color: #999;    font-style: italic;    font-size: 12px;    line-height: 17px;    margin: 0;    padding: 8px 0;}
ul li a i { font-style: normal; }




/* isotope transition styles */.isotope,.isotope .isotope-item {  -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;          transition-duration: 0.8s;}
.isotope {  -webkit-transition-property: height, width;     -moz-transition-property: height, width;          transition-property: height, width;}
.isotope .isotope-item {  -webkit-transition-property: -webkit-transform, opacity;     -moz-transition-property:    -moz-transform, opacity;          transition-property:         transform, opacity;}  #infscr-loading {    bottom: 18px;    font-style: normal;    font-weight: normal;    height: 60px;    left: 50%!important;    margin-left: -100px;    background-color:#FFF;    opacity:0.9;    padding-top: 10px;    position: fixed!important;    text-align: center;    z-index: 1000;    width: 200px;    -webkit-border-radius: 2px!important;    -moz-border-radius: 2px!important;    -khtml-border-radius: 2px!important;    -o-border-radius: 2px!important;    -ms-border-radius: 2px!important;    border-radius: 2px;}
#infscr-loading img {    text-align:center;    display:block;    margin: 0 auto 10px auto;}#infscr-loading em { font-size: 12px;}.sticky  {}.bypostauthor   {}.gallery-caption {}
.left-sidebar .blog-post .post-content {    margin-right: 150px;    margin-left: 0px;}.left-sidebar .blog-post .post-meta {    text-align: left;    padding-right: 0px;    padding-left: 6px;    float: right;    min-width: 130px;    background-position: left 4px;}.df-layerslider {    width: 940px!important;    height: 400px!important;;}
.df-left{    float:left!important;}.df-right{    float:right!important;}
.post-pages {  padding: 0 20px 20px 20px;}
.comments-pager {  padding: 0 20px 20px 20px;}

Da der Code zu lang ist, hier die Datein:

top.php.txt
header.php.txt
style.css.txt

Ich hoffe das man so mit diesen arbeiten kann.

Wenn ich in der top.php folgendes Einfüge:

<div id="top-bar">
background-image: url(http://static.freepik.com/fotos-kostenlos/zusammenfassung-banner-hintergrund_73585.jpg);    height: 200px;

dann sieht das Resultat wie folgt aus:

Damit wäre ich schon an der richtigen Position :-o
Jetzt fehlt nur noch die Umsetzung als Grafik...

Oder bin ich da auf dem Holzweg ? :-)

Ich habe mir nun erlaubt einen veränderten Code zu benutzen:

<div id="top-bar">
<?phpprint "<img src=\"http://www.ff-brk.de/cms2/wp-content/uploads/2014/03/HEADER.jpg\">";?>

Das Resultat:

1) Wäre das so "sauber" gecodet - auch für andere Auflösungen u.s.w. ?

2) Wie implementiere ich am besten die Sozial-Icons ?
[wie gelingt die Positionierung über der Grafik (Vordergrundebene),
sprich die Headergrafik als Backgroundgrafik anzupassen?]

3) Sonstige Verbesserungsvorschläge ?

@ Presskopp - wenn es für dich einfacher ist,
würde ich dir auch vertrauensvoll via PN, Logindaten für den Blog übersenden...

Das herauslöschen ist einfach - aber nicht die Umpositionierungen :-)

- das die Sozialicons über den Header kommen wäre auch noch eine Idee, jedoch habe ich diese bisher nicht umgesetzt bekommen...

ich vermute das diese formatierung in der style.css erfolgen muss ?
so das ich z.B. auch den Abstand zwischen Menüleiste und Headergrafik eliminert bekomme und die Sozialicons positionieren kann...?

AiAi Herr Kapitän :-)
Da ich gerade im Krankenhaus bin komme ich an die layout.css nicht heran,
doch werde die Zeit nutzen und mich belesen.

Es ist wirklich interessant, was alles möglich ist :)