Grafik in der linken oberen Ecke platzieren? Wie geht das?

Paddy_Ger

Zunächst hallo an alle und schonmal herzlichen Dank für jegliche Hilfe, die mir hier möglicherweise zuteil wird.

Ich schreibe jetzt schon eine Weile mein WordPress Blog und bin eigentlich auch sehr zufrieden. Ich selbst habe von Progammierung nicht so wahnsinnig viel Ahnung und um ehrlich zu sein, habe ich auch nicht die Lust mich da so wahnsinnig tief einzuarbeiten. Nun ist es so, dass ich ein Template benutze, was mir grundsätzlich sehr gut gefällt, nämlich HemingwayEx. Nun möchte ich das Template in einem Punkt anpassen:

In der oberen linken Ecke des Blogs, kurz vor dem Blognamen und der Blogbeschreibung, soll ein kleines Logo angezeigt werden. Wenn ihr dem o.a. Link folgt, gibt es unten ein paar Screenshots. Mein Logo soll also kurz vor dem Schriftzug "HemingwayEx | A simple extension of Hemingway" angezeigt werden. Von der Höhe des Logos würde ich es so einrichten, dass es mit der orangenen Linie abschließt.

Das wäre eigentlich auch schon alles. Klingt simpel, ist aber für jemanden wie mich, mit wenig Programmierkenntnissen, nahzu unlösbar. Ich wäre euch daher sehr danbar wenn mir jemand sagen könnte, welchen Code ich wo einfügen muss. Wenn noch nähere Infos benötigt werden (z.B. heaqder.php vielleicht?) liefere ich die natürlich gerne noch nach.

Vielen dank schonmal an alle helfenden Hände.

Gruß
Frank

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Dann wollen wir es doch erst mal auch relativ einfach halten. Guck mal in deine style.css und such da nach #header (ca. Linie 121). Dort ist der Hintergrund (background) für den Header bestimmt. Da brauchst du dann eigentlich nur noch das Bild und die Position des Bildes bestimmen:

Code

#header {
background:#000000 [COLOR=Red]url(http://www.xxxxxxxx.com/blog/wp-includes/images/xxxxxxx.jpg)[/COLOR] [COLOR=Red]no-repeat[/COLOR] scroll [COLOR=Red]70px center[/COLOR];
}

flobster

Ein Screenshot hilft leider gar nicht, die HTML bzw. CSS Struktur zu untersuchen. Ein "lebendiges" Beispiel wäre da schon eher angebracht!

Paddy_Ger

Zitat von maxe
Dann wollen wir es doch erst mal auch relativ einfach halten. Guck mal in deine style.css und such da nach #header (ca. Linie 121). Dort ist der Hintergrund (background) für den Header bestimmt. Da brauchst du dann eigentlich nur noch das Bild und die Position des Bildes bestimmen:
Code
#header {
background:#000000 [COLOR=Red]url(http://www.xxxxxxxx.com/blog/wp-includes/images/xxxxxxx.jpg)[/COLOR] [COLOR=Red]no-repeat[/COLOR] scroll [COLOR=Red]70px center[/COLOR];
}

Wow. Das geht ja schnell hier. Die Lösung hört sich soweit ganz einfach an. Leider bin ich scheinbar zu doof die Stelle zu finden. Ich habe die header.php nach dem Stichwort "background" durchsucht, aber leider nicht gefunden. Ich post den Inhalt der header.php einfach mal. Vielleicht bin ich wirklich zu dämlich dafür.

Schonmal danke für die Hilfe.

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


<title><?php wp_title("&bull;",true,"right"); ?> <?php if ( is_single() ) { ?> Blog Archive &bull; <?php } ?><?php bloginfo('name'); ?></title>


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />


<?php
    global $hemingwayEx, $hemingwayEx_options;
    if ($hemingwayEx->style != 'none') :
?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/<?php echo $hemingwayEx->style ?>" type="text/css" media="screen" />


