Size of Header & Background Color

  • Unknown's avatar

    How about the options of the third option on the top row of the website? How to change the color? Yup, I would like to specify a common system font of Chinese word. How can I install and make it? Thank you.

  • Unknown's avatar

    I would like to change the same color for the title of each page. How can I make it? Thanks so much for your reply.

  • Unknown's avatar

    Thank you for your reply. How to change the size and color of the options (the top row of the website)?Can I have more fonts for Chinese words?

  • Unknown's avatar

    Thank you for your reply. How to change the size and color of the options (the top row of the website)?Can I have more fonts for Chinese words?

  • Unknown's avatar

    I really appreciate your prompt reply. You are very efficient. Thanks so much.

  • Thank you for your reply. How to change the size and color of the options (the top row of the website)?Can I have more fonts for Chinese words?

    I actually already answered those questions earlier, not sure if you saw them. Let me know if I misunderstood.

    Yup, I would like to specify a common system font of Chinese word. How can I install and make it?

    You would first find the element you want to target, and then add a line like this in your CSS:

    .element-name {
       font-family: Name1, Name2, sans-serif.
    }

    You’ll need to use a browser inspector to find the element – I gave you some resources earlier to help you find each element:

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    The font name has to exactly match what it’s called in the system.

    If you have new questions, could please start a new thread rather than continuing to add them here? Thanks.

  • Unknown's avatar

    My English is not very well. I followed your instruction to change the color of the options on the top row of the website. The color is changed (purple). However, there’re some sub-options of each options. The color doesn’t change (dark green). I would like to keep the color same with the options and the box of sub-options.

  • Before we look at the sub-menu colours, I noticed something else.

    Since you’ve made the menu font larger and it’s now split onto two lines, you’ll need to adjust your heading CSS as it’s being cut off at the top:

    Hong Kong Emotional Freedom Centre 1

    Try adjusting the numbers here to make the heading taller again:

    .header {
        background-color: #ffffff;
        min-height: 130px;
        padding-bottom: 5px;
        padding-top: 90px;
    }

    My English is not very well.

    Your English is very good!

    However, there’re some sub-options of each options. The color doesn’t change (dark green). I would like to keep the color same with the options and the box of sub-options.

    This is what your sub-menus look like right now:

    Hong Kong Emotional Freedom Centre 2

    Could you explain which sections you want to be what colour?

    Do you want all your dropdown menus to be purple text on the greenish background, or something else

  • Unknown's avatar

    I read the website from my computer. The header title is not being cut off.
    I want to change the background-color of my dropdown menus from green to purple ( #bb00bb). Also, how to change the color of the title of sub-menus. Thank you so much for your help.

  • I want to change the background-color of my dropdown menus from green to purple ( #bb00bb).

    Try this:

    .main-nav li li {
         background: #bb00bb;
    }

    Also, how to change the color of the title of sub-menus.

    Try this, replacing the colours with whatever codes you like.

    .main-nav .highwind-navigation li li a {
    background-color: #bb00bb;
    color: #000000;
    }

    I read the website from my computer. The header title is not being cut off.

    That’s good to hear, but just keep in mind that even though it looks OK on your screen, the header is being cut off for some visitors to your site because of the CSS changes you’ve made. People at different resolutions see the site in different ways, and it’s important to be mindful of that when adding custom CSS that alters the layout. Not everyone sees what you see. :-)

  • Unknown's avatar

    Thank you for your reminder. I adjust my heading CSS. Is it being cut off at the top on your screen?
    How to change the background-color of the option at the top of the website from green to another color?

  • Unknown's avatar

    kathrynwp, You are really helpful. You have helped me to solve the problem that lasted for half year.

  • Unknown's avatar

    I adjust my heading CSS. Is it being cut off at the top on your screen?

    Here’s what I see for the header at laptop-sized screen of 1280 x 800:

    Screen Shot 2014 06 21 at Sat Jun 21 10 08 25 PM

    This custom CSS that you have added in Appearance > Customize > CSS editor is causing the size change:

    .header {
        background-color: #ffffff;
        min-height: 150px;
        padding-bottom: 5px;
        padding-top: 90px;
    }
  • Unknown's avatar

    How to change the background-color of the option at the top of the website from green to another color?

    I think you’re talking about the bottom border on the main navigation. You can add the following CSS to adjust the color of that:

    .main-nav {
    	border-color: #703A9B;
    }
  • Unknown's avatar

    How to change the color from green to another one as the attached photo from the above link? Thank you.

  • Unknown's avatar

    I adjust my heading CSS. Is it being cut off at the top on your screen?

  • Unknown's avatar

    How to change the color of Page title and the distance between the header and the page title?

  • Unknown's avatar

    I choose DFKai-SB (font of Chinese word) and added in CSS. I can’t find this font from my font list. How can I find this font and change the word in this font?

  • Unknown's avatar

    How to change the color from green to another one as the attached photo from the above link?

    Ah, I see! Here is an example that will change the text color to white and the background color to purple when you hover over menu items in the main navigation on the Highwind theme:

    .main-nav ul.menu > li:hover > a,
    .main-nav ul.menu > li > a:hover {
    	background-color: #703a9b;
    	color: #fff;
    }
    
    .main-nav ul.menu ul li:hover > a,
    .main-nav ul.menu ul li.current-menu-item > a,
    .main-nav ul.menu ul li > a:hover {
    	background-color: #703a9b;
    	color: #fff;
    }
  • Unknown's avatar

    I adjust my heading CSS. Is it being cut off at the top on your screen?

    I can see more of it. For what it’s worth, it looks absolutely fine the way it is.

  • The topic ‘Size of Header & Background Color’ is closed to new replies.