Text im Header nach rechts verschieben

colo

Hallo, es geht um diese Seite: http://www.reisepinguin.de Benutzt wird das travelblogger-theme. Wie kann ich "reisepinguin.de" und "studentisch günstig reisen" nach rechts verschieben?

Habe im Code in der style.css bei "Header":

Code

/* =Header-------------------------------------------------------------- */




#header {
    height:110px;
    padding:0;
    line-height:16px;
}




.logo {
    vertical-align: text-bottom;
    padding: 20px 20px 0px 22px;
}
.logo a {
    color:#fff;
    font-size:40px;
    clear: right;
    text-decoration: none;
    line-height: 1.1em;
}
.logo h1.site-title a {
    color:#fff;
}
.site-description {
    color: #EBEBEB;
    margin: 10px 0 18px 0;
}
#sub_nav {
    background: url("http://forum.wpde.org/images/sub_nav.png") repeat-x left bottom #FFFFFF;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ccc;
    height: 34px;
    padding: 0 8px 0 0;
}
#sub_nav .social {
    float: left;
    margin: 0;
    padding:4px 5px 2px 12px;
    width: 700px;
}
#sub_nav .tweet,
#sub_nav .facebook {
    float:left;
    width:115px;
    padding-top:3px;
}
#sub_nav .googleplus {
    float:left;
    width:100px;
    padding-top:1px;
}
#sub_nav .follow {
    float:left;
    width:350px;
}
#sub_nav .follow img {
    padding:0 5px 0 0;
}
#sub_nav .follow span {
    padding:2px 5px 0 0;
    display:block;
    float:left;
}
.search_form {
    float: right;
}
.search_form p {
    margin:0;
}
.search_form .search_input, 
#searchform input[type="text"],
.post-password-required input[type="password"] {
    margin: 5px 1px 6px;
    padding: 3px 7px;
    line-height:0.8em;
    width: 200px;
}
.widget-container #searchform input[type="text"] {
    width:90%;
}
textarea,
input[type="text"],
input[type="password"],
input[type="file"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
    background-color: #FFFFFF;
    border-color: #DFDFDF;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

Alles anzeigen

nichts ausrichten können. Irgendwo muss ich doch wahrscheinlich "margin-left: ??px" einfügen, oder?

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

Gerd-E.

Hi colo,

der Ansatz ist vollkommen richtig ;-) Nur: die Style-Infomation wird "dynamisch" ausgegeben, schau dir den Quelltext an. Ab Zeile 26 stehen dort auch die Angaben für den h1 site-title.

colo

Den h1 site-title finde ich irgendwie nicht. Meinst du das hier:

Code

body,input,
textarea {
    color: #111;
    line-height:21px;
}
h1.entry-title {
    line-height:1.123em;
    font-size:197%;
    padding:5px 10px 14px 10px;
}
h1.page-title {
    color: #B58A00;
    font-weight: bold;
    font-size:153.9%;
    padding:5px 0 6px 10px;
    margin-bottom: 10px
    margin-left: 10px;

Alles anzeigen

Aber wenn ich bei h1.page-title das margin-left ändere, tut sich nix.

Gerd-E.

Hast du den Quelltext deiner Seite angesehen? In meinem Firefox geht das mit Strg+u ;-)

colo

Jup dafür hatte ich mir extra mal Firebug für Safari installiert. Dann seh ich halt das hier:

