CSS: Addressing two specific sections: how and where?

  • Author
    Posts
  • #37332

    stephanwaba
    Member

    Dear team,

    First: I absolutely love your theme. I think it is really attractive while at the same time functional and appealingly minimalistic – just the design I need for my tumblr-like patchwork.

    I have played around with various settings and CSS and I’m pretty finished with the theme looking the way I want. There are just two things I can’t manage and I’d really appreciate some help here.

    To be honest, I am no experienced CSS user at all – I operate strictly on trial and error basis; if you look at the changes I’ve made so far you will surely notice that.

    Here is the bit of code I’ve compiled so far in the WordPress.com “Customize CSS” mode:

    body a {
    	color: #bcae93;
    }
    
    h1.site-title {
    	text-transform: lowercase;
    	font-size: 2.8em;
    }
    
    div.site-title {
    	text-transform: lowercase;
    	font-size: 2.8em;
    }
    
    span.title-wrap {
    	text-transform: lowercase;
    }
    
    nav.site-navigation {
    	text-transform: lowercase;
    	font-size: 1.2em;
    }
    
    footer.site-footer {
    	font-size: .75em;
    }
    
    div.site-content {
    	background: white;
    }
    
    div.site-content {
    	font-size: 1.2em;
    	font-family: puritan;
    }
    
    .single .post-author {
    	display: none;
    }
    
    .single .post-category {
    	display: none;
    }
    
    .single .post-comment-count {
    	display: none;
    }

    So far so good.

    What I want to achieve now are two things:

    1. I set the font for body text to “Puritan” using WordPress premium font customizing function. Some text is displayed in Puritan then, but e.g. not the main text of blog postings or pages. This is still displayed in some sans-serif font that looks like Helvetica. I have tried it with various OSs and browsers. As you can see in the code above, I have tried to locate the correct CSS section to address the body text directly (font-family), but Puritan is still not displayed. The body text is printed no longer in sans-serif but in some serif font that reminds me of Times New Roman. Do you have any idea what I could do here? What would you recommend?

    2. I have tried to print all headings in lowercase as you can see in the code above. This works with most of the headings but I just can’t find the correct CSS tag for the heading in single post view, where the headline is included in the “title-block”. The headline there is still displayed in capital letters. What would you recommend me to do here?

    Thank you very much in advance for your help and time – and please forgive me if my questions are typical “Dummy”-questions…

    Best
    Stephan :)

    The blog I need help with is waba.me.

    #37595

    thelukemcdonald
    Theme Author

    Hi @stephanwaba,

    I’ll take a stab at answering your second questions. Your first question might be better suited CSS Customization or General forums as the font customization feature is a WP.com feature in which I’m not as familiar with to properly troubleshoot that issue.

    For the second question, try adding the following CSS to change single Post titles to lowercase:

    .post-title { text-transform: lowercase; }

    #37660

    stephanwaba
    Member

    Luke,

    Thank you very much for your quick reply. Unfortunately, the line you gave me doesn’t work… :( Maybe it has something to do with the fact that I modified h1 already with the site title and this is h1 too?

    Another question: How can I make sure that the featured photos are always a regular square? – I thought there is always a square of the photo used regulary but on my site waba.me the photos do not all have 4 sides which are equally long.

    Thanks very much for your advice!
    Best Stephan :)

    #37666

    thelukemcdonald
    Theme Author

    Try using h1.post-title

    For the other questions, it will be better to start a new support topic to handle those. This way we can keep on topic and it will be easier to discuss each topic specifically.

    #37679

    stephanwaba
    Member

    Luke,

    Thanks very much for your help. Will open own thread for image questions. Unfortunately I get an error message when I insert the line with the h1-tag – this has already been used in defining the headline in the line above (please see screenshot).

    http://content.screencast.com/users/Stephan.Waba/folders/Snagit/media/0f14d6e3-4431-4c61-bfcb-b6e1cdbda553/09.25.2013-22.51.png

    Best Stephan :)

    #37685

    thelukemcdonald
    Theme Author

    Interesting. I’ld try removing the h1 from in front of the .site-title and .post-title references.

    #37686

    stephanwaba
    Member

    thanks – but sorry; still in uppercase. even removing the h1 from in front of .site-title and leaving it in front of .post-title doesn’t do the trick. :(

    it’s really funny – I’m no CSS expert at all but normally with the help of the browser’s web inspector I can find my way around and address most of the tags I need. I just can’t address this one type of headline… where is it hidden?? *aaargh* :) :)

    best stephan :)

    here’s the code as it looks at the moment:

    body a {
    	color: #bcae93;
    }
    
    .site-title {
    	text-transform: lowercase;
    	font-size: 2.8em;
    }
    
    h1.post-title {
    	text-transform: lowercase;
    }
    
    div.site-title {
    	text-transform: lowercase;
    	font-size: 2.8em;
    }
    
    span.title-wrap {
    	text-transform: lowercase;
    }
    
    nav.site-navigation {
    	text-transform: lowercase;
    	font-size: 1.2em;
    }
    
    footer.site-footer {
    	font-size: .75em;
    }
    
    div.site-content {
    	background: white;
    }
    
    .site-main {
    	background: white;
    }
    
    div.site-content {
    	font-size: 1.2em;
    }
    
    .single .post-author {
    	display: none;
    }
    
    .single .post-category {
    	display: none;
    }
    
    .single .post-comment-count {
    	display: none;
    }
    
    .post-navigation {
    	display: none;
    }
    
    .post-title {
    	text-transform: lowercase;
    }
    #37690

    thelukemcdonald
    Theme Author

    Try placing ‘body’ in front of it.

    body .post-title

The topic ‘CSS: Addressing two specific sections: how and where?’ is closed to new replies.