Complete CSS newbie looking for help with two small things

  • Unknown's avatar
    illutypeblog · Member ·

    Hi I’m trying to start up a blog on illustrated typography, I’ve chosen Blogum as my theme but I was just wondering if anyone could help me with a couple of things.

    Here is it at the moment: http://illutype.wordpress.com/

    1) I realise this is probably a common question but I want to have my logo instead of the title text, at the moment I’ve used a custom header not knowing how to edit the CSS and just left a blank title and obviously you can see there’s still a dash there and links above. How could I move my logo above the links and delete the dash and extra white space, keep the search bar aligned, etc.?

    2) Is there any way to remove the categories from appearing at the side of posts underneath the date? Because my blog is niche pretty much everything falls under the category of illustrated typography so at the moment I’ve been writing artist names in the categories – but I was wondering if there was a way to remove them off the blog altogether? (Also I might try and make that column with the date, category etc., slightly wider, so I can fit longer titles on one line, but I think i’ll be okay with that if I can find some measurements in the CSS to edit.)

    Anyone who has any idea how I could go about doing these, I would really appreciate your help! I love what I’ve experienced of WordPress so far and only want a simply blog, but still the CSS is throwing me a bit.

    Thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    1. Do the following and then delete the header image at appearance > header and see what you think. I’ve used your existing header image. Also make sure and check while logged in and also when logged out to make sure nothing shifts or changes as far as the relationships between the elements in the header area.

    #header {
background: url("http://illutype.files.wordpress.com/2011/10/illutypeblogheader.jpg") no-repeat scroll left -10px transparent;
padding-top: 150px;
}

#header h1 {
display: none;
}

    2. This will get rid of the category display to the left of the posts.

    .post-categories {
display: none;
}

    Widening the area where the post titles are takes widening several things.

    Right now the overall wrapper is 945px wide and the post title area is 145px wide. How much wider did you want to make it? I would not suggest going wider than 1000px in overall width since there are still a good number of people out there using 1024px wide monitor resolutions.

  • Unknown's avatar
    illutypeblog · Member ·

    thescaredpath – thank you very much for your quick reply, you’ve been a huge help already.

    I’m not sure how much wider I’d like it as I’m not exactly sure how wide a px is, but I would only want it slightly wider, maybe if you would be kind enough to share what code I’d need – I could have a little play around with the specific px amount? Thank you for your advice on not going wider than 1000px overall – I’ll make sure I won’t.

    Sorry to ask for more from you but do you know how I could bring the links and logo down ever so slightly, to sit level with the base of the search bar? Also, I changed the fonts to use Museo Slab for headers and Museo Sans for body text, but the links at the top must count as body text because they are in Museo Sans – is there any way I could make them Museo Slab?

    That’s it – I promise!

    Thank you very much

  • Unknown's avatar
    illutypeblog · Member ·

    Oh I know I promised lol but I’ve also realised the typeface for the “Search” in the search bar is Museo Sans too – any chance I could make that Museo Slab as well?

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    First bit is a “replace” on what I had given you before and moves the logo down, and the second bit moves the bottom of the menu item labels down to align with the bottom of the search box.

    #header {
background: url("http://illutype.files.wordpress.com/2011/10/illutypeblogheader.jpg") no-repeat scroll left 11px transparent;
padding-top: 150px;
}

#access {
margin-top: 11px;
}

    Font change for the to navigation (hopefully)

    #access a {
font-family: museo-slab-1,museo-slab-2 !important;
}

    This takes the overall content area to 1000px and increases the are where the title is from 145px to 200px. Give this a try and see what you think. The width of the sidebar and the width of the post area were kept the same as original.

    .wrapper {
width: 1000px;
}

#content {
width: 760px;
}

.post-meta {
width: 200px;
}
  • Unknown's avatar
    illutypeblog · Member ·

    thesacredpath – thanks for your help so far!

    So, I’ve managed to get the links at the top in the same typeface now, and removed the categories. Cheers!

    I still can’t work out are how to change the font of “Search” in the search box, so that it matches the rest of the blog. And unfortunately when I entered the code to increase the width it made the links at the top go with it, so nothing lined up anymore, so I changed it back, maybe I’ll make do with the current width.

    I would really like to change the typeface of “Search” in the search bar to Museo (slab or sans, haven’t yet decided!) though so that it matches the blog – is there any other way you think I might be able to do this?

    I really do appreciate all your help

  • Unknown's avatar
    thesacredpath · Member ·

    Along with the above width changes, change the background declaration in #header to this (note the 55px where “left” used to be).

    background: url("http://illutype.files.wordpress.com/2011/11/illutypeblogheader2.jpg") no-repeat scroll 55px 8px transparent;

    And add the following also to #header.

    padding-left: 215px;

    On the font for the search form, here you go, but it makes little difference since the very light grey and the white are so close in value… no contrast.

    .search-form-holder input {
font-family: museo-slab-1,museo-slab-2 !important;
}

    The other thing to remember is that XHTML, the markup that creates your page, is like a bunch of nested boxes, and sometimes changing one box requires the changing of others, so it sometimes just requires that you make some additional changes. Most always one change in the CSS will require additional changes, at least anytime that an element is made larger or its position changed.

  • Unknown's avatar
    illutypeblog · Member ·

    It is looking great now!

    Thank you so much for all of your kind help!

    :)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Complete CSS newbie looking for help with two small things’ is closed to new replies.