FrixelOne Link Color

[Didier9]

I am using the FrixelOne theme.
I would like to make the link color a little darker shade of blue, more like the default shade for links as set by most browsers. As it is, the color is very washed out (using either Chrome, Firefox or IE makes no difference).
I do not know where it is set (I am a total css newbie). I looked through the various css files, but there are many of them and I do not know which are used in any particular instance...
Thanks in advance,
Didier
PS: in this theme, it looks like regular text is dark grey rather than black. I am not sure if I want to change it, but just in case, it would be good to know where that is set as well.

[frixelsolutions]

Hello!
I am the developer of the Frixel One theme and would be more than happy to help you with this.

The theme is based on a responsive framework called Bootstrap. To allow future Bootstrap updates in the future and ensure compatibility with any Bootstrap addons you might want to use in the future, don't edit Bootstrap's files including CSS and javascript.

The CSS file you'll want to edit is css/stylesheet.css

If you wanted to change the color of the header text which is a link (unless you use the logo instead as per header.php) you could do this for example (see example below) where #FFFFFF is the color. You can replace this with any other color.

You can use the color picker in a program like Paint.net (this is a free program for Windows that will help you with image manipulation and colors when working on stuff). Alternatively you could get them from any website, like:
http://www.color-hex.com/

However just because it's easier to read I recommend making all the letters in the color code capital so rather than like 1c1c1c you'd wanna do 1C1C1C. This doesn't affect the color it's just a personal preference.

In the example I've put below it will affect the .hdrlink element which in the Frixel One theme is the header text. But you should be able to style the links in the content area with .container (just put that instead of .hdrlink).

The HTML element "a" is for a link. However in the example below I'm styling a:hover,a:active,a:visited as well, though it's optional. The text-decoration: none removes the underline. If you want to keep the underline for links (which you probably want for your content) just remove that line from the example below. By the way, I added !important because it overrides Bootstrap's default styles.

Code:

.hdrlink a,a:hover,a:active,a:visited {
  color: #FFFFFF;
  text-decoration: none !important;
}

Regarding changing the color of the text currently it's #333333 which is a very dark gray. I've attached a picture comparing it to black. If you want to change the color of the text you can add something like this to stylesheet.css in the css folder as well.

Code:

.container p {
    color: #000000;
}

Anyway if this does not work for you or you have any further questions, just ask

[Didier9]

In the example I've put below it will affect the .hdrlink element which in the Frixel One theme is the header text. But you should be able to style the links in the content area with .container (just put that instead of .hdrlink).

The HTML element "a" is for a link. However in the example below I'm styling a:hover,a:active,a:visited as well, though it's optional. The text-decoration: none removes the underline. If you want to keep the underline for links (which you probably want for your content) just remove that line from the example below. By the way, I added !important because it overrides Bootstrap's default styles.

Code:

.hdrlink a,a:hover,a:active,a:visited {
  color: #FFFFFF;
  text-decoration: none !important;
}

Hi,
Thanks for the response. I think we are close. However, I do not want to change the color of links in the header but in the body, some of it being in tables and some of it being in open text. The only link in the header is the logo...

I also wants different colors for visited links and I want to keep the underline. In essence, I would like the links to look just like they do on a normal page in a standard browser when they use the defaults.

I am not sure how to use css to set different colors for active and visited links. Should I just create duplicate blocks like this?

Code:

.container a {
    color: #111111;
}
.container a:hover {
    color: #222222;
}
.container a:active {
    color: #333333;
}
.container a:visited {
    color: #444444;
}

and then this for table data:

Code:

.td a {
    color: #111111;
}
.td a:hover {
    color: #222222;
}
.td a:active {
    color: #333333;
}
.td a:visited {
    color: #444444;
}

I made the change for the text color and that works. Thanks!

[Didier9]

OK, I added this:

Code:

.container a {
  color: #0000FF;
}

and it's better, thank you!

Didier

[frixelsolutions]

You actually don't have to specify each a:etc... one like that, it's purely optional and only if you want to change the default behavior.

If you want to edit the content between the header and the footer in the Frixel One theme, yes you will want to use .container by which I mean you can combine them... So if you only wanted to style the a:hover within td's within the container div you could always do something like this:

Code:

.container .td a:hover {
whatever: example;
}

Hope that's helpful

[Didier9]

You actually don't have to specify each a:etc... one like that, it's purely optional and only if you want to change the default behavior.

If you want to edit the content between the header and the footer in the Frixel One theme, yes you will want to use .container by which I mean you can combine them... So if you only wanted to style the a:hover within td's within the container div you could always do something like this:

Code:

.container .td a:hover {
whatever: example;
}

Hope that's helpful

OK, it starts making sense...

Yes, it has been very helpful, even though one reason to go with a CMS (as opposed to the hand crafted html I had been using until now) was precisely so that I would not have to learn too much css...

So much for that!

Thanks again!

By the way, I like FrixelOne, nice and clean, thanks for that too!

[frixelsolutions]

You actually don't have to specify each a:etc... one like that, it's purely optional and only if you want to change the default behavior.

If you want to edit the content between the header and the footer in the Frixel One theme, yes you will want to use .container by which I mean you can combine them... So if you only wanted to style the a:hover within td's within the container div you could always do something like this:

Code:

.container .td a:hover {
whatever: example;
}

Hope that's helpful

OK, it starts making sense...

Yes, it has been very helpful, even though one reason to go with a CMS (as opposed to the hand crafted html I had been using until now) was precisely so that I would not have to learn too much css...

So much for that!

Thanks again!

By the way, I like FrixelOne, nice and clean, thanks for that too!

Thanks, I'm glad you like the theme and find it useful. If you have any future concerns you know where to find us