Need help? Check out our Support site, then


Changing font colors

  1. marinorealestate
    Member

    I'm trying to do something incredibly simple, and cannot figure it out. The reason I bought the upgrade was to have control over not only font types and size, but color as well. I want to change the color of the title fonts on the blog posts, independent of each other, and not all black, red, etc. I see this done on other sites using the delicious theme, but i can't figure it out. can you help? thanks!
    Blog url: http://marinorealestate.wordpress.com

  2. Looks like you figured it out. Nice job!

    Here are is a helpful support page on font sizes and color just in case:
    http://en.support.wordpress.com/editors/font-size-color/

    Her is a great online color picker, if you wanted to test out different colors.
    http://www.eyecon.ro/colorpicker/

  3. marinorealestate
    Member

    ajmattic... actually i haven't figured it out. See the featured box at the top, where it says "Best to Invest" in light blue? I would like that to be white. But when I change the link color to white, ALL the titles turn to white, and I don;t want that.

    Also, I cannot find the code anywhere to view/edit. I see where I can add CSS code in the Appearnace-> Custom Design -> CSS (tab), but I want to see the entire page code so I can locate the colors.

    Thanks for any help you can give!

  4. Thanks for including example text such as "Best to Invest" because that's really helpful.

    To see the stylesheet for your current theme, go to Appearance → Custom Design → CSS and click on the "View the original stylesheet" link near the bottom of the page.

    Looking at the "2.8 Slider" section there, you can pull out the selectors that use the "color" property like this:

    #slides_container .slide h2 {
    	color: #fff;
    }
    #slides_container .slide h2 a {
    	color: #fff;
    	text-shadow: #000 0 0 2px;
    }
    #slides_container .slide .entry p {
    	color:#fff;
    	text-shadow: #000 0 0 4px;
    }
    #slides_container .slide .featured-category a {
    	color: #FFCD61;
    	text-shadow: #000 0 0 2px;
    }
    #slides_container .caption {
    	color:#fff;
    }

    Adjust the colors and copy the results into your Appearance → Custom Design → CSS page.

    There is not a way built into the theme to make each heading inside the Delicious Magazine slider area each have a different color that I know of. I checked and they all have the same HTML structure on your blog. If you can point me to an example of another WordPress.com site that colors each one separately, I could take a look to see what they've done. Do you have an example link that I can check out?

    We have a CSS Customization forum that's pretty active. You should consider posting new questions you have there:
    http://en.forums.wordpress.com/forum/css-customization/

  5. marinorealestate
    Member

    i'm so thankful for your help-- thanks!

    I copied your code above exactly, and dropped it into the css styesheet editor, saved it, and no change-- everything is the same as before. was i supposed to do something other than that?

    for now, the only color i'm trying to change is the color of the title on the featured photo that appears at the top of the page. The configuration of the small photos with titles on the right side of the page is fine-- see how that has white titles? I'd really just like to duplicate that on the feature (larger) photo on the page. But for some reason, those titles are defaulting to the pale blue color.

    thnaks again!

  6. marinorealestate
    Member

    PS... and now for some reason, the couple of lines of text for each post that used to show up below the title on the featured photo have disappeared. any idea why that is happening all of a sudden?

  7. I copied your code above exactly, and dropped it into the css styesheet editor, saved it, and no change-- everything is the same as before. was i supposed to do something other than that?

    Yep. :) Just below my code example it says, "Adjust the colors and copy the results into your Appearance → Custom Design → CSS page."

    I only copied the related code from the original theme stylesheet for you. You will need to adjust the colors in order to see any difference.

  8. The only color I'm trying to change is the color of the title on the featured photo that appears at the top of the page. The configuration of the small photos with titles on the right side of the page is fine-- see how that has white titles?

    The blue color is coming from the setting on your Appearance → Theme Options → Styling Options page. Wow, and that's actually overriding the CSS from the sylesheet that I used in my example and I didn't realize that before. Also, I missed that you can style the overlay text for the left (large image) and the right (smaller images) separately. My apologies. In order to override those Theme Option settings, you can add "!important" to the end of some of the rules. Here is an example with several (kind of obnoxious) color choices so you can see really clearly how the colors will change. Let me know if you still have any trouble with it.

    #slides_container .slide h2,
    #slides_container .slide h2 a {
    	color: yellow !important;
    	text-shadow: #000 0 0 2px;
    }
    #slides_container .slide .entry p {
    	color: blue;
    	text-shadow: #000 0 0 4px;
    }
    #slides_container .slide .featured-category a {
    	color: red !important;
    	text-shadow: #000 0 0 2px;
    }
    #slide-nav li a span.info .featured-category {
    	color: turquoise !important;
    	text-shadow: #000 0 0 2px;
    }
    
    #slide-nav li a span.info .title {
    	color: green !important;
    	text-shadow: #000 0 0 2px;
    }
  9. PS... and now for some reason, the couple of lines of text for each post that used to show up below the title on the featured photo have disappeared. any idea why that is happening all of a sudden?

    Currently, I see the following text on the main featured photo (on the left): "Confidence is a relative thing– especially when it comes to the economy. I found this article (see below) interesting for a number of reasons; the headline (seems) to say it ..." Is that the text you're talking about? I can't see any other options for adding text, and the demo site at http://theme.wordpress.com/themes/delicious-magazine/ looks like it has the same featured image text as your http://marinorealestate.wordpress.com/ site does when I check.

  10. marinorealestate
    Member

    YOU SAVED THE DAY!!

    That did it. No ownder I wasn't figuring it out-- takes a pro like you to see the code solution. I can't thank you enough-- really! Ya gotta let me send you some movie tickets or something as a thank you-- seriously! I spent hours trying to figure this thing out.

    PS: That other thing I asked about, the lines of text... that i was able to solve by just adding a larger featured image phot. i guess the box holding the featured photo must automatically defailt to the verticle size of the photo, so if it's short, the boix shortens up, and the text gets cut off-- or something like that. as soon as i added a bigger picture, the text reappeared!

Topic Closed

This topic has been closed to new replies.

About this Topic