• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

How to Change Logo Size / Menu Colour / Font Colour/Size

Home › Community Forums › Aspire Theme Support › How to Change Logo Size / Menu Colour / Font Colour/Size

  • This topic has 4 replies, 3 voices, and was last updated 5 years ago by Wes.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 6, 2017 at 1:54 pm #21711
    jforrest7
    Customer

    Hi Wes, Everyone,

    Here are some things I can’t figure out how to change. Thanks so much!

    1. How to change the (primary) menu bar color from black (the “go” in the e-news extender and footer are also black by default).

    2. How to make the logo to the left of the menu bar bigger

    3. How to change the font size/colour in Front Page 1

    Thanks so much for the help!

    http://198.46.81.181/~jforre5/

    July 9, 2017 at 10:06 am #21723
    jforrest7
    Customer

    Waiting for your help. Thanks.

    July 9, 2017 at 9:23 pm #21725
    Wes
    Moderator

    That’s weird, I remember seeing this and replying a few days ago. Not sure how it didn’t post.

    You can change the background header color on line 1174 in your style.css file (if you don’t have access to the line numbers you can search for this) –

    .site-header {
    	background-color: #000;
    	left: 0;
    	position: fixed;
    	top: 0;
    	width: 100%;
    	z-index: 999;
    }

    The enews button is completely separate from the header background so you’ll have to change that color from line 1112 in the enews section –

    .enews-widget input[type="submit"] {
    	background-color: #000;
    	color: #fff;
    	margin: 0;
    	/*width: 100%;*/
    }

    The footer background color can be found on line 2423 –

    /* # Site Footer
    ---------------------------------------------------------------------------------------------------- */
    
    .site-footer {
    	background-color: #000;
    	color: #fff;
    	font-size: 16px;
    	font-size: 1.6rem;
    	line-height: 1.6;
    	padding: 30px 0;
    	text-align: center;
    	text-transform: uppercase;
    }
    

    “2. How to make the logo to the left of the menu bar bigger”

    There’s a couple ways to do this, but you can start by increasing the height on line 1256 to see it looks –

    .header-image .site-title > a {
    	background-size: contain !important;
    	display: block;
    	height: 76px;
    	text-indent: -9999px;
    }

    “3. How to change the font size/colour in Front Page 1”

    Look for the following code on line 1560 OR you can add this in your own custom css section –

    .front-page-1 .image-section

    This is where you can add in your own custom color/size

    If you want to target a specific tag, (h4 for example) add this –

    .front-page-1 .image-section h4

    …then you can add in the color/size you want it to be.

    Let me know if that helps

    January 24, 2018 at 12:13 pm #22330
    egh25
    Customer

    Regarding question 3: “3. How to change the font size/colour in Front Page 1”

    What do I add to change the color? I went to line 1560

    .front-page-1 p {
    	font-size: 50px;
    	font-size: 2.4rem;
    	letter-spacing: 1px;
    }

    and added font color="red" but it didn’t work.

    Could you clarify what the code is to change the font? Thank you!

    January 24, 2018 at 6:43 pm #22354
    Wes
    Moderator

    Can you post a link to your site so I can see exactly which line you’ll need to edit?

    Also, if you want to add the color red in your CSS it should look like this –

    color: red;

    or

    color: #ffff00;

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework