Help needed in editing fonts in WordPress Theme

by 13 replies
16
Any WP experts here? I've been trying to figure out how to edit the fonts at Splendid Bonus Deals.

IMO the fonts aren't giving a 'strong' impression and so are the link colors. I want to edit the fonts to make the overall appearance look better on all Pages and Posts.

The theme I am using is from:
WordPress › Custom Community « Free WordPress Themes

Basically:

- How do I change the Heading 1 to be font type Tahoma size 30, bold?

- Heading 2 to be Tahoma size 24, bold.

- Heading 3 to be Tahoma size 16, bold.

- Links (active, visited, clicked over) to be #0000FF blue color underlined.

- The BlockQuote background color to be light yellow #FFFFCC. And also to add the Johnson box to it (meaning, red dotted line at a border size of 3px)

Anyone got a clue which files and lines I should be looking at to edit and make all these changes in the Theme Editor? Thanks!

Edmund
#programming #editing #fonts #needed #theme #wordpress
  • you can do that by editing the style.css on the Theme Editor in the wp-admin.

    maybe add this at the bottom:
    Code:
    h1 { font-family:"Tahoma", font-size:30px; font-weight:bold; }
h2 { font-family:"Tahoma", font-size:24px; font-weight:bold; }
h3 { font-family:"Tahoma", font-size:16px; font-weight:bold; }
  • @JohnnyS hey thanks for replying.

    That didn't work though. The stylesheet was naturally the first file I looked at, but after combing that and other files, even with my friend's technical help we still couldn't find how to edit all of the above mention (in the original post). :|

    Edmund
  • move =>

    above the </head> ..
    because i see that there are some <style> shown above the </head>, perhaps from wp_header() ..
  • @anestbaik that piece of code in the header.php file?

    It is already situated above the </head> tag.

    Edmund
  • You have messy code referencing Header tags too many times for no reason.

    Try this:

    Code:
    h1 { font-size:30px !important; font-weight:bold !important; }
h2 { font-size:24px !important; font-weight:bold !important; }
h3 { font-size:16px !important; font-weight:bold !important; }
    Updated for bold. Hope it works
    • [ 1 ] Thanks
  • @Louis Raven thanks! That helped for starters! The header h1 h2 h3 fonts are now Tahoma and size is correct. It's not bold though. I wonder if there are conflicting tags.

    Another puzzle is the active / visited / hover link color. Can't seem to find the piece of code and change it to #0000ff (blue) instead of teal.

    Edmund
  • I updated the above code. I'll look at the link colors now..

    OK have a look in your style sheet for #BLUE - Change it to BLUE or #000FF
  • @Louis Raven thanks! The bold thing helped.

    Can't find #BLUE in the stylesheet though. There is no mention of anything to do with link styles whatsoever, which is odd for a stylesheet as said.

    HTML Code:
    /*
Theme Name: Custom Community 
Theme URI: http://themekraft.com/custom-community/
Description: Create your individual website within minutes. Custom Community is a WordPress and BuddyPress theme framework that enables you to build your site with all the features you love. Easy to use jQuery slideshow. List posts under your pages in magazine layouts. Use powerful theme settings to customize every part of the theme. 20 widget areas, 5 special widgets and 2 custom WP 3.0 header menus. 3 predefined colour schemes (white, grey, black) with clean and simple browsersafe css design to start from. Support forum at http://themekraft.com/forums. 
Version: 1.8.9.1
Author: Themekraft
Author URI: http://themekraft.com/
Tags: buddypress, translation-ready, dark, light, white, left-sidebar, right-sidebar, two-columns, three-columns, fixed-width, flexible-width, custom-header, custom-menu, custom-colors, custom-background, theme-options
License: GNU General Public License v2.0 / License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Reset browser defaults */
@import url( _inc/css/reset.css );

.aligncenter { 
display: block;
margin-left: auto;
margin-right: auto; 
}

.alignleft {
float: left;
margin-right: 15px;
}

.alignright {
float: right;
margin-left: 15px;
}

div.post .wp-caption {
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom:12px;
}

div.post dd.wp-caption p.wp-caption-text, div.post .wp-caption p.wp-caption-text {
font-size: 0.9em;
line-height: 17px;
padding: 0 4px 5px 0;
margin: 0;
}

div#content {background: #FFFFFF !important;}
div#content .padder {background: #FFFFFF !important;}

h1 { font-size:30px !important; font-weight:bold !important; }
h2 { font-size:24px !important; font-weight:bold !important; }
h3 { font-size:16px !important; font-weight:bold !important; }
  • Let's go old-school and try hack the style :p

    Add this into the stylesheet:
    Code:
    a {
color: #0000FF !important;
}
    • [ 1 ] Thanks
  • @Louis Raven that helped, thanks!

    Looks like the !important is the authority figure in codes here, can see that pattern where it's going.

    The Blue links made the header Page menus that way too, but no complains - it turns out to be for the better as they stand out more.

    If it doesn't trouble you too much, one minor part to go is, where can I edit the blockquote style so I can turn the bg color to #FFFFCC (light yellow).

    (I asked about making the johnson box in my OP but then, probably not a good idea now)

    Edmund
  • Great,

    I recommend a dashed border instead of dotted Add to stylesheet..
    Code:
    blockquote {
padding: 10px 20px;
background-color: #FFC !important;
border: 3px dashed red !important;
}
    • [ 1 ] Thanks
  • @Louis Raven wow thanks! I would had never been able to figure out all of these on my own. Big thanks mate, I owe you one.

    Edmund
  • Your welcome bro
Join the discussion

Next Topics on Trending Feed

  • 16

    Help needed in editing fonts in WordPress Theme

    Any WP experts here? I've been trying to figure out how to edit the fonts at Splendid Bonus Deals. IMO the fonts aren't giving a 'strong' impression and so are the link colors. I want to edit the fonts to make the overall appearance look better on all Pages and Posts.