New to Sandbox: how do I change font styles?

  • Please forgive what may be a very basic question — this is my first post here and I am new to both WordPress and php. I have very limited CSS and html experience.

    Anyway, I have decided to start with the Sandbox theme so that I can teach myself everything as I go. I have succeeded in creating and installing my own clickable header (thanks to the various posts here!) but can’t seem to find a way to alter the fonts. I’ve spent the best part of a day going backwards and forwards through the stylesheet and the header.php, also searching the web and these forums, but have had no luck.

    Could someone please kindly direct me to the exact places in the Sandbox theme files where I can customize the fonts (color/size/font), and how to do it.

    Thanks in advance

Viewing 4 replies - 1 through 4 (of 4 total)

  • I don’t know the Sandbox theme and don’t feel like downloading and studying it — but essentially you should look for a class that specifies font-family.

    If they’re clever, they’ve done in in the body.

    Also, if you’re fairly new to HTML and CSS, https://htmldog.com can be your friend.

    Thread Starter pj67

    (@pj67)

    Thanks DianeV,

    I can see some classes font classes but am not sure what I need to adjust.

    Can you point out to me the relevant sections in stylesheet below… I want to ajust the font, the style of the font and the color of the font, of the post body text and the headings:

    /*
    THEME NAME: Sandbox
    THEME URI: https://www.plaintxt.org/themes/sandbox/
    DESCRIPTION: A theme with powerful, semantic CSS selectors and the ability to add new skins.
    VERSION: 0.6.1
    AUTHOR: Andy Skelton & Scott Allan Wallick
    AUTHOR URI:
    */
    /* MARGINS, PADDING, ETC., FOR ALL LAYOUT DIVS */
    div#header {
    padding: 1em 0;
    }
    #headerblock img {
    display:block;
    margin:0 auto;
    }
    div#content, div.sidebar {
    padding: 0 10px;
    }
    div#footer {
    margin: 2em 0;
    padding: 3em 0 0 0;
    }
    /* HEADER STUFF */
    div#header {
    text-align: center;
    }
    div#header h1#blog-title {
    font-size: 3em;
    margin: 0;
    display: none
    }
    div#header p#blog-description {
    margin: 1.5em 0;
    }
    div#header p.access {
    display: none;
    }
    /* GENERAL TAGS FOR CONTENT, MOSTLY */
    abbr.published {
    border: 0;
    cursor: default;
    margin: 0;
    }
    body.home abbr.published, body.archive abbr.published, div.page-link {
    font-weight: bold;
    }
    div.entry-content p {
    margin: 1em 0;
    }
    div.entry-content ul li {
    list-style: square;
    }
    div.entry-content ul li ul {
    margin-bottom: 0.3em;
    }
    div.entry-content ul li ul li {
    list-style: circle;
    }
    div.entry-content ul#linkcats, div.entry-content ul#linkcats li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    div.entry-content ul#linkcats li ul li {
    list-style: square;
    }
    div.entry-content img.center {
    display: block;
    margin: 0.4em auto;
    }
    div.entry-content img.alignright {
    margin: 0.4em 0 0.4em 1.1em
    }
    div.entry-content img.alignleft {
    margin: 0.4em 1.1em 0.4em 0;
    }
    div.entry-meta {
    font-style: italic;
    line-height: 140%;
    }
    body.home .entry-meta, body.archive .entry-meta {
    margin: 0 0 4em 0;
    }
    body.single .entry-meta {
    font-size: 0.9em;
    }
    body.single div.navigation {
    padding: 0 0 3em 0;
    }
    div.archive-meta {
    margin: 1em 0 3em 0;
    }
    div.edit-link {
    clear: both;
    }
    abbr, acronym {
    border-bottom: 1px dotted blue;
    cursor: help;
    }
    blockquote {
    border-left: 1em solid #e6e6fe;
    padding: 0 0 0 1em;
    }
    code, pre {
    font-family: “georgia”, arial, monospace;
    }
    /* HEADINGS */
    h2, h3, h4 , h5, h6 {
    line-height: 125%;
    font-family: “trebuchet”;
    }
    body.home h2.entry-title {
    clear: both;
    font-size: 1.6em;
    margin: 0;
    }
    body.single h2.entry-title, body.page h2.entry-title {
    font-size: 1.6em;
    margin: 0 0 -0.4em 0;
    }
    body.category h2.page-title, body.author h2.page-title {
    font-size: 1.6em;
    margin: 0;
    }
    body.date h2.page-title, body.single h2.page-title {
    font-size: 1.6em;
    margin: 0 0 2em 0;
    }
    body.archive h3.entry-title, body.single h3.entry-title {
    font-size: 1.3em;
    margin: 0;
    }
    body.single h3.comment-header {
    font-size: 1.4em;
    margin: 3em 0 1em 0;
    }
    body.single h3#respond {
    font-size: 1.2em;
    margin: 3em 0 0.5em 0;
    }
    div.entry-content ul#linkcats li h3 {
    margin: 1em 0 0 0;
    }
    div.entry-content h2 {
    font-size: 1.2em;
    margin: 1.5em 0 -0.7em;
    }
    div.entry-content h3 {
    font-size: 1.1em;
    margin: 1.5em 0 -0.9em;
    }
    div.entry-content h4, div.entry-content h5, div.entry-content h6 {
    font-size: 1em;
    margin: 1.5em 0 -1.1em;
    }
    /* COMMENTS STUFF */
    ol.commentlist li {
    margin: 0 0 3.5em 0;
    }
    ol.commentlist .comment-meta {
    font-style: italic;
    }
    form#commentform, form#commentform p {
    padding: 0;
    }
    form#commentform span.req-field {
    background: #fff;
    color: red;
    }
    form#commentform .form-label {
    margin: 1em 0 0 0;
    }
    input#author, input#email, input#url, textarea#comment {
    font-family: “georgia”, georgia, georgia;
    font-size: 1em;
    padding: 0.2em;
    }
    input#author, input#email, input#url {
    width: 50%;
    }
    textarea#comment {
    height: 13em;
    margin: 0 0 0.5em 0;
    overflow: auto;
    width: 66%;
    }
    /* SIDEBAR STUFF */
    div.sidebar div, div.sidebar h3, div.sidebar h4, div.sidebar ul, div.sidebar li {
    margin: 0;
    padding: 0;
    }
    div.sidebar li {
    list-style: none;
    }
    div.sidebar li form {
    margin: 0.2em 0 0 0;
    padding: 0;
    }
    div.sidebar h3 {
    font-size: 1.2em;
    }
    div.sidebar h4 {
    font-size: 1.0em;
    }
    div.sidebar li {
    margin: 0 0 1em 0;
    }
    div.sidebar ul ul {
    margin: 0 0 0 1.0em;
    }
    div.sidebar ul ul ul {
    margin: 0 0 0 0.5em;
    }
    div.sidebar ul ul li {
    margin: 0;
    list-style: disc;
    }
    div.sidebar ul ul ul li {
    list-style: circle;
    }
    div.sidebar ul#bookmarks {
    margin: 0 0 0.5em 0.5em;
    }
    div.sidebar ul#bookmarks li {
    list-style: none;
    }
    div.sidebar ul#bookmarks ul {
    margin: 0 0 .5em 1.0em;
    }
    div.sidebar ul#bookmarks ul li {
    list-style: disc;
    }
    div.sidebar input#s {
    width: 7em;
    }
    /* FOOTER STUFF */
    div#footer {
    text-align: center;
    }
    /* COMMON MULTI-PURPOSE ELEMENTS */
    .alignleft, div.nav-previous, #archives-by-category {
    float: left;
    }
    .alignright, div.nav-next, #archives-by-month {
    float: right;
    }
    .clearer {
    clear: both;
    }
    div#nav-above, body.single div#nav-below {
    display: none;
    }
    body.single div#nav-above {
    display: block;
    }
    body.home div.nav-next, body.home div.nav-previous, body.archive div.nav-next, body.archive div.nav-previous, #archives-by-category, #archives-by-month {
    width: 48%;
    }
    body.home div.nav-next, body.archive div.nav-next {
    text-align: left;
    }
    body.home div.nav-previous, body.archive div.nav-previous {
    text-align: right;
    }

    Thanks again for your help!

    This theme is set up with no font styles (aside from size). What you have to do is add the CSS to change the fonts from the browser defaults.

    At the beginning of the theme after the summary comments I would insert the following:

    body
{
font-family:Arial, Verdana, sans-serif;
}

    So

    ...
AUTHOR: <a href="https://andy.wordpress.com/">Andy Skelton</a> &amp; <a href="https://www.plaintxt.org/">Scott Allan Wallick</a>
AUTHOR URI:
*/
/* MARGINS, PADDING, ETC., FOR ALL LAYOUT DIVS */
div#header {
	padding: 2em 0;
}
...

    Becomes

    ...
AUTHOR: <a href="https://andy.wordpress.com/">Andy Skelton</a> &amp; <a href="https://www.plaintxt.org/">Scott Allan Wallick</a>
AUTHOR URI:
*/

    body
{
font-family:Arial, Verdana, sans-serif;
}

    /* MARGINS, PADDING, ETC., FOR ALL LAYOUT DIVS */
div#header {
	padding: 2em 0;
}
...

    Also, a great CSS resource is Westciv’s CSS Guide.

    Thread Starter pj67

    (@pj67)

    Thanks davedotcom,

    I appreciate your advice — and now I understand why I haven’t been able to locate editable sections of the code.

    What I need to know, then, is which sections of the above code will allow me to:

    — edit heading font/style/color
    — edit post body font/style/color
    — edit sidebar heading font/style/color
    — edit sidebar text font/style/color

    any advice welcome!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘New to Sandbox: how do I change font styles?’ is closed to new replies.

Tags