How do I change the font styles and the colors in SimpleMarket Theme?

I don't know how to change the Font Style in the CSS stylesheet's.... I'm clueless.... I would also like to change the colors. I've done manual color changes in dreamweaver (inside the css stylesheet) but there has to be an easier way. For a theme to claim itself fully customizable, I'm failing to see the ease of it all. You can fully customize anything in dreamweaver, I just wasn't aware I have to go down to code level, when I installed wordpress so I wouldn't have to. What font styles look nice that every device has? Do I need to find a TTF and upload it to the server? How do I link to it? I have never been able to figure out this font styles thing.... Any help A.S.A.P. would be greatly appreciated.

  • aristath

    Hello there @Cody, I hope you're well today!
    What do you want it to look like? There are lots of fonts and styles that you can use, for example this one is one of my favorite fonts: http://www.google.com/fonts/specimen/Open+Sans
    You can use Google Fonts on your site, no need to upload any files.
    Just pick a font from http://www.google.com/fonts/ and follow the instructions on its page.

    I hope that helps!

    Cheers,
    Ari.

  • Cody

    http://www.redneckcountrysports.com I'm building a book retail store website on my domain for now, until the transfer is complete and I can move it over to pawprintspod.com

    You can see the theme live on http://www.redneckcountrysports.com

    I guess I'm having a question about the gradients as well as just the normal colors... I don't know which colors go where...

    #nav-inner{border:1px solid #ffffff;}

    .topmenu{margin:0;padding:0;line-height:100%;float:left;text-transform:uppercase;}

    .topmenu li{margin:0em;padding:0em;float:left;position:relative;list-style:none;border-right:1px solid #ffffff;}

    .topmenu a,.topmenu a:visited,.topmenu a:link{font-style:normal;text-decoration:none;display:block;color:#889911;padding:0.5em;font-size:14px;margin:0;text-shadow:-1px -1px 0px #ffffff;}

    .topmenu .current a,.topmenu li:hover > a,.topmenu li.current_page_item a{padding:0.5em;color:#ffffff;background:#889911;text-shadow:-1px -1px 0px #6c790d;}

    .topmenu ul{display:none;margin:0;padding:0;width:150px;position:absolute;top:27px;left:0;text-align:left;z-index:9999;border:1px solid #ffffff;}

    what does "current" mean? I have the CSS pulled up in dreamweaver cs6

  • Cody

    WOW.... Your awesome man!!! :smiley: I can't tell you how much I appreciate that!

    Well the color of the header text I was thinking #3f5877 (I think the header is a link)

    and the button gradients would be white at the bottom and fade to #3f5877

    The links would be #3f5877 and on hover would be #3f7477

    Like the Sample Page would be the same as the "link" color scheme.

    The font family I picked was "Great Vibes" in google.com/fonts

    I'm still not sure what "at current" is....

    This is SO nice of you to help me out... I feel like I at least owe you a coffee! :slight_smile:

  • aristath

    Dear Cody,
    Forgive me but we all live in different timezones and I don't work 24 hours a day.
    I offered to help you and I will. I did not forget about this, but please understand that patience is a virtue. And a delay of a few hours certainly does not justify marking someone that does his best to help you out as "unhelpful", or sending twitter messages to remind them of your issue.

    Now, back to our issue... :slight_smile:
    You can try this:
    Install this plugin: http://wordpress.org/plugins/my-custom-css/
    Then on its menu on your dashboard try pasting the following:

    #site-logo a, #site-logo a:link, #site-logo a:visited, #site-logo a:hover {
      color: #3f5877;
    }
    
    input[type="submit"]:hover, a:hover.button, .button:hover {
      background: #3f5877; /* Old browsers */
      background: -moz-linear-gradient(top,  #3f5877 0%, #ffffff 99%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f5877), color-stop(99%,#ffffff)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #3f5877 0%,#ffffff 99%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #3f5877 0%,#ffffff 99%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #3f5877 0%,#ffffff 99%); /* IE10+ */
      background: linear-gradient(to bottom,  #3f5877 0%,#ffffff 99%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f5877',     endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    
    a, a:link, a:active {
      color: #3f5877;
    }
    
    a:visited {
      color: #773f58;
    }
    
    a:hover {
      color: #3f7477;
    }

    As for the webfont, where exactly do you want that font applied?
    Titles or everywhere? It just seems to me that using a font like that will make your text pretty hard to read if you use it as your main font...

    Let me know if the above works for you!

    Cheers,
    Ari.

  • Cody

    Hello Ari,

    Please forgive me, as I just realized your in Greece! :slight_smile: And I understand you don't work 24 hours a day, But somehow or another the thread got marked as answered... I had looked at your recent activity and yesterday, and saw that you had replied to another post within the hour, and thought... hmm.... I'ts been hours since my last reply to you, so I went back to the "Ask a question" side over here and saw it was green! I'm like, how in the world did it get marked as resolved? I figured you probably thought I figured it out myself, and there's no instant messaging system on here, so I was lost. I marked one of your comments as unhelpful, (because I didn't know what else to do, I'm brand new to this forum) and then saw down under the reply, "Re-open" the thread... If I would of seen that first I would of used that! And sorry for the tweet, I'm just resourceful.... :slight_smile:

    As far as the topic at hand... Everything worked beautiful, minus the search buttons are switched. The on hover on the search buttons should be how it looks naturally, and when you hover over it, it should turn blue...

    The only font that I wanted in that style was the Header text....
    I agree, you couldn't read it if the main text was like that too.. I just want the "Paw Prints POD" to be that font.

    OH!, and the "SAMPLE PAGE" at the top, is still pea green.... not sure where that code is in the css... It's 9:00 pm your time, and I'm sure you won't be up for much longer if not already asleep...

    I really do appreciate your help Ari, and I hope you accept my apology... I'm just under a REAL big crunch right now and I'm stressed out to the max. This site has got to be put up within the next day, and I'm worried as hell..

    Heck I'd be willing to pay you for your help!

    I look forward to hearing from you soon! Thanks Ari!

    Cody

  • aristath

    The on hover on the search buttons should be how it looks naturally, and when you hover over it, it should turn blue...

    Could you please be a bit more specific?
    Both normal and on hover it's blue for me... just a different blue!

    I just want the "Paw Prints POD" to be that font.

    In that case, add the following in the CSS that you added earlier:

    #site-logo a {
      font-family: 'Great Vibes', cursive;
    }

    You'll also have to add this in your header.php file in your theme:
    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
    somewhere inside the < head > of the document.

    OH!, and the "SAMPLE PAGE" at the top, is still pea green.... not sure where that code is in the css...

    I'm afraid I don't see a "sample page" anywhere!

    Please let me know if the above helps, and advise on how to continue with this.

    Cheers,
    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.