Support » Themes and Templates » What I need to edit in CSS to fix these fonts

  • Resolved aaargghh

    (@aaargghh)


    I emailed the people at wp-client and their response was lacking detail, so I’m hoping someone here can tell me what I need to edit inside my editor style.css to fix this. I am trying to change the color of the circled fonts to something you can see and all they told me was “it’s in your themes css”. So here is a pic of what I am trying to change

    Any help would be appreciated.

Viewing 15 replies - 1 through 15 (of 32 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    all they told me was “it’s in your themes css”

    “They” seem to be leading you down a dangerous road.

    You should never edit the theme’s files because you can;
    – Break the theme.
    – Make difficult debugging processes.
    – Lose your changes when the theme updates.
    — Sorry, someone made a barking noise and I forgot the rest.

    You should add your CSS modifications through a Child Theme stylesheet or a plugin that provides Custom CSS functionality.

    I recommend using this Custom CSS Manager plugin to hold your CSS modifications.

    Let us know when you have either.

    Thread Starter aaargghh

    (@aaargghh)

    OK, I have the custom css manager plugin. I am so ready to get this finished. Can you give me a little instruction on this? Would be totally appreciated!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    May you open your webpage that has the fonts you want to change, in Google Chrome?

    Thread Starter aaargghh

    (@aaargghh)

    I’m a little confused. The problem is in wp-client so I have to be logged in as a client to see the font that is needing to be changed. So, do you mean login to a client portal so I can see that font?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure which process you need to go through, but you just need to view the webpage that holds the fonts that you want to customise. View it in Chrome.

    Thread Starter aaargghh

    (@aaargghh)

    I’ve got it viewed now.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Right click on the font you want to change.
    Then select ‘Inspect element’.

    You’ll see a new toolbar appear [exampled].

    On the right, the CSS should be exposed that handle the font styles.

    You can use that CSS on the right to create a new style. Create a new style in your Custom CSS Manager.

    Your new style will be something like;

    .classname p {
     font-size: 30px
    }

    You’d increase/decrease the 30 depending on the value you want.

    Thread Starter aaargghh

    (@aaargghh)

    Am I supposed to select all of the code on the right and install it in the cascading stylesheet in the custom css manager? Sorry, this is all very new to me. Thank you for helping me.

    Thread Starter aaargghh

    (@aaargghh)

    Not the part that says element.style {
    } correct?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Not all, just from one section.

    You have a section right at the top with this;

    element.style {
    
    }

    You leave that and you take the CSS in the section below that.

    So you take the next section that could be;

    #thread li.postitem {
     float: left;
     border-bottom: 1px solid #dadada;
     margin-bottom: 20px;
    }

    You can then just copy that second section of code into your Custom CSS Manager and add your font style;

    #thread li.postitem {
     float: left;
     border-bottom: 1px solid #dadada;
     margin-bottom: 20px;
     font-size: 30px;
    }

    Thread Starter aaargghh

    (@aaargghh)

    This is what is my next section but it doesn’t look anything like that.
    `media=”all”
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

    Thread Starter aaargghh

    (@aaargghh)

    Sorry, I hit the button for code but I don’t think I did it right. Doesn’t look like yours. This code is in the 3rd section.

    media="all"
    body, td, th, button, input, textarea {
    font: normal 12px/20px 'Lucida Sans Unicode', 'Lucida Grande', Arial, san-serif;
    text-shadow: 1px 1px 0 #000;
    color: #ededed;
    }
    Thread Starter aaargghh

    (@aaargghh)

    Is either one of those the right ones?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is what is my next section but it doesn’t look anything like that…

    Oh I see, that means there is currently no styling applied to that element.

    This means you’ll have to create your own CSS styles.

    So, on the majority of the toolbar you should be seeing the HTML.
    The HTML should guide to construct the CSS.

    For example, from the HTML of this page http://cssdesk.com/xzwZs (using CSSDesk to illustrate HTML) I can see that the heading is within a <div> element that has a class.

    I can therefore construct the CSS in relation to that information;

    div.heading h1 {
     font-size: 30px;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry, I hit the button for code but I don’t think I did it right. Doesn’t look like yours. This code is in the 3rd section.

    The third section applies to more elements than you probably want affected. As you see, the third section affects the following HTML elements;
    <body>, <td>, <th>, <button>, <input>, <textarea>.

    You just want to affect that one particular text element.

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘What I need to edit in CSS to fix these fonts’ is closed to new replies.