Moving page higher on background and where to change color

Discussion in 'Compass WordPress Theme' started by computerpros, Jan 7, 2016.

  1. computerpros

    computerpros Member

    Joined:
    Jan 4, 2016
    Messages:
    34
    Likes Received:
    0
    For better viewing, I would like to move the webpage to the top of the colored background. Also, I would like to reduce the height of the Header box that contains the logo and the page navigation buttons. I have attached a pic to better explain.
    Also, what is the suggested image size for the logo?
    Also, how do I change the color of the background?

    Thank you for your help!
     

    Attached Files:

  2. priya

    priya Guest

    Hello,

    Greetings from InkThemes!

    Solutions of your above issues are accordingly..

    1) I would like to move the webpage to the top of the colored background.

    Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    .page_content_wrapper {
        margin: 27px 0 120px 0;
    }
    2) I would like to reduce the height of the Header box that contains the logo and the page navigation buttons.

    Code is given below,
    Code:
    .header {
        margin: 13px 0px 4px 0px;
    }
    3) what is the suggested image size for the logo?

    Suggested size is 340px*46px as you can also check it from theme option panel of your dashboard (under General Setting).

    4) How do I change the color of the background?

    Please paste the code given below in Custom CSS field of your dashboard.
    Code:
    body {
        background: lightsalmon;
    }
    Note: Change numeric value and color as per your requirement..

    Hope it will resolve your issues..

    Do let me know if you need more assistance,

    Thanks & Regards!
    Priyanka
    InkThemes.com
     
  3. computerpros

    computerpros Member

    Joined:
    Jan 4, 2016
    Messages:
    34
    Likes Received:
    0
    Are you sure this size is correct?? I have attached a screen shot, I don't see what the resolution is to be.
    3) what is the suggested image size for the logo?
    Suggested size is 340px*46px as you can also check it from theme option panel of your dashboard (under General Setting).

    Also, could you explain more about changing the color of the background? That is still unclear on where I get the number and where to put it in the CSS code. Thank you for the other settings, they worked pretty good!
     

    Attached Files:

  4. priya

    priya Guest

    Hello,

    Sorry for the previous reply of the logo size....

    The size of logo is 170px*35px as you can also check this in the screenshot given below..

    logo_size.png

    For the background color, code is given below and also there is a screenshot where you have to put that CSS in your dashboard.
    Custom_CSS.png

    Code:
    body.compass_theme {
        background: lightcoral;
    }
    Hope it will resolve your issue

    Do let me know if you need more assistance,

    Thanks & Regards!
    Priyanka
    InkThemes.com
     
  5. computerpros

    computerpros Member

    Joined:
    Jan 4, 2016
    Messages:
    34
    Likes Received:
    0
    Thank you for the reply. I understand "where" to the CSS code, but where is the colors that I can use? Is there a list of color options? For example maroon.
     
  6. priya

    priya Guest

    Hello,

    There is an option for selecting color for your theme under styling option (Appearance=>Theme Option=>Styling Option=>Theme Stylesheet) of your dashboard as you can also check it in the screenshot given below.

    stylesheet.png

    And if you want to add another color for your background, you can easily add that by adding the code (as I have also mentioned in my previous reply) and put your desired color instead of light coral, like:
    Code:
    body.compass_theme {
        background: gray;
    }
    Here I am giving you a site URL where you can find various color code, please have a look..

    http://html-color-codes.info/color-names/

    Hope you will find it helpful..

    Do let me know if you need more assistance,
    Thanks & Regards!
    Priyanka
    InkThemes.com
     

Share This Page