• Child theme is installed already.

    At the moment, the “Site Title” ( under Appearance > Theme options > Logo Options ) site at the TOP RIGHT corner of my uploaded logo…

    I am wanting this to be placed directly underneath the logo?

    I know how to edit the child theme but I don’t know what specific parameters I am changing in order to achieve these results??

    Any help please ??

Viewing 15 replies - 1 through 15 (of 33 total)
  • Hi domgilberto, do you have a link that shows this? I’m sure it can be done with some css.

    Thread Starter domgilberto

    (@domgilberto)

    As I don’t particularly want to remove my “under construction plugin” just yet, here is a screenshot on screen-cast:

    https://screencast.com/t/IR5j4t91

    Hope this is Ok?

    Hi domgilberto, I understand, at least you opened site inspector. That helps a bit.
    Check the css for the site-logo id, I think it might have float: left; set on it. Removing it should cause #site-details which contains #site-title to display underneath it.
    If not send another screenshot displaying the css for #site-logo inside the inspector.

    Let me know what you find.

    Thread Starter domgilberto

    (@domgilberto)

    /* Logo Tile */
    #header .logo-wrap {
    	padding-left:20px;
    	float:left;
    	margin-top:54px;
    	min-width: 610px;
    }
    #site-logo {
        display: inline-block;
        float: left;
        padding-bottom: 0;
    }
    #site-logo a img {
        float: left;
        height: auto;
        max-width: 958px;
        padding-right: 20px;
    }
    #site-details {
        display: inline-block;
        float: left;
    	max-width: 958px;
        padding-right: 20px;
    }
    #site-title {
    	font-size: 45px;
    	font-family: 'Lobster';
    	font-weight:normal;
    	padding-bottom:0px;
    }
    #site-title a {
    	line-height:54px;
    }
    #site-title a:hover {
    	color: #444444;
    }
    #site-description {
    	font:14px Arial, Helvetica, sans-serif;
    	color:#666;
    	padding:8px 0 0 0;
    }

    Thats the parent theme code. If i want to edit this under child theme, would you mind expanding on precisely what you think may be the solution? Also, I am wanting to change the font, size, shape of the title text. Is there a way I can reference some sort of website for the correct syntax?

    Thanks for your help!

    In your child theme stylesheet try this:

    #site-logo {
        float: none;
    }
    #site-logo a img {
        float: none;
    }

    You may want to add some padding as well after this, but first let’s try and get the title underneath.
    Let me know if this works and send a screenshot of what it looks like when done.

    Thread Starter domgilberto

    (@domgilberto)

    Right: https://screencast.com/t/jYnSn3j3Ia3k

    It’s moved it over to the left side now ??

    Well at least it’s moving. Let’s try adding this below the code above in your css:

    #site-details {
        float: none;
    }

    We’ll get there eventually.

    Thread Starter domgilberto

    (@domgilberto)

    https://screencast.com/t/L87PaWeI3Qx

    ??

    (thanks for your help btw!)

    Try replacing all the code above with this:

    #site-logo {
        display: block;
        float: none;
    }
    #site-logo a img {
        float: none;
    }
    #site-details {
        display: block;
        float: none;
    }

    and send me the css for #header and .layout-978, maybe there is something.

    Thread Starter domgilberto

    (@domgilberto)

    That seems to have done it! > https://screencast.com/t/ijvjQHZb3S

    How can I bring the menu bar up a little?

    Thank you!!

    Nice! Either the #header or the #mainmenu will have padding or margins set to it. Send me the css for them and I’ll see what can be done.

    Thread Starter domgilberto

    (@domgilberto)

    https://screencast.com/t/dUxEUrlv5Lc (check this out).

    Want to close the distance – I am editing the font of it now but for some reason the new font from google/fonts doesn’t seem to be working?

    @import url(https://fonts.googleapis.com/css?family=Calligraffitti);
    
    #site-title {
    font-family: 'Calligraffitti';
    color: #444444;
    font-size: 25px;
    line-height: 2px;
    text-transform: uppercase;

    That’s added into child theme. Font size, colour and uppercase are working, just the font-family doesn’t seem to be?

    Thread Starter domgilberto

    (@domgilberto)

    Header:

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section
     *
     * @package Catch Themes
     * @subpackage Simple_Catch
     * @since Simple Catch 1.0
     */
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="https://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php
    	/* 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();
    ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="header">
    	<div class="top-bg"></div>
      		<div class="layout-978">
            	<?php
            		// Funcition to show the header logo, site title and site description
            		if ( function_exists( 'simplecatch_headerdetails' ) ) :
    					simplecatch_headerdetails();
    				endif;
    			?>
    
            	<div class="social-search">
    				<?php
                        // simplecatch_headersocialnetworks displays social links given from theme option in header
                        if ( function_exists( 'simplecatch_headersocialnetworks' ) ) :
                            simplecatch_headersocialnetworks();
                        endif;
                        // get search form
                        get_search_form();
                    ?>
            	</div><!-- .social-search -->
        		<div class="row-end"></div>
                <?php
    				// simplecatch_headersocialnetworks displays social links given from theme option in header
    				if ( function_exists( 'simplecatch_custom_header_image' ) ) :
    					simplecatch_custom_header_image();
    				endif;
    			?>
                <div id="mainmenu">
                	<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
                </div><!-- #mainmenu-->
                <div class="row-end"></div>
    
    			<?php
                    // Display slider in home page and breadcrumb in other pages
                    if ( function_exists( 'simplecatch_sliderbreadcrumb' ) ) :
                        simplecatch_sliderbreadcrumb();
                    endif;
                ?>
    		</div><!-- .layout-978 -->
        <div class="bottom-bg"></div>
    </div><!-- #header -->

    Main Index Template:

    get_header(); 
    
    	if ( function_exists( 'simplecatch_display_div' ) ) {
    		$themeoption_layout = simplecatch_display_div();
    	}
    
        get_template_part( 'content' ); ?>
    
    	</div><!-- #content -->
    
    	<?php
        if ( $themeoption_layout == 'right-sidebar' ) {
            get_sidebar();
        }?>
    
    	</div><!-- #main --> 
    
    <?php get_footer(); ?>

    Check that your @import statement is at the top of the css page and add !important to the font-family like this:

    #site-title {
    font-family: 'Calligraffitti' !important;
    color: #444444;
    font-size: 25px;
    line-height: 2px;
    text-transform: uppercase;
    }

    check #mainmenu to see if it has padding or margin on top.

    Thread Starter domgilberto

    (@domgilberto)

    Spot on! Thank you soooo much! https://screencast.com/t/iGfU5o9Lc

    Last thing if it’s ok to ask!

    How do I edit a widget under the same parameters we’ve been over above? (colour, text, font size, margin, padding etc.)

    I am wanting to make my disclaimer smaller and different font?

    https://screencast.com/t/PhxeOlcfDX

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘Site title beneath website logo? (Child theme installed)’ is closed to new replies.