Site title beneath website logo? (Child theme installed)
-
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 ??
-
Hi domgilberto, do you have a link that shows this? I’m sure it can be done with some css.
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.
/* 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.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.
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.
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.
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?
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.
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?
- The topic ‘Site title beneath website logo? (Child theme installed)’ is closed to new replies.