Need help? Check out our Support site, then


Colour, font, blockquote

  1. http://janetscraft.wordpress.com

    I would like to know the basics as to how to:
    1) Change my wrap area colour (by keeping my own background image).
    2) How to change hyperlinks' colours to another colour. Currently when I use a hyperlink, it appears grey -- which is too light. The hovering colour has been changed to blue.
    3) How to change tagline's font size.
    4) How to change the 'search' button's colour.
    5) How to enable blockquote.

    Many thanks for your help

    The blog I need help with is janetsnotebook.com.

  2. 1) Change my wrap area colour (by keeping my own background image).

    To change the background color for the movie Main container of the Twenty Twelve theme, add this to your Appearance → Themes → Customize → CSS panel:

    #page {
    	background: #0ff;
    }

    I used to you as the color, but you can change the color code anything you like.

    If you wanted to use an image as the background instead he would update that code to the following:

    #page {
    	background: #0ff url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
    }

    I used a WordPress logo as the example image, that you can update the url() value to use your own image.

  3. 2) How to change hyperlinks' colours to another colour. Currently when I use a hyperlink, it appears grey -- which is too light. The hovering colour has been changed to blue.

    I checked http://janetsnotebook.com/ and I noticed you have already updated the hyperlink color using the following custom CSS:

    .entry-content a {
    	color: #166fc7
    }
    .entry-content a:hover {
    	color: #159
    }

    Nice work!

  4. 3) How to change tagline's font size.

    To change the tagline font size in the Twenty Twelve theme, the following to your Appearance → Themes → Customize → CSS panel:

    .site-header h2 {
    	font-size: 2em;
    }

    I just the font size 2em value until it's the size you want.

  5. 4) How to change the 'search' button's colour.

    The following example will remove the shaving from buttons and change the background color for them to read and text color to white:

    input[type="submit"] {
    	background-image: none;
    	background-color: red;
    	color: white;
    }

    Adjust the color codes as needed.
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

    If you want to target just the search button only without affecting other buttons, change the selector in the example above from "input[type="submit"]" to "#searchsubmit"

  6. 5) How to enable blockquote.

    Block quotes are a type of HTML element. take a look at this tutorial to learn more about them:
    http://www.htmldog.com/guides/html/intermediate/text/

    You can add blockquotes in WordPress.com using one of the buttons in the visual editor. See number six in this example:
    http://en.support.wordpress.com/visual-editor/#row-1

  7. Thank you very much. I've managed to enable a blockquote in colour (which agrees with my background colour.) It looks impressive. Thank you for your help: http://janetsnotebook.com/2013/06/25/chandlers-ford/

  8. I've changed 'submit' button to orange too. Thank you. Please could you also advise:

    How I could make this Search button larger? (i.e. larger font size too)

  9. Tagline font:

    Thank you -- I changed the size. Now I need the tagline font type to agree with the header. Currently I used Arimo. What should I add?

    Many thanks. My site is looking so much nicer.

  10. Nice work on the blockquote styling!

    How I could make this Search button larger? (i.e. larger font size too)

    Here's an example that will make the search button bitter:

    #searchsubmit {
    	padding: 12px 20px;
    	font-size: 20px;
    )

    Adjust the number values as needed.

  11. Now I need the tagline font type to agree with the header. Currently I used Arimo. What should I add?

    To do this, I would right-click and select "Inspect Element" on the site title to see exactly how the font-family property is setup, and then copy that into a new rule for the tagline.

    In your case though, I checked http://janetsnotebook.com/ and the site title and tagline happen to already be the same font. Did you mean you want the font color and weight of the tagline to match the color and weight of the site title?

  12. Thank you for the reply.

    I didn't realise the 2 fonts are the same -- they appeared different to me. I would like to increase the font size of my tagline. Many thanks.

  13. Thank you for your help in font size of 'search' box.

Topic Closed

This topic has been closed to new replies.

About this Topic