Custom font color

  • Unknown's avatar
    lrncfarmn · Member ·

    The font in my quotes looked funny so I added a CSS code to change the font size and color in my block quotes:

    .Myblockquote {
    -webkit-text-size-adjust: 100%;
    font-family: serif;
    font-size: 16px;

    color:#ffffff;
    }

    It didn’t change the font. So I added the following CSS codes to the paragraph of the quote:

    .FontForMyQuote {
    font-family: serif;
    font-size: 16px;
    color:#ffffff;
    }

    It did change the font but not its color. I think somehow I will have to add has-text-color to the css code but I don’t know how to do that. Can someone please help me with that? I will appreciate the help.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    aisajib · Member ·

    Hi there!

    Could you share the link to the specific page where this CSS is supposed to affect?

    Also, did you know that your plan gives you access to live chat support on weekdays and email support 24/7? You can access the faster, private support your plan gives you by messaging us at this link.

    Feel free to send the link to the post/page at the link above, and we will be happy to help you via chat/email.

  • Unknown's avatar
    lrncfarmn · Member ·

    Hello

    I like the way your block quote looks. I wonder if it is the default quote?

    Well for some reason my default quotes look like the one on the following page:

    https://lrncfarmn.org/bad-block-quote/

    Now using two CSS codes I have managed to make it look like the way I like at the page bellow:

    https://lrncfarmn.org/the-block-quote/

    But:

    As I mentioned  to make the text readable I have to declare two different classes one for the quote box and the text color and the other one for font itself. I want to know why my custom quote block does  not change the font but only its color while the second one changes the font face and not the color. Ideally, I would want the default quote to look like your quote without any additional work. Also after I posted my request I made some changes to the CSS codes. The new CSS codes are:

    /* .Myblockquote  does not change the font but only its color*/ 

    .MBQ {

          -webkit-text-size-adjust: 100%;

    /*border-style: none;*/

          border-top: none;

          border-bottom: none;

          border-right: none;

          border-left-style: solid;

          border-top-color: none;

          border-right-color: none;

          border-bottom-color: none;

          border-color: #222222;

    /*background-color:#004d6c;*/

    /*border-width: 0 0 0 1.5px;*/

          border-top-width: 0;

          border-bottom-width: 0;

          border-right-width: 0;

          border-left-width: medium;

    /*border-left-style: solid;*/

    /*border-left-color:#222222;*/

          box-sizing: inherit;

    /*color: #313b3f;*/

    /*font-family: -apple-system, BlinkMacSystemFont, */

          font-family: serif;

          font-size: 16px;

          font-style: italic;

          color: white;

    /*font-stretch: inherit;

          line-height: inherit;*/

    /*margin: 1.5px 0;*/

          margin-top: 3px;

          margin-right: 9%;

          margin-bottom: 7px;

          margin-left: 1%;

    /*padding: 0 0 0 16px;*/

          padding-top: 3px;

          padding-bottom: 3px;

          padding-right: 1%;

          padding-left: 1%;

          Text-align: left;

    }

    /* FontForMyQuote. it does change the font face and type but not its color*/ 

    .F4MQ {

          font-family: serif;

          font-size: 16px;

          font-style: italic;

          color: red;

    }

    I want to know what is wrong.

    Thank you for your help

  • staff-95percentghost · Staff ·

    Hi! While the styles for the default blockquote are coming from the theme itself and there’s specific blockquote CSS which defines the font colour, you’ve selected a custom font for your theme; this applies a .wf-active class to text items. If you’re wanting to change the font for the blockquote in particular, you may wish to add that in, for example as follows:

    .wf-active .wp-block-quote p {
font-family: serif;
color: red;
}

    Below is the default CSS from your theme which affects blockquotes, for reference. If you wanted to change the border colours you can reference this, no need to account for the .wf-active class!

    blockquote {
	border-bottom: 3px solid currentcolor;
	border-top: 3px solid currentColor;
	color: #555;
	font-family: Neuton, serif;
	font-size: 20px;
	font-style: italic;
	line-height: 1.2;
	margin: 0 0 24px;
	padding: 24px 0;
}
blockquote > p:last-child {
	margin-bottom: 0;
}
blockquote cite {
	display: block;
	margin-top: 6px;
}
blockquote blockquote {
	margin-left: 24px;
}
cite {
	color: #222;
	font-weight: bold;
}

    I hope that helps, if you do have any other questions let us know!

  • The topic ‘Custom font color’ is closed to new replies.