WordPress.org

Ready to get started?Download WordPress

Forums

Chunk
How to move my site description above my site title? (64 posts)

  1. willtravel4hugs
    Member
    Posted 1 year ago #

    I am new to this blogging thing and originally started out with wordpress.com until I realized you couldn't customize as much as you wanted (and it's a pain if I ever wanted to switch over later) so I changed to .org. I know nothing about css code, but I've been able to at least figure out enough where I've managed to edit all the colors on my site and even some fonts.

    I'm stuck though in what I need to add to my child theme's code to get the site title "alternative perspective...." to appear above the header "willtravel4hugs"

    I am basically trying to get it to look like it did on my wordpress.com blog: willtravel4hugs.wordpress.com but that theme was not available on .org so I had to pick a similar one and edit it how I liked.

    http://www.willtravel4hugs.com is where I'm at now.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hi again - so here's what you need to do for this and for adding a logo (per your other thread) - make a new header.php file in the child theme and put this in it:

    <?php
    /**
     * @package Chunk
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>" />
    	<title><?php wp_title( '|', true, 'right' ); ?></title>
    	<link rel="profile" href="http://gmpg.org/xfn/11" />
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    	<?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    
    <div id="container">
    
    	<div id="header">
    
    		<a href="URL FOR LOGO LINK"><img src="URL FOR IMAGE" alt="ALT TEXT FOR LOGO class="logo" /></a>
    
    		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    
    		<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    
    	</div>
    
    	<div id="menu">
    		<?php
    			// Do we have a header image around?
    			if ( '' != get_header_image() ) :
    		?>
    		<div id="header-image">
    			<a href="<?php echo home_url( '/' ); ?>">
    				<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    			</a>
    		</div>
    		<?php endif; ?>
    		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    	</div>

    Then we'll also need to add some CSS to position things, but start with that. Also, you need to replace my ALL CAPS with the appropriate code for your site.

  3. willtravel4hugs
    Member
    Posted 1 year ago #

    so do I just go into the host and under chunk child, i create "new file" and label it "header.php"?

    And is there a way to just upload an image from the computer as opposed to put in a url?

  4. willtravel4hugs
    Member
    Posted 1 year ago #

    also I'm not sure what you mean by "appropriate code" for your site? could you give an example? This looks just like the header.php for the parent file, which makes me think I should be able to just add a logo somewhere in the dashboard, right? Sigh. This is so confusing haha.

  5. willtravel4hugs
    Member
    Posted 1 year ago #

    Ok, with just copying it exactly as you have posted it, it HAS moved my title above, but it's off center and there's a broken link for an image on the left. I don't want an image with the site description, i want an image with the title!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, that's what I meant by needing to add CSS to adjust things. And you need to add the file path for the logo image you want to add - the all caps here - you need to change to the actual info for your site:

    <a href="URL FOR LOGO LINK"><img src="URL FOR IMAGE" alt="ALT TEXT FOR LOGO class="logo" /></a>

    URL FOR LOGO LINK = if you want the logo clickable, put the URL for the linked page (likely your site URL) there

    URL FOR IMAGE = upload the logo image to your media library and copy the URL for the image to this space

    ALT TEXT FOR LOGO = short description for the logo image

    I also see a typo I made - missing a closing quotation mark here:

    alt="ALT TEXT FOR LOGO

    should be

    alt="ALT TEXT FOR LOGO"

    Once you put the image in, we can do the CSS

  7. willtravel4hugs
    Member
    Posted 1 year ago #

    Ok it's up! It will be a little bigger than my font at the moment, but I ultimately want the font changed to "League Gothic" which is taller and I have a post about that somewhere too, as it is not changing to the font I want. (Even though I could view this font on this same browser on my wordpress.com blog)

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Cool - that looks super! So do you want it moved at all? On the font, the reason you could use it on your other site is that it was part of the theme there - and it's not part of this version of the theme.

    See if this will work:

    http://wordpress.org/plugins/use-any-font/

    (I've not used that plugin so you'll have to look into it.)

    If you need to download the font, it's here:

    http://www.fontsquirrel.com/fonts/League-Gothic

  9. willtravel4hugs
    Member
    Posted 1 year ago #

    Ok I'll try that. Yes, I want it next to "willtravel4hugs" not next to "alternative perspective of looking at the world" please :)

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like you are changing things too - which makes it hard to do this at the same time - but try these and see where we are when you're done:

    add the top margin here:

    #header {
            min-height: 0;
    	padding-top: 0;
    	width: 800px;
            margin-top: 20px;
    }

    add this:

    img.logo {
       float: left;
    }
    
    #site-title {
    	color: #4ba6b5;
    	font-family: Oswald, Helvetica, Arial, sans-serif;
    	font-size: 70px;
            clear: none;
    }
  11. willtravel4hugs
    Member
    Posted 1 year ago #

    Oh sorry! I was just trying out the font thing you gave me. Should we get the font settled before we try that? Or will it matter?

    Thanks for the plug-in. it works. The problem is it was the wrong size so that's something I'm having to edit in the css which is all the changing going on! I think my site may be narrower over all than I want too.

    Can you help me to get it to look as close to willtravel4hugs.wordpress.com as possible in terms of the size of the site title/description and width?

  12. willtravel4hugs
    Member
    Posted 1 year ago #

    Yeah, it didn't work so I am thinking we need to get the text in order before we can tell the logo where to go? But then am I going to have this problem every time I am changing the text?

    I left the font size 200 for now. When I changed it to 70 px, my menu went askew too? It was kind of in the right place, but then my font was too small and it was off to the right instead of being centered

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Add this for sure:

    img.logo {
       float: left;
    }
    
    #menu {
       clear: both;
    }

    Your font size is not working because you are missing a semi-colon in the line above here (after sans-serif):

    #site-title {
    	color: #4ba6b5;
    	font-family: "Oswald", Helvetica, Arial, sans-serif
    	font-size: 300px;
    }

    So the site-title is currently 80px set in the parent theme.

  14. willtravel4hugs
    Member
    Posted 1 year ago #

    i thought i fixed that already. the font is working. i installed the plug in. but now the font is misaligned and huge and the other is too small. I want it to look like willtravel4hugs.wordpress.com (except with the logo to the left of the site title)

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Now that it's fixed - 300px is working - you can see that it's too big, so you need to make that smaller - try 100px.

  16. willtravel4hugs
    Member
    Posted 1 year ago #

    100 is too small and it messes up the menu again. But 200 is CLOSE... but see how tall mine is in comparison to the wordpress.COM site I provided? They are using the same font, as far as I know.

  17. willtravel4hugs
    Member
    Posted 1 year ago #

    i've changed my mind anyways. i took a screen shot and moved the logo around and because of the little puff clouds, it looks better on the right. so i essentially want the font to stay where it is, but stick the logo there on the right of the "will travel 4 hugs." i wish i could upload a picture of what i'm talking about.

  18. willtravel4hugs
    Member
    Posted 1 year ago #

    Got it!!!!!!! Now my post font is fuzzy for some reason though. Thoughts? This happened when I used the plug-in to change header 1 and header 2 fonts. header 2 font changed the site description, as well as the post titles. but for some reason the post titles are fuzzy.

  19. willtravel4hugs
    Member
    Posted 1 year ago #

    I'm going to another forum for this in case, but I also am having display issues with safari and internet explorer and phones. Safari doesn't display the right fonts. and internet explorer makes the layout all sorts of crazy.

    it also doesn't appear to be working right on mobile devices either and I think when I installed a mobile device plugin, the mobile display was just plain and white and boring and it lost all my designs

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This theme is not designed to be "responsive" so it won't natively resize on smaller devices. If you want that and a mobile plugin doesn't do what you want, you'd be better off using a "responsive" theme.

    Looks like you changed the HTML code in the header.php file - inline CSS isn't a good way to code things - so I'd suggest you change that logo code back and modify the "float" CSS in the style.css file.

    As to the fonts - some fonts may not work well on a website or in some browsers - or it may be CSS styles.

    But before I put in more time trying to sort those, you should decide whether you want to keep this theme.

  21. Pureza
    Member
    Posted 1 year ago #

    Hi guys! Im very much new to wordpress and im trying very hard to understand how these works.. :) but then after setting up a website of a friend friend, i'm stuck in Frontpage customization , Photo gallery and Blogpage-needs multi-lingual (spanish to english):( ;( . I really need some professional help but affordable cost to solve my problems. Please contact me who can extend help and teach me how. thanks a lot guys. i hope to hear from you all. :) This is the website http://www.jmislafotografia.com.

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Pureza - please start your own thread - you're not using this theme and it's not polite to interrupt someone else's thread. Note that we only provide help on these forums - offering to pay will get your thread closed per the forum rules. If you want to hire someone, you can post a job listing here:

    http://jobs.wordpress.net/

    If you'd like help on these forums, you can make a new post - click here: http://wordpress.org/support/forum/themes-and-templates#postform

  23. willtravel4hugs
    Member
    Posted 1 year ago #

    Start a whole nother theme?? I think I might kill myself haha. it took me forever to get to this point. I am leaving in 24 hours to spend 6 months in Guatemala and didn't really want to work on the design element while I was gone. So there's no way to get it fixed on mobile?

    And a friend was just trying to help me get my logo to work. It worked last night, but now it's out of place again and I didn't change anything related to it after we got i to work. So can you get it to move back down to the right of the text and have the text be aligned in the middle (the description was right above and centered over the title, not way up there). So I need to go delete whatever we added? I don't remember what we added to the css.. just the php.

  24. Andrew
    Forum Moderator
    Posted 1 year ago #

    didn't really want to work on the design element

    So there's no way to get it fixed on mobile?

    Not if you don't want to do this yourself, otherwise you may have to pay someone to do this for you.

  25. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh dear, sorry it's so short on time. It's probably not going to work great on mobile and it's usually not easy/quick to change a theme to do that - and mobile plugins sometimes work okay, sometimes not :( .

    So what do you think?

    If you want to keep this one, yeah, you need to change the the header.php back to what it was (what I posted above) - inline CSS isn't a good way to go - CSS should not be in here:

    <div style="overflow:hidden; white-space: nowrap;width: 1200px;">
                <div style="float:right;">
                    <a href="http://willtravel4hugs.com"><img src="http://willtravel4hugs.com/wp-content/uploads/2013/07/willtravel4hugslogo.png" alt="willtravel4hugs" class="logo"></a>
                </div>
                <div style="float:left">
                    <h1 id="site-title"><a href="http://willtravel4hugs.com/" title="willtravel4hugs" rel="home">willtravel4hugs</a></h1>
                <div>
            </div>
  26. willtravel4hugs
    Member
    Posted 1 year ago #

    Ok, I have changed the php back to the way you originally told me. But now it's not even on the right side. So what's the next step?

  27. willtravel4hugs
    Member
    Posted 1 year ago #

    Yeah I know. I didn't realize it would take so long to build a website or I would have started more than 1.5 weeks before my departure! If I get bored down there, maybe I'll work on it. But for now I just want it at least nice on computers! It's readable on mobile.. Just.. very ugly lol

  28. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This is wrong -

    <img logo"="" alt="willtravel4hugs=" src="http://willtravel4hugs.com/wp-content/uploads/2013/07/willtravel4hugslogo.png">

    This:

    logo"=""

    should be:

    class="logo"

    Then change the CSS to:

    img.logo {
      float: right;
    }
  29. willtravel4hugs
    Member
    Posted 1 year ago #

    is that in the php? i don't see that. ahh!! I see:
    <a href="http://www.willtravel4hugs.com"><img src="http://willtravel4hugs.com/wp-content/uploads/2013/07/willtravel4hugslogo.png" alt="willtravel4hugs="logo" /></a> as the closest thing. I'm sorry if I pasted that wrong. I saw other forums saying code shouldn't be pasted in, but I wasn't sure how to do the thing they were talking about.

    http://willtravel4hugs.com/?attachment_id=74

    side note: uploaded a photo of what we got it to look like last night and that's what i want (but obviously i want it to stay that way instead of be mean and change in an hour! LOL)

  30. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, change that to:

    <a href="http://www.willtravel4hugs.com"><img src="http://willtravel4hugs.com/wp-content/uploads/2013/07/willtravel4hugslogo.png" alt="logo image" class="logo" /></a>

    Re the photo - I thought you wanted the logo on the right...??

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic