Home Forums QuickStep Installed 'Dark Theme' but not appearing as 'dark'. Also, icon set messed up.

This topic contains 12 replies, has 2 voices, and was last updated by  Joshua 7 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #46318

    linling1381
    Participant

    Hi, I installed the demo theme ‘dark’. However, certain parts are still ‘light’. I also installed a custom Google Font API – LATO, which seems to work in the header, after playing with some HTML and CSS. However, the font install messed up the icon sets as well as some of the icon alignment throughout the page (e.g. social icons above the team members). Any help is greatly appreciated. Thank you. Website is ‘anatomyequipment.com’

    #46320

    Joshua
    Keymaster

    Was the light theme imported first? It mostly looks like you just need to change your options under Theme Options. For example, change the default body background color, headings color, and text color.

    As for the icon alignment, I’m guessing you mean the icons in the features- is that right? From what I can tell the issue is the SVG vector plugin you’ve installed. You’re no longer using the theme icons. I can’t help you modify these much as it’s not our plugin, but if you need a quick fix (like wanting to center them or reduce size), I’ll be glad to give you some Custom CSS to do so.

    #46324

    linling1381
    Participant
    This reply has been marked as private.
    #46326

    Joshua
    Keymaster

    Background is #2e2e2e while link and heading color are both #ffffff and everything else should be the same.

    Adding this to your Custom CSS and it will reduce the font size a bit in addition to centering the icons:

    .feature-icon {
        width: 100%;
        display: block;
        font-size: 80px;
    }
    #46328

    linling1381
    Participant
    This reply has been marked as private.
    #46330

    Joshua
    Keymaster

    Sorry I thought the only issue was the feature icons that were changed. Here is a bit of CSS to fix the team member social icons:

    .team-social li {
    float: left;
    margin-right: 10px;
    }

    You can adjust the margin to increase or decrease spacing.

    #46440

    linling1381
    Participant
    This reply has been marked as private.
    #46441

    Joshua
    Keymaster

    I don’t see that added in your Custom CSS. Are you sure you’ve added it? Do you have any other plugins running that might affect it?

    #46443

    linling1381
    Participant

    There are two .team-social sections in the css:

    https://cl.ly/1t1R1f2Y2G0O

    https://cl.ly/0f0w3w0B0q2C

    As you can see, i did a search and did include your code.

    As for plugins…I have wordpress importer, WP SVG icons, and contact form 7.

    #46446

    Joshua
    Keymaster

    The Custom CSS I gave you should go in the “Custom CSS” field in theme options.

    Editing the theme’s style.css file directly is not a good idea. And since the rules are in there, but not showing up in the browser, it may indicate that there’s now an error in the CSS syntax in your style.css file. You may want to restore the original theme’s style.css file to be safe and place any Custom CSS in the Custom CSS field.

    #46447

    Joshua
    Keymaster

    The Custom CSS I gave you should go in the “Custom CSS” field in theme options.

    Editing the theme’s style.css file directly is not a good idea. And since the rules are in there, but not showing up in the browser, it may indicate that there’s now an error in the CSS syntax in your style.css file. You may want to restore the original theme’s style.css file to be safe and place any Custom CSS in the Custom CSS field.

    #46451

    linling1381
    Participant

    Ok that worked. Is there a way to make the H1 mobile responsive?

    #46452

    Joshua
    Keymaster

    By default it should resize a bit, but you can add this to your Custom CSS as well to further modify it:

    @media screen and (max-width: 768px) {
        h1{
            font-size:24px;
        }
    }

    Just make sure and set the size you’d like to use.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.