Single letter colour removal & mobile optimization

Home Forums All Other Themes Single letter colour removal & mobile optimization

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #44376
    Brandon
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: June 15, 2016

    Hello!

    I was wondering how I can change it so as none of the words in the them start with a different colour letter? I can’t just change it’s colour as it’s in both the body and footer which have different coloured fonts.

    Also, when viewed on mobile, the excellent desktop header becomes smushed and poor quality. Can I display a better resolution for the header image only on mobile somehow?

    Thank you!

    #44445
    SKT Themes
    Keymaster
    • Topics: 8
    • Replies: 6705
    • Total: 6713
    Member since: June 12, 2013

    Kindly show us the website URL please.

    Regards,
    Shri

    #44502
    Brandon
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: June 15, 2016

    Hi Shri,

    The website is http://www.tekkittest.com

    #44643
    SKT Themes
    Keymaster
    • Topics: 8
    • Replies: 6705
    • Total: 6713
    Member since: June 12, 2013

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    .logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

    #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#fff !important;}

    @media screen and (max-width:767px) {
    .logo img { height:auto !important;}
    }

    Regards,
    Shri

    #44682
    Brandon
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: June 15, 2016

    Hi Shri,

    That worked perfect for the mobile site, thanks!

    As for the letter, it actually removed it instead of making it black. How can I edit this so the letter shows up in black?

    Thanks!

    #44734
    SKT Themes
    Keymaster
    • Topics: 8
    • Replies: 6705
    • Total: 6713
    Member since: June 12, 2013

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Remove this code there:

    .logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

    ————————————————————

    Add this code there:

    .logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}

    Regards,
    Shri

    #45077
    Brandon
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: June 15, 2016

    Hello Shri,

    It seems that did nothing. Not a thing changed when I removed:
    .logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#494949 !important;}

    and added:
    .logo > h1 > a > span, #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter, h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}

    The letter, as you can see if you go to the site http://www.tekkittest.com, is still invisible. I tried placing many other colors into the { color:#000 !important;} space but nothing worked.

    I have one other question, the menu on the site is off center to the right, is there a way I can centre this on the page?

    Thanks!

    #45155
    SKT Themes
    Keymaster
    • Topics: 8
    • Replies: 6705
    • Total: 6713
    Member since: June 12, 2013

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    h1.postitle::first-letter, .single_post_content h1::first-letter, h2.postitle::first-letter { color:#000 !important;}
    #footer .footercols1 h3::first-letter, #footer .footercols2 h3::first-letter, #footer .footercols3 h3::first-letter, #footer .footercols4 h3::first-letter { color:#fff !important;}

    Regards,
    Shri

    #45167
    Brandon
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: June 15, 2016

    That worked perfectly!

    Thanks Shri!

    #45168
    SKT Themes
    Keymaster
    • Topics: 8
    • Replies: 6705
    • Total: 6713
    Member since: June 12, 2013

    🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.