[Resolved] CSS Help?

Home Forums Support CSS Help?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #304231
    brandonhull

    Hi Tom,

    I’d like to edit my H4 CSS to look something similar to screenshot at the link below, but unsure how I’d accomplish this in CSS. Are you able to offer any insight for me?

    2017-04-10_16-43-36.png

    I want to avoid using actual Toggles/Accordions for SEO purposes, so the result wouldn’t need to be exactly like that screenshot, but I do like to break up the monotony of text with slightly different headings periodically. Hence, the navy background and the + sign. I don’t, therefore, need it to actually toggle to open or close.

    Any thoughts on this? I realize this isn’t a support issue, so if you can’t provide specifics I totally understand!

    Thanks,

    Brandon

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #304232
    Leo
    Staff
    Customer Support

    Hi Brandon,

    We should be able to help you with that. Can you link to the page where the screenshot was taken?

    If so I can give you the exact style they are using 🙂

    #304233
    brandonhull

    Wow Leo thanks for the speedy reply. It’s actually a screenshot from my own post and it was using an Accordion plugin shortcode that I’m going to eliminate, but that post is still in the works, so it’s in draft mode.

    I can tell you this, if it helps:

    The font is Raleway, and it can be either 18 or 20 point type. And the navy color is #0C2451. Does that help at all? This is the CSS the accordion produced:

    .smk_accordion .accordion_in .acc_head.theme3 {
    background: #0c2451 !important;
    border-bottom: 0px solid #212d3a;
    color: #ffffff;
    cursor: pointer;
    display: block;
    text-align: left;
    font-size: 18px !important;
    padding: 10px;
    position: relative;

    #304289
    Leo
    Staff
    Customer Support

    To make the title block like that, you could add something like this in the content:

    <div style="background-color: #0C2451;">
        <h4>Title Here</h4>
    </div>

    With this CSS to change the h4 style:

    h4 {
        font-family: "Raleway", sans-serif;
        color: #ffffff;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    This should get you closer. Let me know.

    #304317
    brandonhull

    With only a couple very minor tweaks to what you provided, I got it pretty much right where I want it. Leo, thanks so much.

    Resolved!

    #304486
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

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