WordPress.org

Ready to get started?Download WordPress

Forums

Header change for Mystique theme (13 posts)

  1. slaviksoul
    Member
    Posted 1 year ago #

    Hi there
    Hope you can help me.
    My website uses Mystique theme and I need to change my header but as the theme doesn't have a panel or options I need to change it in the editor, right?

    But as I never worked in CSS, I'm not sure what to do e.g. what code to add/change to the header.php template. Can you please advise?

    I have an image I want to upload - it's already in my media library - and I suspect it's just a matter of taking its file url and adding it to the code/style sheet, but no idea where exactly and if I need to add more than just the url.

    Hope this makes sense...

    You can see my site http://www.uniquecoaching.co.uk I already have an image as a header there but need to replace it - the original was done by my old designer so I never had to do it, hence the question :-)

    Thank you so much!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you a Child Theme or Custom Style/CSS plugin?

  3. slaviksoul
    Member
    Posted 1 year ago #

    Hey Andrew
    Thanks for the prompt reply! :-)
    I think Custom Style/CSS plug in but then I wouldn't know being a stranger to CSS. How can I tell?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the dashboard, do you have an option called "Custom CSS" or something, perhaps under Appearance?

    You can look in your plugins section for clarification.

  5. slaviksoul
    Member
    Posted 1 year ago #

    I can't see anything called Custom CSS. I do have "Appearance" though in the left hand navigation of my WP dashboard and when I click on that I can choose from Themes, Widgets, Menus and Editor.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

  7. slaviksoul
    Member
    Posted 1 year ago #

    Thanks, I did upload it but it's confusing me even more :-)
    It seems to only accept code (in settings) and that is exactly what I don't know how to do e.g. how do I tell it to change my header?

  8. radhika
    Member
    Posted 1 year ago #

    @slaviksoul

    if you want to change the header of your site then you have to edit the header in style.css of your theme. Search '#site-title' in style.css template and add as:

    #site-title{
    	background:transparent url(images/header.png) no-repeat center top;// edit here image path
    	height: 200px;
    }
  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Modifications to theme files will erase upon theme update.

  10. slaviksoul
    Member
    Posted 1 year ago #

    Hi Arti
    Thanks so much. I'm going to try now and will let you know how I got on

  11. slaviksoul
    Member
    Posted 1 year ago #

    Ok, I've had a look and found the section of the code I need (I think) but am still not sure where exactly - and what - I need to add.

    The url of the image I want to upload (which is in my media library) is this; http://www.uniquecoachingblog.com/wp-content/uploads/2012/06/FB-UC-cover-image.png

    Would you please be able to tell which part of the url and where exactly, in the below CSS code, I need to add it? Thank you SO much for your help

    #site-title .headline{
    font-size: 110%;
    border-left: 1px solid #ccc;
    color: #fff;
    float: left;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding: 10px 0px 10px 20px;
    margin: 20px 0 0 20px;
    }

  12. slaviksoul
    Member
    Posted 1 year ago #

    Hi anyone :-)

    I've played all day trying to work out how to do this and am still none-the-wiser :-(

    Anyone there who could tell me what to do?

    Thank you a million! :-)

  13. radhika
    Member
    Posted 1 year ago #

    @slaviksoul
    you can do one thing that you go in wp-admin.
    click on media > add new> select your image> save.
    Edit the upload image of your media library & copy the file url & goes in appearance> editor> style.css & search '#site-title' & paste your image url :

    #site-title{
    	background:transparent url(images/header.png) no-repeat center top;// edit url of media library image
    	height: 200px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic