1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Move Header Up and Add Slogan Underneath

Discussion in 'Styling and Customization Questions' started by Kay, Aug 10, 2012.

  1. Kay

    Kay Member

    I would like to add a slogan underneath my header. I also need to push the header up and then add the slogan as detailed in the attachment. Would appreciate if you could be detailed in explaining how to do this. Thanks in advance :)

    Attached Files:

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can edit this template to add text to the logo area:

    Admin CP -> Appearance -> Templates -> logo_block

    This is the code for the logo image:

    			<div id="logo"><a href="{$logoLink}">
    				<span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
    				<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
    Though I would rather modify the logo image itself and add the slogan as part of the image to avoid having to edit the template.

    Then you also need to set this height appropriately:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo
  3. Kay

    Kay Member

    In the code you provided, how and where exactly do I add the text for the slogan. Thanks.
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    After the img tag would be a good place.
    MagnusB likes this.
  5. MagnusB

    MagnusB Well-Known Member

    You just add it underneath the img tag.

    EDIT: Ninja'd by Jake :(
  6. Kay

    Kay Member

    I'm sorry, I don't mean to be difficult, I've never, ever done this before, I'm still not exactly sure where. I see this:
    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

    Is this what your referring to? do i put the slogan after the closing tag? could you please just tell me exactly where? I really don't want to guess.
  7. MagnusB

    MagnusB Well-Known Member

    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
    <h2>Slogan here</h2>
    Then you need to style the h2 tag using something like
    #logo h2 {
    font-size: 15px;
    font-color: white;
    Jake Bunce likes this.
  8. Kay

    Kay Member

  9. Shelley

    Shelley Well-Known Member

    It would just be much easier and logical to just add it into the logo.
    Nasr likes this.
  10. MagnusB

    MagnusB Well-Known Member

    Actually, it makes some sense by adding it as text instead of image, as it is indexable, as well as easy to change. I have been exploring with the idea of pure html / CSS logo's, but it has been with the thinking for now.

Share This Page