Altering Blog for Pique

  • qbrc

    (@qbrc)


    10 years ago

    (I added this to the other support forum, but I hadn’t released Pique moved to a dedicated forum – apologies for duplication)

    I love the Pique theme and hope to keep it, so I’m hoping someone can assist!

    There are several problems I’m having related to the Pique theme’s Blog format. For reference, I’m looking at the following: http://wp.me/p74VwW-3s. Main-site: http://www.ciscoconsulting.org.

    1) How can I get the header on the blog, which right now comprises about 2/3 of the opening window, to something like just our logo? It’s taking up the whole page and preventing the user from seeing the title of blog post itself.

    2) Connected to number 1), how can I drop our title down below the logo, rather than right in the middle. The original suggestion altered the header on the first frame of the main page too, which blocked other text. Is there an easy way to increase the size of that text, too?

    3) Any way to change the background/text-color of the blog itself to match the main scroller page aesthetics?

    These issues are what prevent me from including the blogging option on the main scroller page.

    I love this theme. Thank you!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    9 years, 12 months ago

    On the header on single post pages, give the following CSS a try. It makes the image smaller and then sets the same background color as the edges of the logo.

    .single #masthead {
    background-color: #eae5c7;
    max-height: 250px;
}
.single #masthead .pique-header img {
    max-height: 250px;
    width: auto;
}

    For #2, add this to bring the title down on single post pages.

    .site-branding {
    bottom: 0;
    top: auto;
    transform: translate(-50%, -20%);
}

    Give this a try for the color change on blog and single post pages.

    .blog #page, .single #page {
    background-color: #7f867d;
}
body, button, .archive .read-more a, .blog .read-more a, .search-results .read-more a, input, select, textarea {
    color: #fff;
}

    Thread Starter qbrc

    (@qbrc)

    9 years, 12 months ago

    Thanks, sacredpath!

    Would this just go under custom-css within the wordpress admin panel? I know Pique is different in this way.

    Siobhan

    (@siobhyb)

    9 years, 12 months ago

    Hi @qbrc: I can see you have Jetpack enabled on your site. To add CSS, activate Jetpack’s Custom CSS module and then navigate to Appearance > Edit CSS. You can enter the CSS provided by @sacredpath directly there. 🙂

    Let us know how you get on with that or if you have any extra questions.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Altering Blog for Pique’ is closed to new replies.