Welcome! To use this support forum, please Login or Join Today!

   

Help with changing some colors of links and stuff in Lightfast

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

Hello. I need help with making a few changes to the Lightfast theme which I purchased from you.

Here is the website: http://www.bluetreejuice.com/

I need help with the following:

1 - I need to “center” the header image. It is the “word cloud” image nested in the header; I need that entire image top-centered inside the header.
2 - I need the space between the navigation (About, Disclaimer,Get in the Know, etc) and the header image to be smaller. In other words a smaller space between these 2 things.
3 - I need to change the color of the navigation to “white” (ffffff) where it says (Disclaimer and Get in the Know)... I looked everywhere in the style sheet and cannot find where to change this.
4 - On the bottom (way bottom) on the footer where it says “Locations” I need the Miami and Honolulu addresses to change from grey to white (ffffff) color.

Please help… I’ve been fighting with this for days and I’m so frustrated. Paid $49 for this theme and I like it, but I need CSS help.. please help me!

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

I fixed the header image by making it smaller… (from 989 pix wide to 940 pix). But everything else is still giving me problems.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi,

2 - I need the space between the navigation (About, Disclaimer,Get in the Know, etc) and the header image to be smaller. In other words a smaller space between these 2 things.

You can change this from: Appearance → Customize → Navigation: Menu Item Spacing.

3 - I need to change the color of the navigation to “white” (ffffff) where it says (Disclaimer and Get in the Know)... I looked everywhere in the style sheet and cannot find where to change this.

By default, the menu uses the color from Appearance → Customize → Colors: Primary Brand Color. To customize this, first you’ll need to be using the child theme. It looks like yours was not installed. This disables automatuc updates as the parent theme is overwritten on update. The child theme is the override of the parent theme.
See: http://www.simplethemes.com/theme-docs/lightfast-documentation

Once you have the child theme installed and activated, you could add the following rules in lightfast-child/style.css:

/* Menu Color */
#menu ul#nav li a {
    
color#fff !important;
}
/* Menu Hover Color */
#menu ul#nav li a:hover {
    
color#eee !important;

4 - On the bottom (way bottom) on the footer where it says “Locations” I need the Miami and Honolulu addresses to change from grey to white (ffffff) color.

Same as with the above question. In lightfast-child/style.css:

#footer h3 {
    
color#ffffff;

 

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

Thank you.

Is there a way to remove the header, or hide it, so that the Teaser is the only thing up top?

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

The ideal thing is for me to have just a thin blue bar, probably 50-100 pixels high, at the very top with the navigation inside (18 point text size), and then the Teaser image right below it.

CSS is soooooooooooooooooooooooooooooooooooooo hard.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Nah, CSS itself isn’t that hard. It can be overwhelming when you’re trying to take it apart vs putting it together, though.

If I’m understanding you correctly, this is something like what you’re trying to do:
http://cl.ly/image/392c042x3A0R

The first thing to do if you’re wanting to remove the header is add an override function to your child theme functions.php:

You’ll need to add the following snippet to wp-content/themes/lightfast-child/functions.php.
If you don’t have FTP, you can go to Appearance → Editor → functions.php and add the following:

function remove_logo() {
    remove_action
('skeleton_header','skeleton_logo');
}
add_action
'after_setup_theme','remove_logo' ); 


Next, you’d need to edit wp-content/themes/lightfast-child/style.css the same way and add the following. See the comments to help you along:

#header {
    /* Add a blue background color */
    background-color: blue;
    /* Remove all padding and margin */
    padding: 0;
    margin:0;
}

#menu ul#nav {
    /* Remove the top margin from the menu */
    margin-top:0 !important;
}

#menu ul#nav li a {
    /* Change the color of the menu items */
    color: #fff;
}
#menu ul#nav li a:hover {
    /* Change the hover color of the menu items */
    color: #fff;
}
{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

Thank you, I did as you instructed and was able to make the changes I need: http://www.bluetreejuice.com/

I need to make a couple of other changes.

1- I need to make the Teaser stretch completely across the screen vertically, so that no matter how big the browser window is, it will fill out across the screen.
2- I need to make the Teaser a bit taller, so I must be able to adjust the height of it.
3- I need to change the color of the background box from “white” to “none”, so that the actual background is the wooden background texture, rather than a colored box.

Thank you so much for your help.

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

For this:

1- I need to make the Teaser stretch completely across the screen vertically, so that no matter how big the browser window is, it will fill out across the screen.

I will have to make the top blue bar (with the navigation) stretch across the screen as well, so that is stretches along with the teaser.

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

Please let me know if this is doable:


Attachments:

https://www.filepicker.io/api/file/cQfK3MQRZyB5fyyUt4oJ

{name}
Rank

Total Posts: 9

Joined 2014-07-16

PM

 

Ok, I figured everything out, except I now need to fix the Teaser image. I try to change the height but it tiles.

Where can I find in the CSS where it controls the tiling so that the image is centered in the teaser with NO tiling or scrolling? Please let me know. I’v solves most of the issues. Thanks.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You should be able to change the teaser background behavior with:

#teaser {
background-repeatno-repeat;
background-positiontop center;
{name}
Rank

Total Posts: 1

Joined 2014-12-01

PM

 

I posted this in the child theme css of the theme editor in wordpress, but nothing happened:

/* Menu Color */
#menu ul#nav li a {
  color: green !important;
}
/* Menu Hover Color */
#menu ul#nav li a:hover {
  color: red !important;
}

I’m still struggling to change the menu colors..
can you please help?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

@dldwrsa can you provide a link or post a new topic please?