Changing heading colours

This topic has 15 replies, 2 voices, and was last updated 8 years, 10 months ago by Eric.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
August 24, 2013 at 10:28 am #6755

CADsmarter
Customer

Hi all
I would like to change some text colours on my site but after lots of reading and tweaking I can’t get it to happen. I’ve been editing the Epik style.css. I’m using the Epik Gray colour theme.

http://cadsmarter.com

I want to change these two (2) titles to a different colour:

CADsmarter

unleash your creativity

I want to change the colour of these three (3) menu items when you hover over or select them:

Home Blog Contact

Any suggestions?

Thanks
Paul

August 24, 2013 at 12:02 pm #6759
Eric
Customer
First I think you’ll need to go back to the Header uploader in WP and then change the color to default so it doesn’t have a priority and override the other code.

Then look in your css file and change this code (on line 3063)-
```
.epik-gray #header a {
    color: #fff;
}
```
That is for your title.

For your description (right under it) change this code (on line 669)
```
#description {
    color: #eee;
    line-height: 1.25;
    padding: 10px 0;
}
```
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 24, 2013 at 9:58 pm #6778

CADsmarter
Customer

Thanks Eric. I’ll try that.

With the line numbers where are they? I’ve been trying to edit the css file in the APPEARANCE -> EDITOR and it doesn’t show line numbers. Can I switch them on or should I be copying the entire file out and editing it in a text editor and then importing back in? If that’s the case how do I import it back in?

Thanks again
Paul

August 24, 2013 at 10:33 pm #6785

Eric
Customer

The line numbers won’t show up in WP, most developers use a separate HTML/CSS editor to edit their files through FTP (it’s much safer/faster this way). If you’re using the WP editor, then I guess you could just open up a text editor and copy/paste the code there make the edits and then paste it back in WP. Although I’d highly recommend using an FTP program like filezilla or whatever you prefer.

Just make sure you’re using a text editor designed for HTML/CSS so the lines show up and the format of the css isn’t messed up.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

August 24, 2013 at 10:34 pm #6786

CADsmarter
Customer

OK I think I’ve answered this myself. Best way to edit the style.css file is to download it and edit in a text editor then re-upload via ftp.

But which style.css do I use? These are the ftp locations of the two style.css files I’ve found:

/www/wp-content/themes/epik

/public_html/wp-content/themes/epik

Thanks
Paul

August 24, 2013 at 10:40 pm #6787

CADsmarter
Customer

Awesome – thanks Eric. I love Filezilla so that’s good to know. I also found notepad++ which seems like a good text editor.

I’m not sure which style.css file I need to edit though. I found two of them via ftp – see previous post.

Any idea which one to edit?

Thanks
Paul

August 24, 2013 at 11:26 pm #6788

CADsmarter
Customer

Hi Eric
I wasn’t sure which style.css file to edit so I edited the style.css at lines 3063 and 669 through the dashboard with APPEARANCE -> EDITOR but the changes weren’t reflected on my site. I tried clearing the cache and reloading the site but no change. Do the changes take some time to filter through or should they happen instantly?
Thanks
Paul

August 25, 2013 at 1:28 am #6791

Eric
Customer

Yes you would edit the style.css file inside of the theme itself (Epik in your case).

You should be able to simply hit the Reload button on your browser and that’s usually enough to clear the cache. If you’re sure you’ve cleared it and no changes are happening, then take a look at your code to make sure it changed. If it’s there and it’s still not working, then maybe the code needs adjusting.

It’s 1:30 AM on my end, so I’ll take another look at it tomorrow morning.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

August 25, 2013 at 1:31 am #6792

CADsmarter
Customer

Thanks Eric. I’ll go back through and check everything.
Regards
Paul

August 25, 2013 at 2:14 pm #6807
CADsmarter
Customer
Ok I’ve got some colours changing but not how I wanted or expected.

I edited the code at line 3063 and it changed the colour of the menu items HOME BLOG CONTACT
```
.epik-gray #header a {
    color: #fe5a1d;
}
```
I edited the code at line 669 and nothing changed
```
#description {
    color: #fe5a1d;
    line-height: 1.25;
    padding: 10px 0;
}
```
I went through a lot of lines of code and tried changing them to get what I wanted but couldn’t get it to do what I wanted.

I ended up changing the titles by editing

Appearance -> Customise -> Colours -> Header Text Colour

So this is how it looks at present:

CADsmarter.com

Ideally I’d like to:

1. Be able to change the titles CADsmarter and unleash your creativity independantly of each other and have them different colours from each other.

2. Have the menu items react in the normal manner by being one colour then changing to another colour when hovering over them or selecting them.

Thanks
Paul
CADsmarter
August 25, 2013 at 2:20 pm #6809

CADsmarter
Customer

…and also I went back and changed the theme colour to default as suggested before I tried changing any of the code. None of the code changes did anything so I changed the theme colour to Gray and made the changes as in the previous post…

August 26, 2013 at 10:20 pm #6853
Eric
Customer
Whatever you’re adding isn’t working because there is code in your source that is overriding everything. This is what it is –
```
.custom-header #title a, 
.custom-header #title a:hover, 
.custom-header #description {
    color: #ffffff !important;
}
```
Either you’ve added that manually somewhere, or it showed up when adding a WordPress header. However it happened it needs to be removed in order for your other code to work.

Also, I would highly recommend you use the latest version of Epik, which is 1.3. This will make the nav links work properly in the way that you’re suggesting. If you’ve already made changes, then back those up and save them so you can transfer them to the new version. The new version will make all of this a little bit easier.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 4, 2013 at 8:57 am #7107
CADsmarter
Customer
Ok – Sorry I got sidetracked on other much less exciting stuff but I’m back trying to figure this out now.

I’ve loaded Epik 1.3 and have got the nav links working properly. I can’t find the custom-header code you’re talking about though.
```
.custom-header #title a, 
.custom-header #title a:hover, 
.custom-header #description {
    color: #ffffff !important;
}
```
I copied the style.css file and opened in notepad++ and did a search – but couldn’t find it. Is it in a different file?

Thanks
Paul
September 5, 2013 at 11:27 pm #7138

Eric
Customer

The custom header code was showing up from WordPress itself when you use the WP Header uploader…..so it won’t be in your theme files. But I don’t see any text in the logo anymore….did you decide to do something different?

I like the logo 🙂

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

September 5, 2013 at 11:34 pm #7140

CADsmarter
Customer

Thanks Eric – glad you like my logo.
Aah ok. I decided to use an image in the logo rather than text. As I’m a beginner in the coding area it will be easier and quicker for me to edit an image to get what I want rather than editing the code.
Thanks for your help thus far
Paul

September 6, 2013 at 12:36 am #7152

Eric
Customer

Great! If you decide to use actual text in the future just let me know and we’ll get it working.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.