6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Need help with simple CSS code

by jt47000
5 replies
  • WEB DESIGN
    • |
Hi everyone,

On my site: http://www.industrialprincess.com/example2/, I'd like to change the font of the link bar that is at the top of the page that says "Home About Full Width..." What code do I need to use to do this?

I've been in contact with the support for the theme and they told me to paste this anywhere in my css and it should work, but it doesnt:

#menu-content{font-family:"Times New Roman",Georgia,Serif !important;}

Ideally I'd like to use my own font so I was thinking something like this:

@font-face
{
font-family: myFont;
src: url('path/to/font/myFont.ttf'),
url('path/to/font/myFont.woff'),
url('path/to/font/myFont.otf'),
url('path/to/font/myFont.eot'); /* IE9 */
}

p {
font-family: myFont;
}


That just screws up my whole page messing with the formatting of everything and nothing gets changed.

I really need to change that font to something else, any help would be appreciated, especially the working code if you know it.

Thanks for your help

JT
#code #css #simple
  • Profile picture of the author Istvan Horvath
    Download Google Chrome.
    Open your site with it.
    Right-click on that menu portion on your site and select "Inspect element".

    Look at the bottom frame: on the left you have the HTML code that displays the menu and on the right you have the CSS lines that apply to it.

    You can even experiment changing the CSS there and seeing the results immediately

    EDIT. If you don't want to download a new browser, then right-click in any browser > select View Source > and find the HTML for that menu. Then look for the IDs and classes of the HTML elements used there and locate the referring code in the stylesheet.
    Edit them.
    Signature

    {{ DiscussionBoard.errors[7309254].message }}
  • Profile picture of the author Sueblimely
    To change the font on the top menu you need to apply changes to the link itself (ul#secondary-menu a), rather than the menu-content For example: ul#secondary-menu a {font-family:"Times New Roman",Georgia,Serif !important;}
    {{ DiscussionBoard.errors[7310314].message }}
    • Profile picture of the author aureusb
      Inspecting with Firebug, i can see you've added font-face "Droid Sans" into your css style sheet.

      Code:
      @font-face {
    font-family: "Droid Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Droid Sans"), local("DroidSans"), url("http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff") format("woff");
}
      If you want to use Droid Sans for example, go to your style.css and locate this line

      Code:
      ul#secondary-menu li {
    font-family: 'Kreon',Arial,sans-serif;
}
      Change 'Kreon' to Droid Sans or whatever font you like.

      Hope this helps.
      {{ DiscussionBoard.errors[7310824].message }}
  • Profile picture of the author jt47000
    Thanks guys! I'm trying it out after I meet with my client. I'll let you know how it goes!


    Thanks again to all of you for your time
    {{ DiscussionBoard.errors[7310956].message }}
    • Profile picture of the author aureusb
      Sure. Let us know how it goes!
      {{ DiscussionBoard.errors[7311195].message }}

Trending Topics