[COLOR=#000088][FONT=Monaco]<[/FONT][/COLOR][COLOR=blue][FONT=Monaco]div[/FONT][/COLOR][COLOR=#000088][FONT=Monaco] [/FONT][/COLOR][COLOR=#000088][FONT=Monaco]id[/FONT][/COLOR][COLOR=#000088][FONT=Monaco]="[/FONT][/COLOR][COLOR=#FF0000][FONT=Monaco]header[/FONT][/COLOR][COLOR=#000088][FONT=Monaco]">[/FONT][/COLOR][COLOR=#000000][FONT=Lucida Grande][COLOR=#000088][FONT=Monaco]
<[COLOR=blue]div[/COLOR] class="[COLOR=#FF0000]logo[/COLOR]">[/FONT][/COLOR]
[COLOR=#000088][FONT=Monaco]
<[COLOR=blue]h1[/COLOR] class="[COLOR=#FF0000]site-title[/COLOR]">[/FONT][/COLOR]
[COLOR=#FFFFFF !important][FONT=Monaco]<a href="http://www.reisepinguin.de/" title="reisepinguin.de" rel="home">reisepinguin.de</a>[/FONT][/COLOR]

[COLOR=#000088][FONT=Monaco]</[COLOR=blue]h1>[/COLOR][/FONT][/COLOR]
[COLOR=#000088][FONT=Monaco]<[COLOR=blue]h2[/COLOR] class="[COLOR=#FF0000]site-description[/COLOR]">[COLOR=#333333]studentisch günstig reisen[/COLOR]</[COLOR=blue]h2[/COLOR]>[/FONT][/COLOR]

[/FONT][/COLOR]
[COLOR=#000088][FONT=Monaco]</[/FONT][/COLOR][COLOR=blue][FONT=Monaco]div>

[/FONT][/COLOR]Aber was genau bringt mir das? Ich finde "site-title" und "site description" nicht in der style.css. Oder muss ich da etwas ganz neu einfügen?

Gerd-E.

Mir zeigt der Quelltext u.a. das

Code

<meta name="generator" content="WordPress 3.8" />
	
	<style type="text/css">
        .footer-bg {
            background:transparent url(http://www.reisepinguin.de/wp-content/uploads/2014/01/cropped-RP-Header12.jpg);
			height:129px;
        }
    </style>
	
	<style type="text/css">
        				.yui-t6 .yui-b, .yui-t3 .yui-b, .yui-t2 .yui-b { width: 15%; } .yui-t6 #yui-main{ margin-right:-16%; } .yui-t6 #yui-main .yui-b { margin-right:16%; } .yui-t3 #yui-main .yui-b, .yui-t2 #yui-main .yui-b { margin-left: 16%; } .yui-t3 #yui-main { margin-left:-16%; } .yui-t2 .sidebar { width: 18.56%; } .yui-t2 .main-content { width: 77%; } .entry-content img { max-width:580px; } #content .attachment img { max-width:759px; }
			#nav .menu {font-size:16px}
.logo a {font-size:26px}
p.site-description,h2.site-description {font-size:20px}
body { font-family:Cambria, Georgia, "Times New Roman", Times, serif}
a:link, a:visited, a:hover {color:#666666}
body, input, textarea {color:#666666}
#nav,#nav ul ul a {background-color:#FFF5C2}
.author_photo {border-color:#FFF5C2}
.feature_ft {background-color:#FFF5C2}
.archive-meta {background:#FFF5C2}
.footer-copy,.footer-copy a,.footer-copy {color:#666666}
#nav li:hover > a,#nav ul ul :hover > a {color:#FFFFFF}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {color:#666666}
#nav a {color:#666666}
.logo a,.logo h1.site-title a {color:#666666}
.site-description {color:#666666}
h1.entry-title,.feature_panel h1 a {color:#666666}
.archive-meta h1.page-title {color:#666666}
.archive-meta {background-color:#FFF5C2}
.archive-meta p {color:#666666}
.widget-area h3 {color:#666666}
.widget-area h3 {background-color:#FFF5C2}
h2 a:link, h2 a:visited,.widget-area h2 a:link,.widget-area h2 a:visited {color:#666666}
.entry-content h1,.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {color:#666666}
#site-disclaimer, #site-disclaimer a {color:#666666}
#site-info li:hover > a,#site-info ul ul :hover > a {color:#FFFFFF}
#site-info ul li.current_page_item > a, #site-info ul li.current-menu-ancestor > a, #site-info ul li.current-menu-item > a, #site-info ul li.current-menu-parent > a {color:#FFFFFF}
#site-info .footer-links a {color:#666666}
#site-info {background-color:#FFFFFF}
.entry-meta {border-bottom:none;}	</style>

Alles anzeigen

Schau mal in die header.php des Themes oder die functions.php, gibt es unter Design Theme Options?

colo

So sieht die header.php aus:

PHP

<?php/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="bd">
 *
 * @package WordPress
 * @subpackage TravelBlogger
 * @since TravelBlogger Theme 1.0
 */
	global $exp_theme_options;




	if($exp_theme_options['featured_area'] == 'showall' || $exp_theme_options['featured_area'] == 'show' && (is_home() || is_category())) {
		$show_header = '1';
	} else {
		$show_header = '';
	}
	$grid = ($exp_theme_options['theme_grid'] == '') ? 'yui-t2' : $exp_theme_options['theme_grid'];




?><!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" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * travelblogger_filter_wp_title() in functions.php.
	 */
	wp_title( '|', true, 'right' );




	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );




	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
<!--[if IE]>
<style type="text/css">
  .clearfix, .third, .widget-container,.menu{
    zoom: 1; 
    }
</style>
<![endif]-->
</head>
<body <?php body_class($exp_theme_options['theme_color']); ?>>
<div id="doc4" class="<?php exp_template_class($grid); ?>">
   <div id="hd">
  		<div id="header"> 
  			<div class="logo">
  				<?php if($exp_theme_options['show_header_text']) {?>
					<?php $h1_tag = ( is_home() || is_front_page() ) ? 'h1' : 'span'; ?>
	   				<<?php echo $h1_tag; ?> class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $h1_tag; ?>>
					<?php $h2_tag = ( is_home() || is_front_page() ) ? 'h2' : 'p'; ?>
	   				<<?php echo $h2_tag; ?> class="site-description"><?php bloginfo( 'description' ); ?></<?php echo $h2_tag; ?>>
  				<?php } ?>
  			</div><!-- .logo -->
  		</div><!--#header-->
   		<div id="nav">
   			<?php wp_nav_menu( array( 'container_class' => 'menu', 'theme_location' => 'primary' ) ); ?>
   		</div><!-- #nav -->
		<?php if($exp_theme_options['social_bar']) { ?>
			<div id="sub_nav" class="clearfix">
				<div class="social">
					<?php get_exp_social_links(); ?>
				</div>
				<?php exp_search_from(); ?>
			</div>
		<?php } ?>
   </div><!-- header -->
	<?php if(is_page() && !is_page_template( 'onecolumn-page-nosidebar.php' ) && $show_header || $show_header && !is_single() && !is_search() && !is_tag()) { ?>
   		<?php exp_featured_post(); ?>
   <?php } ?>
   <div id="bd">

Alles anzeigen

und so sieht die functions.php aus:

PHP

<?php/**
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 *
 * @package WordPress
 * @subpackage TravelBlogger
 * @since TravelBlogger Theme 1.0
 */




// Define directory constants
define('EXP_LIB', get_template_directory() . '/lib');
define('EXP_ADMIN', EXP_LIB . '/admin');
define('EXP_FUNCTIONS', EXP_LIB . '/functions');
define('EXP_CLASSES', EXP_LIB . '/classes');




// Launch Theme within WordPress
require_once(EXP_FUNCTIONS . '/launch.php');




// Load theme functions
require_once(EXP_FUNCTIONS . '/layout.php');
require_once(EXP_FUNCTIONS . '/components.php');
require_once(EXP_FUNCTIONS . '/widgets.php');




if(is_admin()) {
	// Adds options to Appearance tab in admin area
	require_once(EXP_ADMIN .'/opt_theme_layout.php');
	require_once(EXP_ADMIN .'/opt_colors_fonts.php');
	require_once(EXP_ADMIN .'/opt_social_media.php');
	// Loads classes
	require_once(ABSPATH . 'wp-admin/custom-header.php');
	require_once(ABSPATH . 'wp-admin/custom-background.php');
	require_once(EXP_CLASSES . '/custom-background.php');
	require_once(EXP_CLASSES . '/custom-header.php');
	require_once(EXP_CLASSES . '/custom-footer.php');
	// Adds admin only functions
	require_once(EXP_FUNCTIONS .'/admin.php');

Alles anzeigen

Aber damit kann ich halt nicht so viel anfangen irgendwie...
In den Optionen über das Kontrollzentrum kann ich nur Schriftgröße und Schriftfarbe einstellen.

Gerd-E.

Ups, hatte etwas falsch gedacht, ab Zeile 290 in der style.css des Themes ergänzen

Code

.logo h1.site-title a {


    color: #FFFFFF;
    [COLOR=#ff0000]margin-left: 100px;[/COLOR]






}

Alles anzeigen

und ab Zeile 293

Code

.site-description {


    color: #EBEBEB;
    margin: 10px 0 18px [COLOR=#ff0000]100px[/COLOR];






}

Alles anzeigen

colo

Perfekt vielen Dank!! :)

colo

Ah gibt aber noch ein Problem: Sobald ich auf Startseite, Pauschalreisen, Hotels, etc. klicke - ist der obere Teil des Headers wieder verschoben: http://www.reisepinguin.de/?cat=4

Muss ich da noch irgendwas in der loop-Datei verändern?

Gerd-E.

Hi colo,

folgende Änderung

Code

.logo h1.site-title a {


    color: #FFFFFF;
    margin-left: 100px[COLOR=#ff0000]!important[/COLOR];[COLOR=#ff0000]
[/COLOR]}[COLOR=#ff0000]
[/COLOR]

colo

Morgen Gerd,

hm hab das jetzt so geändert, aber tut sich nix.

Gerd-E.

Dann füge zur style.css des Themes ganz unten hinzu

CSS

.logo a, .logo h1.site-title a {
    color: #4D4D4D;
    [COLOR=#ff0000]margin-left: 80px!important;[/COLOR]
}

colo

Hab ich gemacht, aber funktioniert immer noch nicht...

Gerd-E.

bei mir sieht es gut aus ;-) Browser aktualisieren?

colo

Stimmt :D Vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Text im Header nach rechts verschieben

Jetzt mitmachen!