WordPress.org

Ready to get started?Download WordPress

Forums

Expound
[resolved] Change Header Text to Header Image (18 posts)

  1. Kosuki
    Member
    Posted 1 year ago #

    http://www.avilamassagespa.com

    My header is currently text with a sub category under the primary header. I want to change it to a image based header and not a text based header. I have no idea what code to change. Here is the following information onf my template/theme.
    http://wordpress.org/themes/expound
    Her is a copy of my expound.php
    [Redacted - That is too much code. Use PasteBin and instead link us that PasteBin'd page]

  2. Konstantin Kovshenin
    Member
    Theme Author

    Posted 1 year ago #

    You can probably target the header with CSS and set its background property to an image like I did on http://wpmag.ru

  3. Kosuki
    Member
    Posted 1 year ago #

    Did not work. Now the header text is above the image it self. for some reason the header text and subtext wont go away and its bumping the header.
    Nothing I do will fix this. I have tried editing code, I cant even remove the header text.....
    When i go to appearance and try to put a header image in there, wont work...

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    First of all, revert all the changes that you have made directly to any theme file to its original. Create a starter child theme to hold your modifications.
    http://codex.wordpress.org/Child_Themes

    Make sure child theme is installed, activated, and works properly.

    Since the logo that you want replacing the title text will span full to the entire header area, this 2 steps below will do what you want.

    Put this in your child theme's stylesheet.

    /*----- hide .site-branding keeping SEO -----*/
    .site-branding {
    	position: absolute !important;
    	clip: rect(1px 1px 1px 1px);  /* IE7 */
    	clip: rect(1px, 1px, 1px, 1px);
    }
    
    /*----- parent already has responsive img style  -----*/
    .mylogo { display:block; }

    Put the linked logo img tag just after the opening <header> like this.

    <header id="masthead" class="site-header" role="banner">
    <a rel="home" href="http://example.com/">
    	<img class="mylogo" alt="mysite" src="http://dummyimage.com/1020x200/0000ff/fff.png">
    </a>

    To look good, the logo image must be 1200px in width, any height.

  5. redskys
    Member
    Posted 1 year ago #

    Forget all that. I got mine to work, by pasting a code in my setting/editor/theme.php someone has it here, just look around, a guy posted it. Mine is working good. Can't move grey bar, but so what. for free its as good as it gets. stop trying to customize it.

  6. Konstantin Kovshenin
    Member
    Theme Author

    Posted 1 year ago #

    You don't really have to edit any of the theme's code, CSS will suffice. Here's an example:

    .site-title a {
        background: url('http://url-to-your-logo.png') 0 0 no-repeat;
        width: 300px;
        height: 120px;
        text-indent: -9999px;
    }

    Enjoy!

  7. backtogeek
    Member
    Posted 1 year ago #

    Nice one thanks Konstantin

  8. Konstantin Kovshenin
    Member
    Theme Author

    Posted 1 year ago #

    You're welcome!

  9. paulwpxp
    Font hero
    Posted 1 year ago #

    @Kosuki Unless you don't care for SEO, taking out Site Title and Site Description text from header.php is a wrong decision because they are in <h1> and <h2>.

    Also, the header image, as it is now, is messing up the responsiveness of the site.

    And the changes must be done via child theme, not directly to the theme itself, you will lose all the custom works when theme updates.

  10. ubo
    Member
    Posted 1 year ago #

    CSS code works, but there is an indent on the image. How can the header be just the image without a border indent padding?

  11. Konstantin Kovshenin
    Member
    Theme Author

    Posted 1 year ago #

    @ubo, Custom Header support is coming with the pending update to the theme. Stay tuned!

  12. chloesweb
    Member
    Posted 1 year ago #

    Maybe a silly question but can you only change design using CSS codes if you buy the Custom Design upgrade? I want to change my text header to image header but have NO idea how to go about it.

  13. Konstantin Kovshenin
    Member
    Theme Author

    Posted 1 year ago #

    Looks like you're referring to the Custom Design upgrade over at WordPress.com? The Expound theme is currently not available to WordPress.com users. Expound is available to self-hosted users using the software from WordPress.org.

    If you'd like to alter the CSS of your theme on a self-hosted WordPress.org blog, you can easily do it with any Custom CSS plugin at no extra charge, for example: http://jetpack.me/support/custom-css/

  14. chloesweb
    Member
    Posted 1 year ago #

    Thanks @Konstantin, you have been super helpful. I am using WordPress.org so will give CSS a go ... hopefully I don't get too stuck trying to figure out how to code!

  15. karis0166
    Member
    Posted 9 months ago #

    Hi, I have a question related to this topic. I'm new to WordPress but not to CSS (intermediate skills). What would be the pros and cons of editing my Child Theme's style.css file on my own, vs. using a Custom CSS plugin like jetpack, if I'm using expound as my parent theme?

  16. Konstantin Kovshenin
    Member
    Theme Author

    Posted 9 months ago #

    Karis0166, it's mostly just a matter of preference. For style.css you'll have to deal with an actual file, use FTP, version control, etc. For Custom CSS you do it all within the admin, have file revisions, etc. Pick whatever works best for you, and it won't hurt to switch at any given time.

  17. vinn95
    Member
    Posted 9 months ago #

    I tried using your CSS code ".site-title" for my logo, its isn't working for me. Still the logo is visible when added in header through dashboard.

    I want the site logo to be directed to homepage.

    Your advice Please.

  18. Andrew
    Forum Moderator
    Posted 9 months ago #

    If the solutions given in this thread did not work then you are not experiencing the same issue and you need to start a new thread.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.