<?php endif; ?>


<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php $hem_js_loc = get_option('siteurl') . '/wp-content/themes/' . get_template() . '/admin/js/';
        $wp_js_loc  = get_option('siteurl') . '/wp-includes/js/scriptaculous/';?>


<script type="text/javascript" src="<?php echo $wp_js_loc; ?>prototype.js"></script>
<script type="text/javascript" src="<?php echo $wp_js_loc; ?>effects.js"></script>
<script type="text/javascript" src="<?php echo $hem_js_loc; ?>slide.js"></script>
<script type="text/javascript" src="<?php echo $hem_js_loc; ?>textsize.js"></script>


<?php wp_head(); ?>
</head>
<body>
    <div id="header">
        <div class="inside">
            <div id="utilities">
                <div id="search">
                    <form method="get" id="sform" action="<?php bloginfo('home'); ?>/">
                         <div class="searchimg"></div>
                        <input type="text" id="q" value="<?php echo wp_specialchars($s, 1); ?>" name="s" size="15" />
                    </form>
                </div>
                <?php if ($hemingwayEx_options['font_resizer'] == 1) { ?>
                    <div id="textsize">
                        <?php _e('Font:','hemingwayex') ?> 
                            <a href="#" title="<?php _e('Increase size','hemingwayex') ?>" onclick="changeFontSize(1);return false;">A+</a>&nbsp;&nbsp;
                            <a href="#" title="<?php _e('Decrease size','hemingwayex') ?>" onclick="changeFontSize(-1);return false;">A-</a>&nbsp;&nbsp;
                            <a href="#" title="<?php _e('Revert styles to default','hemingwayex') ?>" onclick="resetFontSize(); return false;">A</a>
                    </div>
                <?php } ?>
            </div>
            <h2><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h2>
            <p class="description"><?php bloginfo('description'); ?></p>
        </div>
    </div>
    <!-- [END] #header -->
    
    <div id="navigation">
        <div class="inside">
            <ul class="left">
                <li <?php if(is_home()) { echo 'class="current_page_item"';} ?>><a href="<?php bloginfo('siteurl'); ?>"><?php _e('Home','hemingwayex') ?></a></li>
                <?php wp_list_pages('title_li=&depth=1'); ?>
            </ul>
            <?php if ($hemingwayEx_options['slidebar_enabled'] == 1){ ?>
                <div class="right" id="silderButton">
                    <a class="silderButtonNav" id="openSlidebar" href="#" onclick="openNav();return false;" title="<?php _e('Open Navigation','hemingwayex') ?>"><?php _e('Open Navigation','hemingwayex') ?></a> 
                    <a class="silderButtonNav" id="closeSlidebar" href="#" onclick="closeNav();return false;" title="<?php _e('Close Navigation','hemingwayex') ?>" style="display:none;"><?php _e('Close navigation','hemingwayex') ?></a>
                </div>
            <?php } ?>
        </div>
    </div>
    <!-- [END] #menu -->
    
    <div class="clear" >&nbsp;</div>
    <?php include (TEMPLATEPATH . '/dynamic_slidebar.php'); ?>

Alles anzeigen

Gruß
Frank

jottlieb

maxe hat doch ganz klar gesagt, dass du in der Datei style.css die Änderung machen musst.

maxe

Danke jottlieb ... ich fühl mich heute soooo missverstanden. Bitte ein bisschen Mittleid wenn ihr Zeit habt :(

Paddy_Ger

Zitat von jottlieb

maxe hat doch ganz klar gesagt, dass du in der Datei style.css die Änderung machen musst.

Oh. In der tat. Das hat er. Sorry.

Zunächst hat es nicht funktioniert. Das lag aber daran, dass man das Theme zwischen schwarzem und weißem Hintergrund umschalten kann. Schalte ich jetzt auf "Standard", also schwarz, wird es angezeigt. Schalte ich auf weiß, ist es nicht da. Habt ihr eine Idee was ich da noch umstellen muss, damit das Logo bei der Nicht-Standardeinstellung erscheint. Ich würde den Hintergrund nämlich gerne weiß belassen.

Gruß
Frank

maxe

Dann gib mal einen Link zu deiner Site.

Paddy_Ger

Zitat von maxe

Dann gib mal einen Link zu deiner Site.

Galgenberg

Nicht wundern. Ist noch im Aufbau.

Gruß
Frank

Edit: Was mir gerade auffällt: Der orange Balken ist jetzt irgendwie abgeschnitten :-?

Paddy_Ger

Hmm. Es gibt noch eine white.css. Dort habe ich es ebenfalls geändert. Allerdings erscheint das Bild jetzt zweimal. Einmal oben (wo es ja auch hingehört) und einmal ein paar cm weiter unten. Daran hat sich auch nichts geändert, als ich es aus der style.css wieder entfernt habe.

Hier mal die white.css:

Code

body, #primary{
    color:#444;
}
#header, #primary{
    background:#FFFFFF url(http://www.galgenberg.eu/blog/wp-includes/images/galgenberg3.JPG) no-repeat scroll 70px center;
}
div#header h2 a:hover{ 
    text-decoration:none; 
    color:#666;
}
a:hover{
    color:#666;
    text-decoration:none;
}
* html a:hover{
    color:#666;
    text-decoration:none;
}
#secondary{
    background:#E5E5E5;
}
.abt-this-page{
    color:#333;
}
body{
    background:#E5E5E5;
}
#navigation {
    background:#000 url(white/navigation.png) top repeat-x;
    display:block;
    height:25px;
}
.ancillary{
    border-top:1px solid #D5D5D5;
    background:#E5E5E5 url(white/bg_ancillary.jpg) top repeat-x;
    padding:2em 0 2em 0;
}
/*block items*/
ul.recent-comments li a{
    color: #fff;
}
* html ul.recent-comments li a{
    color: #666;
}
.ancillary .sidebar{
    float:left;
    padding: 1%;
    width: 28%;
    margin:0 0 0 2.5%;    
    background: transparent url(white/transparent_bg.png) repeat left top;
}
* html .ancillary .sidebar{
    background:none;
}
.ancillary .sidebar h2, .ancillary .sidebar h3{
    margin:0 0 2em 0;
    color: #333;
}
.divider {
    border-bottom:1px solid #C2C2C2;
}
a, .story .details a, .story .details a:hover{
    color:#000;
}
.story .details a:hover{
    text-decoration:underline;
}
.story .details{ border-top:1px solid #7F7F7F; }


h1, h2, h3{ color:#000; }
h1 a {color:#000;}
#primary h2{ color:#333; }


blockquote{ color:#333; }


table th{ color:#FFF; background:#333; }
table td{ color:#000; background:#EAEAEA; }


#header h2{ border-right:1px solid #7F7F7F; }
.comment-head .num-comments{
    color:#000;
}
.secondary .featured p{
    border-bottom:1px solid #CCC;
    border-top: 1px solid #CCC;
}
.secondary .featured dl{
    border-bottom:1px solid #CCC;
}
.secondary .related_post a, .secondary dd a{ 
    color:#7F7F7F; 
}
.secondary .related_post a:hover, .secondary dd a:hover{ 
    color:#000; 
}
.secondary .featured dl h3, .secondary .featured dt{
    color:#333;
}
#primary .story h2, #primary .primary h2, #primary .single-story .primary h3, .story h3, .story h3 a{
    color:#333;
}
#primary.twocol-stories .story img, .single-post img {
    padding: 4px;
    border: 1px solid #ddd;
    background: #fff;
}
#primary.twocol-stories .story a img:hover, .single-post a img:hover {
    padding: 4px;
    border: 1px solid #ddd;
    background: #666;
}
#secondary{
    border-top:1px solid #E3E3E3;
}
.comment-head{
    border-bottom:1px solid #E3E3E3;
}
#comments .counter {
    position: absolute;
    top:-20px;
    right:-4px;
    font: lighter 72px 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
    color: #fff;
    text-align: right;
    padding:0;
}
ul.dates, ul.counts, ul.blogroll li ul, ul.pages, ul.sidebar li.widget ul{
    border-top:1px solid #C2C2C2;
}
ul.dates li, ul.counts li, ul.blogroll li ul li, ul.pages li, ul.sidebar li.widget ul li{
    border-bottom:1px solid #C2C2C2;
}
ul.dates .date, ul.counts .count{
    color:#7A7A7A;
}
ul.dates a, ul.counts a, ul.blogroll a, ul.pages a, ul.sidebar li.widget ul a{
    color:#404040;
}
ul.dates a:hover, ul.dates a:hover .date, ul.counts a:hover, ul.counts a:hover .count, ul.blogroll a:hover, ul.pages a:hover, ul.sidebar li.widget ul a:hover{ color:#000; }


#footer{ color: #666; }
#footer a, #footer p.attributes a{
    color:#333;
}
#footer a:hover, #footer p.attributes a:hover{ color:#000; }


/* Images */


#footer .inside{
    background:url(white/footer.gif) 50% 0 repeat-x;
}
#search .searchimg{
    background:url(white/search.gif) 0 0 no-repeat;
}
#searchform #s{
    background:#fff;
    border:1px solid #333;
    margin-bottom:4px;
}
#searchform #searchsubmit{
    background:#666;
    color:#fff;
}

