WordPress.org

Ready to get started?Download WordPress

Forums

Mystique Help, Header Help (13 posts)

  1. inkhead
    Member
    Posted 3 years ago #

    Mystique Version: 2.4.2

    how can i put a header like this on the top of my theme?

    http://inkheaddesigns.com/Files/example.jpg
    (a quick photoshop i did to show you how i want it to look...
    i still want the nav. icons to show above the header)

    heres my site url
    http://www.inkheaddesigns.com/default

  2. inkhead
    Member
    Posted 3 years ago #

    ok, i replace the header.jpg... but more then half of it is being covered by the theme... is there a way to lower the theme itself to display the whole header?

  3. inkhead
    Member
    Posted 3 years ago #

    is there any css code that will drop the theme down?

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    edit style.css;

    add height:190px; to #header style:

    #header{display:block;position:relative;z-index:5;height:190px;}

    and add position:relative;top:240px; to .shadow-left style:

    .shadow-left{background:url(images/shadow.png) no-repeat left bottom;position:relative;top:240px; }

    this should be all; evaluated with firefox web developer add-on; not tested in any other browsers.

    ps:
    h1#logo { text-indent:-9999px;}
    add this to style.css to 'remove' the blog title from the header.

  5. inkhead
    Member
    Posted 3 years ago #

    alchymyth that worked with firefox but when i pulled up the page on IE everything was screwed up - then for some reason my 2nd nav column was activated and i had to reset the entire theme to fix it. lucky i had all my css code saved so the reset wasnt that big of headache...

    so still looking for a solution that will work for every browser!

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    a different way to increase the #header height:
    try to add padding-top:290px; to #header style:

    #header{display:block;position:relative;z-index:5;padding-top:290px;}

    as before, checked with firefox; not tested with other browsers.

  7. duca
    Member
    Posted 3 years ago #

    Sorry me: Mystique settings > Design:

    upload your header/image by "custom logo image" way.

  8. inkhead
    Member
    Posted 3 years ago #

    alchymyth, i need a way to make sure it will work with every browser correctly.

    duca, the header doesnt display the entire header because of the size.

  9. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    i need a way to make sure it will work with every browser correctly

    there is often only trial and error;
    (for instance, i run the four most common browsers on my computer to check this; however, to do evaluation and tweaking the browser would need extra tools, which i have only in firefox with the web developer add-on)

    you can also check the appearance of the page with free sites such as:
    http://browsershots.org/

  10. inkhead
    Member
    Posted 3 years ago #

    i made a new header and now its a different height (same width) but now theres space underneath it (since its smaller in height) how do i no how what number of px to change the padding so that it sits right?

  11. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    #header{display:block;position:relative;z-index:5;padding-top:165px;}

    or 160px;

    (as usual: trial/error unti it fits)
    i use firefox with the web developer add-on (free) to play with css and html on live websites (in the browser only) - which give immediate results, and makes tweaking css and html much easier - only downside: it is for firefox only, so IE issues are sometimes more difficult to check.

  12. davy-kelly
    Member
    Posted 3 years ago #

    Hi Guys,

    So, what would I need to do to reduce the space above and below the logo?

    Cheers, Davy

  13. davy-kelly
    Member
    Posted 3 years ago #

    Sorted it, I added the following to the user CSS section in the Mystique settings bit

    .shadow-left{position:relative;top:-20px; }

    That way if the theme is updated it wont dissapear on me

Topic Closed

This topic has been closed to new replies.

About this Topic