Change the "Date" font size and color on the Featured Home page

Hi Todd, you can do this by adding some styles to your custom css.

.post-meta .post-date {
    float: left;
    font-size: larger;
    color: black;
}

you can either specify the font size like I did above or by a size in pixels like 18px and the color black or #000 or whatever you like it to be.
Let me know how this works for you.

Regards

Ernest Close

Thanks Ernest!!
That worked brilliantly … hats off to ya!

Could you also provide the same code to apply to the “Uncategorized” that is next to the date?

thanks so much!!

Hi, yes. Just add this to your custom css:

.post-meta .post-category a {
    font-size: larger;
    color: #000;
}

This will make the color black, but because the hover state is already black you might want to add another color for that like this:

.post-meta .post-category a:hover {
    font-size: larger;
    color: #777;
}

This will make the color slightly lighter for the hover state.
Also remember to remove the “display: none” from the post-category class.
Let me know how this works for you.

Regards

Ernest Close

Ernest that is awesome!!! You have saved me so much agrevation. This is something I know very little about. Thanks for saving the day!

I have made a few other adustment to my site irunbyfaith.com

On the site when I hover over the featured post images the Title of the Post disapears. The default hover color for the “Title” must be black. My question is how can I change the hover color to a color that will be visable?

Also, On the right and left sidebars. At the Top of each are the words “FOLLOW” and “MORE”. How can I change this to say something original for my site? And also change the font color?

Again thanks so much!!
Todd

Hi Todd, I had to search quite a bit through the code to find the problem. The title’s hover state is actually white and shows up fine when hovering on the title, but when hovering over the article it’s black. If you remove the black from there it defaults to blue, but then the other links change as well. The problem I found was that the black is actually taking preference because it is specified within the index file itself and therefore overwriting all other styles. Not to worry though, because the solution is simple. Add this to your custom css and it will work.

.post-title a {
    color: yellow !important;
}

Now the color will not change when you hover over the article, but will still change to white when hovering over the title.
Let me know if this works for you.

Regards

Ernest Close

As for the sidebars, you should be able to change those titles in the theme, not sure where though, but look under customization and where you add your social icons and links. The color you can change by adding this to your custom css:

.sidebar-top p {
	color: yellow !important;
}

Hey Thanks Ernest!!
These worked beautifully. I owe you.
There is one concern however, on the left sidebar under “FOLLOW” the recent post area with smaller thumbnails.. when I hover over the black font text title it remains black. Any idea how we can change the hover color there?

thanks much!!!

Yes, the same problem as above applies to those links, so you can override them by using !important like this:

.tab-item-title a {
	color: #777 !important;
}
.tab-item-title a:hover {
	color: red !important;
}

The color is actually a dark grey #444 at the moment and hover is black so the first style above will make it a lighter grey and the second style above will make the hover state red. Change these to whatever you like.

As usual, let me know if this works for you.
Your site is looking very nice!

Regards

Ernest Close

Ernest, you know your stuff!!! thanks for the compliment on the site. This is new to me and for you to say the site looks very nice is encouraging news to me.

Your latest codes have worked great! I really appreciate the time you have given! My, my Im very grateful !

I did tweak this code from you

.post-title a {
    color: yellow !important;
}

to the code below… im not sure why it didn’t work. But spinning off of your idea and using your tips I figured this out. and the code below worked. It kept the same color on the title.

.post h2 a {
    color: #e8cd35 !important;
}

I do have another challenge …
On the left sidebar under I RUN BY FAITH ARCHIVES the “date’ is too light grey. I need to darken that too. Do you have a suggestion on how to darken the date?

I am very curious about a couple things:
Why do some of the codes work in the Child Theme Style.css and others do not but when I apply them to the Custom.css they work.

And how do you know how to help me? LOL… How do you see the codes on the website and what needs changed? Like you know this is new to me haha.
Im a newbie!

Thanks so much for your time and knowledge helping me!!!!

Todd

Actually it is the date and the number count in parenthesis that I would like to change the font color

i run by faith – archives
?May 2014 (5)
?April 2014 (1)

At the moment “.sidebar a” is set to blue, so you could change that to another color. “.widget a” is set to gray #777 but “.sidebar a” is taking preference.

.sidebar a {
    color: #000;
}

Style sheets cascade and what that means is that you can specify different styles for the same element, but the one with the highest priority will be the one that shows. In your code you have many styles set on “a” links for instance with many different colors and that is why you are getting strange behavior. The priorities are calculated according to the css rules and basically that means that inline styles have the highest priority. styles applied after another style in the same file also takes priority over the one above it.
The custom css plugin usually gives the style the highest priority, because it loads the stylesheet after all other styles are loaded, now the same would apply to the child theme, but as I mentioned earlier there are styles in your index.php file that are overwriting your styles. In most cases adding !important will move it’s priority up, but it’s all a case of which style is loaded last.
In the index.php file there is actually a note mentioning that you could remove those styles and add them to your custom css and that should solve many of your link color issues.

As to the code I see, that’s easy. In most browsers (I use chrome) you can right click on anything on your webpage and select inspect element. This will bring up a bar with the relevant code on one side and the styles applied to that element on the other. If you hover over the code you will see the different elements on your page light up and also the margins and padding applied to them in different colors. Now if you click on a line of code and go through the css you see the styles applied and if you then click on that style on the right of the code you can change the styles and even add your own styles while viewing the changes live on your website. Refreshing the page will take you back to the original page, but it’s a very nice way to see what something will look like before changing the site itself.

Hope this helps, if you need more information on any of this feel free to ask.

Regards

Ernest Close

ok, then use this:

.widget_archive ul li, .widget_categories ul li, .widget_links ul li {
    color: #bbb;
}

It is set to #bbb which is very light, you can change that to something else.

That calender icon is here:

.widget > ul li:before, .widget > ul li a:before, .widget > div > ul li a:before, .widget_calendar caption:before {
font-family: FontAwesome;
font-size: 12px;
margin-right: 6px;
color: #ccc;
display: inline-block!important;
width: 1em;
text-align: center;
}

The color #ccc is also very light, you can change that to something else.

Thanks again!!
I will give this a try and let you know.

How can we stay in contact after this thread is closed. Ha!

you can mail me. ernest at mystudio dot co dot za or through my contact form here.