Alles anzeigen

harry22

Hier, folgendes Addon für den Firefox runterladen:
https://addons.mozilla.org/en-US/firefox/addon/60

Dann gehst du im Firefox-Browser auf Extra-Web Developer-CSS-Veiw Style Information
Wenn du das anklickst und anschließend auf die Flächen im Browser mit dem Mauszeiger fährst, siehst du die CSS-Elemente und kannst sie dann in der Style-CSS datei besser finden.

Insgesamt einfach das Web-Developer-Addon nutzen. Damit bist du von 0 auf 100 der King.

_____________________
Einfach was für die Umwelt tun.
WordPress › Meine CO2 Kampagne WordPress Plugins

maxe

du hast es in header und primary gesetzt:

Code

#header, [COLOR=Red]#primary[/COLOR]{
    background:#FFFFFF url(http://www.galgenberg.eu/blog/wp-includes/images/galgenberg3.JPG) no-repeat scroll 70px center;
}

trenn die beiden mal und setzt es nur für #header:

Code

#header{
     background:#FFFFFF url(http://www.galgenberg.eu/blog/wp-includes/images/galgenberg3.JPG) no-repeat scroll 70px center;
 }
[COLOR=Red]#primary[/COLOR] {


}

Paddy_Ger

Du bist ein Gott. Es hat geklappt. Nur ist jetzt die Mitte des Blogs wieder schwarz. :confused:

Ich weiß schon, warum ich mich vom Programmieren immer fern gehalten habe. Das ist mir alles zu hoch.

Edit: Kommando zurück. Habs gelöst. In Primary muss die Hintergrundfarbe noch gesetzt werden. OK. Das war jetzt irgendwie logisch.

maxe

Gott ... naja mal nicht übertreiben. Wir haben hier schon einen Forumsgott *hehe, schönen Gruß an marX*

jupp, in primary muss natürlich das wieder rein, was vorher drin stand.

Schön, dass es geklappt hat.

Paddy_Ger

Ja, wirklich klasse. Ich danke recht herzlich für die Hilfe. Insbesondere dir, maxe, aber natürlich auch danke an die anderen.

Jetzt kann ich mich wieder auf das Wesentliche konzentrieren.

Gruß
Frank

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Grafik in der linken oberen Ecke platzieren? Wie geht das?

Jetzt mitmachen!