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

How do i make a box with text in header?

Discussion in 'Styling and Customization Questions' started by Heavy, Mar 13, 2015.

  1. Heavy

    Heavy Active Member

    Hi Xenforo!

    I wanna create a box like this [​IMG] , but instead of above the search bar, i want it left to the search box!

    Can anyone help me with creating this box - with text? If you want to see the box it's on 8wayrun.com

    Thanks in advance!
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    You need a minimum of knowledge about XenForo to reproduce certain things. I'll give you a solution.

    It is better to increase the height of the header to put a big box and easier to put on. Go to "Style Properties", "Header and Navigation" and in "Height of Header Logo" put 110px instead of 50px.

    Go to the templates of your styles and search for "ad_header". Now, add the following inside:
    Code:
    <div id="headerBox">
        <span>Your text here</span>
        </br>
        <a href="Your link here">Your text link here"></a>
    </div>
    Then, search for "EXTRA.css" and add this:
    Code:
    #headerBox
    {
        float: right;
        background-color: #000;
        text-align: center;
        margin-top: 10px;
        padding: 30px 50px;
        border-radius: 3px;
    }
    
    #headerBox span
    {
        color: #FFFFFF;
    }
    Screenshot_2.png

    This is just an example for you to understand, but now it's up to you to stylize. ;)
     
    DistortedDorian likes this.
  3. Heavy

    Heavy Active Member

    Not the position i wanted, as you have my forum link, could you please make the box next to to the left of the search box.

    Thanks so much!
     
  4. Dylan V

    Dylan V Well-Known Member

    Yes, because you have a custom style, so it is difficult to make according to your needs. I need an account so that I can connect to the system of stylization.
     
  5. Dylan V

    Dylan V Well-Known Member

    I made a mistake in the HTML code. This is not:
    Code:
    <div id="headerBox">
        <span>Your text here</span>
        </br>
        <a href="Your link here">Your text link here"></a>
    </div>
    but:
    Code:
    <div id="headerBox">
        <span>Your text here</span>
        </br>
        <a href="Your link here">Your text link here</a>
    </div>
     

Share This Page