Suffusion customized header?

  • hello1212

    (@hello1212)


    14 years, 2 months ago

    I’m new to WordPress and I just activated Suffusion. I’ve tinkered around with the bits that you can intuitively but wanted to change the header in terms of font size, typeface (bold italic), and overall look. I know if I click on Visual Effects, Body Font Settings, you can select the font face but you can’t change the above mentioned changes. I’ve also Googled to try to find an answer and found Sayontan, the creator of Suffusion, suggesting the following:

    “Byron,
    Interestingly you have picked three questions that cannot be tackled through the easier options I have provided. To answer you better, let me ask you this: do you want to change the font for the header or for everything? It looks like you picked Tahoma for everything, so I am guessing you want the header to have a different font. In that case, here is what you do:
    1. Go to Suffusion Theme Options
    2. Navigate to “Custom CSS, JavaScript and RSS”
    3. Go to “Custom Styles”
    4. Put in this code there:

    #header {
    padding: 15px 15px 15px 15px; /* The order is Top, Right, Bottom, Left. Set the values as appropriate. I think you are interested in increasing the left padding, so bump up the fourth */
    }
    h1.blogtitle {
    font-weight: bold;
    font-family: Impact, Charcoal, sans-serif; /* Or whatever font you wish. You can see the list of browser-safe fonts in the “Body Font Settings” section of the options */}

    and I’ve tried to no avail. Is it possible to create a header on PhotoShop and just import it? If so, what are the dimensions for the header size?

    Thanks in advance to the ever supportive and patient Forum Community!!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Sayontan Sinha

    (@sayontan)

    14 years, 2 months ago

    Can you post your URL? Tough to help you without that.
    Also note that the post you reference is fairly old, so some style elements will not work as pasted above. You might want to change “h1.blogtitle” to just “.blogtitle”. You can also take a look at the posts on the support forum, in particular this one: http://www.aquoid.com/forum/viewtopic.php?f=8&t=250

    Thread Starter hello1212

    (@hello1212)

    14 years, 2 months ago

    Thanks Sayontan for answering. I’ve checked out the above link and I’m lost. My website is whatsyours.com and I would like the header to look something like http://www.garancedore.fr/en/ or teganandsara.com. I know that the two differ greatly but I’m just looking for ideas on how to get started on customizing the header through PhotoShop.

    It seems from http://www.aquoid.com/forum/viewtopic.php?f=8&t=250 that I would have to have an image or logo already created in order to upload but I don’t know how to create the image in PhotoShop b/c I don’t have the dimensions of the header size. I went into “sizes and margins” and selected 850px for the width and 55px for the height. Do I just open new in Photoshop with those dimensions?

    Thanks in advance for your tireless work and support.

    Sayontan Sinha

    (@sayontan)

    14 years, 2 months ago

    The dimensions are entirely up to you. The height is immaterial – you can create an image of any height and adjust the header height appropriately in the theme. You need to create the image based on the width of your overall page. If you have set your page width to be 850px and you want your header image to fit snugly then your image should be 850px wide.

    Thread Starter hello1212

    (@hello1212)

    14 years, 2 months ago

    Thanks I’ll give a shot.

    notraces

    (@notraces)

    14 years, 2 months ago

    How does one go about just adding a graphic for the header – instead of text. My wife designed something nice for my site – http://www.day2daystuff.com – but I can’t figure out how to add it via the Suffusion interface.

    I see where it says:

    Enter the full URL here (including http://) — but I’m not sure where to put the graphic so it pulls up properly in the template.

    Sayontan Sinha

    (@sayontan)

    14 years, 2 months ago

    There is a tutorial for your question: http://www.aquoid.com/forum/viewtopic.php?f=8&t=250

    notraces

    (@notraces)

    14 years, 2 months ago

    sayontan — it’s not a very good tutorial. It makes no reference as to where to place the graphic when asked: Enter the full URL here (including http://)

    I figured out how to just put the image I want in my flickr stream — but I’d rather ftp it to the same site where I have WP installed. The problem I found doing it that way is the viewer is asked for ftp password info – maybe I’m not putting the graphic in the right folder?

    It’s a great template — very flexible — and quite easy to customize. If there were a little clearer instructions as to how to add a custom banner, I think that would really help.

    Thanks!

    Sayontan Sinha

    (@sayontan)

    14 years, 2 months ago

    Sorry, I thought the fact that it is asking you to put in the full URL is self-explanatory. It doesn’t really care where your image is. You could put it in your WP installation, you could have it on Flickr or Picasa or Photobucket or any other place you have access to. It doesn’t really matter. If you want you can add it to the Media Library of your WP installation through the admin dashboard, then use the URL of that.

    One word of warning – don’t put it in the theme’s folder, because that gets overwritten upon upgrade.

    eidolemelodie

    (@eidolemelodie)

    14 years, 2 months ago

    Thank you for all of your help with the above. I am having a difficult time seeing my new image header. I do not understand why… I have uploaded the jpg into my photo bucket account. Set all preferences recommended and the images is not there.
    Please help 🙂
    livegreentravelgreen.com

    Sayontan Sinha

    (@sayontan)

    14 years, 2 months ago

    You just need the URL of your image, http://i298.photobucket.com/albums/mm260/melodiemelodie/tree-1.jpg, not the whole HTML definition for it. I believe you put in the entire “a” tag and “img” tag in the field. Just put in the image URL starting with http

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Suffusion customized header?’ is closed to new replies.

Tags