Styling text and block quotes (Suburbia theme)

  • Unknown's avatar
    errorsinc · Member ·

    I was wondering if there is a way to increase the font-size and line-height all across the posts and pages, without having to wrap the text in <div> or <span>? There is, of course, the Fonts (heading, body text) option in the customisation menu but that doesn’t provide any control of the line-spacing and it adds the size change to other bits on the home page, which I don’t want.

    The same for block quotes, which you can see here: http://contextualternate.com/hamiltonian-system/

    What I’ve done so far is

    blockquote {
	background: none;
	margin-top: 0;
	margin-left: 30px;
	padding-top: 0;
	padding-left: 30px;
	padding-bottom: 0;
	text-shadow: none;

}

    This however does not let me change ‘font-color’ or ‘line-height’ so that must be getting defined somewhere else I’m not able to locate. It looks a bit blurry for some reason, which I’m guessing is the colour but may be some other font attribute.

    Will be grateful as ever for your help. Many thanks!

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

  • Unknown's avatar
    justpi · Member ·

    a) You use span tags when you want to target words or phrases inside a paragraph or other text block. For example, if you wanted to highlight a word by turning it to colored bold italics, you would write this in the Text editor:
    <span style="color:#456789;font-weight:bold;font-style:italic;">WORD HERE</span>
    But when you want to use this repeatedly (for several isolated words in a post and/or in several posts) then, instead of styling each one of these words this way, you invent a name for this type of thing (say, “highlight”), and you define the properties and values for it in the CSS editor: 

    .highlight {
color: #456789;
font-weight: bold;
font-style: italic;
}

    Then each such word will only require this in the Text editor:
    <span class="highlight">WORD HERE</span>

    You use div tags to create special sections. For example, the boxed text on this page is a div styled the way I wanted:
    http://wpbtips.wordpress.com/2012/02/05/introduction-to-html-for-wordpress-com-users/2/
    As with span tags, if I wanted to create similar boxes on several posts I would create a class for them (if I had the Custom Design upgrade on that blog).
    You might also need div tags to create special effects; for an example, see this demo post of mine, esp. the images at the bottom:
    http://panosdemos.wordpress.com/2013/05/25/rollover-images/
    To create this effect, I had to enclose the images in a div that says (I’m simplifying) display image A but switch to image B upon hover, and do it gradually.

    You never need any of this if you want to change the appearance of all the occurrences of an element that is already defined in the HTML of the blog (such as the regular content of all posts, or all the blockquotes, or all the text widgets, etc etc etc).

    b) If you inspect an element to examine its default CSS and you don’t see properties and values you’d like to change, this doesn’t mean they don’t exist. It might mean that they are inherited from a more global element (in which case you add the properties and values you need for the element you’re examining), or it might mean they are defined for an element that is contained in the element you’re examining (in which case you need to change that contained element).
    For example, the original CSS of Suburbia specifies a certain font size and line height for paragraphs when you view a single post, and blockquotes contain paragraphs. So, a) if you change the font size and the line height for paragraphs, blockquotes will also change the same way; b) if you want to change the font size and the line height for your blockquotes only, applying them to “blockquote” will have no effect: they need to be applied to “blockquote p”.

    So, before moving to actual solutions: do you want to change regular text and blockquotes the same way, or do you want a certain font size and line height for regular text but a different font size and line height for blockquotes? (I would suggest the former.)

    As for the “blurry” appearance, that’s because bqs on Suburbia are set to be 0.8 opaque. What do you want to do about it? Turn them to same as regular text? Different color? Other (for instance italics or left border)?

  • Unknown's avatar
    errorsinc · Member ·

    Thanks a lot for the explanation, this is really helpful!

    What I was thinking of was the latter scenario in your comment: i.e. separate control of body-text styling and blockquote styling.

    For the main text I want to be able to define a text size and line-spacing that I think might be easier for long reading like essays and for the blockquote styling I want to change it to look more or less like a smaller-sized version of the main text. The same colour/effect should be good.

    Thanks so much!

  • Unknown's avatar
    justpi · Member ·

    Then add this and change the values at will: 

    #single p {
font-size: 13px;
line-height: 22px;
}
#single blockquote p {
font-size: 13px;
line-height: 22px;
opacity: 1;
}

    If you see that the font size doesn’t change, turn this:
    font-size: 13px;
    to:
    font-size: 13px !important;

  • Unknown's avatar
    errorsinc · Member ·

    Works perfectly! Many thanks.

  • The topic ‘Styling text and block quotes (Suburbia theme)’ is closed to new replies.