WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Simple Catch] Moving site-title downwards (14 posts)

  1. Lowensohn
    Member
    Posted 2 years ago #

    Hi there,

    I always try to resolve any problems myself and so far it worked. But rigth now I have a major problem with an issue that should be easy as pie.

    I want to add a margin-top or break to the site-title so that it gets more distance from the top of the page. I am able to insert a margin, but then also the Logo is moved downwards. I need the Logo to stay at its current position and only the site-title to move down by one break or a margin-top. (the site is http://www.massage-mit-oel.de )

    With firebug I found out a simple break in the Span-Line
    <span>Massage mit Öl</span>
    would be enough. But when editing the simplecatch_funcions.php it doesn´t work. Also when I change the span to a div, firebug shows me it is still a span.
    This is where I tried to work in simplecatch_functions.php:

    $simplecatch_headerdetails = '<div class="logo-wrap">';
    
    		if( empty( $options[ 'remove_header_logo' ] ) || empty( $options[ 'remove_site_title' ] ) ) {
    			$simplecatch_headerdetails .= '<h1 id="site-title">'.'<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'">';
    
    			if( empty( $options[ 'remove_header_logo' ] ) ) {
    				if ( !empty( $options[ 'featured_logo_header' ] ) ):
    					$simplecatch_headerdetails .= '<img src="'.esc_url( $options['featured_logo_header'] ).'" alt="'.get_bloginfo( 'name' ).'" />';
    				else:
    					// if empty featured_logo_header on theme options, display default logo
    					$simplecatch_headerdetails .='<img src="'. get_template_directory_uri().'/images/logo.png" alt="logo" />';
    				endif;
    			}
    
    			if ( empty( $options[ 'remove_site_title' ] ) ) {
    				<strong>$simplecatch_headerdetails .='<span>'.esc_attr( get_bloginfo( 'name', 'display' ) ).'</span>'; </strong>
    			}
    
    			$simplecatch_headerdetails .= '</a></h1>';
    		}
    
    		if( empty( $options[ 'remove_site_description' ] ) ) {
    			$simplecatch_headerdetails .= '<h2 id="site-description">'.esc_attr( get_bloginfo( 'description' ) ).'</h2>';
    		}	
    
    		$simplecatch_headerdetails .= '</div><!-- .logo-wrap -->';

    Can you tell me which is the correct file to edit? Or a specific code?
    (I also tried to adjust per CSS with no effect)

    Thank you very very much.

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    Do you want to move both the Site Title and Description down?

  3. Lowensohn
    Member
    Posted 2 years ago #

    yes, sorry. I thought that would automatically happen.

  4. Andrew
    Forum Moderator
    Posted 2 years ago #

    Within the HTML structure you currently have, I can't see how you can achieve this.

  5. Lowensohn
    Member
    Posted 2 years ago #

    Aaah :D What an destroying answer. Do you see any chance by changing the html structure?

  6. Andrew
    Forum Moderator
    Posted 2 years ago #

    • Move the img above the <h1>.
    • Apply display: block and float left to the img
    • Float left the <h1> and <h2>

    You should now be able to apply margin-top to the <h1> element without affecting the image.

  7. Andrew
    Forum Moderator
    Posted 2 years ago #

    By the way, any changes made to the theme will be erased when updating your theme.

  8. Lowensohn
    Member
    Posted 2 years ago #

    Thank you very much! I´m gonna test this tomorrow.
    Yes I know about the Theme-Update deletion. I have to learn about the children and custom CSS thingies soon :) But for now I´ll try to work it like this.

  9. Lowensohn
    Member
    Posted 2 years ago #

    Thank you so much for your quick help! it has worked. The float:left on image AND h1/h2 did the trick. Wouldn´t have found that out alone :)

  10. Lowensohn
    Member
    Posted 2 years ago #

    Well I was a bit fast on this one. I theoretically works if changed live with firebug. But I don´t seem to be able to apply it on the real files.

    I have trouble finding the correct file to edit.

    To examplify I show you my way of going: This is the relevant live-Code per firebug:

    <div class="layout-978">
    <div class="logo-wrap">
    <h1 id="site-title">
    <a href="http://www.massage-mit-oel.de/" title="Massage mit Öl">
    <img src="http://www.massage-mit-oel.de/wp-content/uploads/2012/08/massage-mit-oel2.png" alt="Massage mit Öl"><span>Massage mit Öl</span></a></h1>

    So I need to look at the div class "layout-978" which is called in the header.php:

    <div class="layout-978">
            	<?php
            		// Funcition to show the header logo, site title and site description
            		if ( function_exists( 'simplecatch_headerdetails' ) ) :
    					simplecatch_headerdetails();
    				endif;
    			?>

    In there the simplecatch_headerdetails function is called, which I thought would be in the file \wp-content\themes\simple-catch\functions\simplecatch_functions.php as it states the following part for "Headerdetails":

    function simplecatch_headerdetails() {
    	//delete_transient( 'simplecatch_headerdetails' );	
    
    	// get data value from simplecatch_options through theme options
    	$options = get_option( 'simplecatch_options' );	
    
    	if ( ( !$simplecatch_headerdetails = get_transient( 'simplecatch_headerdetails' ) ) && ( empty( $options[ 'remove_header_logo' ] ) || empty( $options[ 'remove_site_title' ] ) || empty( $options[ 'remove_site_description' ] ) ) ) {
    
    		echo '<!-- refreshing cache -->';
    
    		$simplecatch_headerdetails = '<div class="logo-wrap">';
    
    		if( empty( $options[ 'remove_header_logo' ] ) || empty( $options[ 'remove_site_title' ] ) ) {
    			$simplecatch_headerdetails .= '<h1 id="site-title">'.'<a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'">';
    
    			if( empty( $options[ 'remove_header_logo' ] ) ) {
    				if ( !empty( $options[ 'featured_logo_header' ] ) ):
    					$simplecatch_headerdetails .= '<img src="'.esc_url( $options['featured_logo_header'] ).'" alt="'.get_bloginfo( 'name' ).'" />';
    				else:
    					// if empty featured_logo_header on theme options, display default logo
    					$simplecatch_headerdetails .='<img src="'. get_template_directory_uri().'/images/logo.png" alt="logo" />';
    				endif;
    			}
    
    			if ( empty( $options[ 'remove_site_title' ] ) ) {
    				$simplecatch_headerdetails .='<span>'.esc_attr( get_bloginfo( 'name', 'display' ) ).'</span>';
    			}
    
    			$simplecatch_headerdetails .= '</a></h1>';
    		}
    
    		if( empty( $options[ 'remove_site_description' ] ) ) {
    			$simplecatch_headerdetails .= '<h2 id="site-description">'.esc_attr( get_bloginfo( 'description' ) ).'</h2>';
    		}	
    
    		$simplecatch_headerdetails .= '</div><!-- .logo-wrap -->';
    
    	set_transient( 'simplecatch_headerdetails', $simplecatch_headerdetails, 86940 );
    	}
    	echo $simplecatch_headerdetails;
    }

    I don´t know PHP, but I tried to move the part where the IMG is called

    if( empty( $options[ 'remove_header_logo' ] ) ) {
    				if ( !empty( $options[ 'featured_logo_header' ] ) ):
    					$simplecatch_headerdetails .= '<img src="'.esc_url( $options['featured_logo_header'] ).'" alt="'.get_bloginfo( 'name' ).'" />';
    				else:
    					// if empty featured_logo_header on theme options, display default logo
    					$simplecatch_headerdetails .='<img src="'. get_template_directory_uri().'/images/logo.png" alt="logo" />';
    				endif;
    			}

    beaneath the starting of
    $simplecatch_headerdetails = '<div class="logo-wrap">';

    But it didn´t work.

    I´m sorry for this long post, I just try to make it as clear as possible so that you guys don´t need to ask a million times before maybe helping.

    Your support would be greatly appreciated :(

  11. Sanjiv
    Member
    Posted 2 years ago #

    Hi Lowensohn

    You are actually editing the correct part of the code. But you will not see the changes as soon as you edit the code. To see the changes, after you edit just click save on logo options of the theme options. This will delete the caching and you will see your changes. Think this will help you.

    Regards
    Sanjiv(Catch Themes)

  12. Sovit (Theme Horse)
    Member
    Posted 2 years ago #

    Hi Lowensohn,

    I understood your problem. The solution will be little complex.
    For the proper solution,
    First remove your header logo image, then give the header logo from the background to the tag #header .logo-wrap.
    So, go to
    appperance --> theme options --> design settings --> custom css

    paste this code

    #header .logo-wrap {
        background: url("http://www.massage-mit-oel.de/wp-content/uploads/2012/08/massage-mit-oel2.png") no-repeat top left;
        height: 183px;
        padding-left: 480px;
        padding-top: 100px;
    }

    Then save the changes.

    This way your changes will not be lost while updating as well.

    Regards,
    Sovit [signature moderated]

  13. Lowensohn
    Member
    Posted 2 years ago #

    Thank your so much, it worked! This also explained a little bit of the logic itself to me so I learned more. Thanks!

  14. Sovit (Theme Horse)
    Member
    Posted 2 years ago #

    You Welcome and Thanks for using Simple Catch.

    Regards,
    Sovit (Catch Themes)

Topic Closed

This topic has been closed to new replies.

About this Topic