Support » Theme: Singl » How to achieve the two boxes in the demo

  • Resolved studavis


    Just wondering how you achieved the two boxes as seen in the demo?

    I presume that they are just two posts, but they don’t have the date / category etc on them? Or is it a page?


Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Kathryn


    Hi Stu, do you mean the two items here?

    The first box with the music player is page content of the static page set as the homepage under Settings > Reading. This page is set to use the Front Page template.

    The concert schedule below that is a child page of the static page which is set as the homepage. This is a feature of Singl’s Front Page template – it displays child pages.

    More info:

    Let me know if this answers your question.

    Perfect response! Thanks.

    One more question – is it possible to have the footer open by default?

    Moderator Kathryn


    You can try this to keep the widgets panel open and hide the trigger:

    .bottom-panel {
      display: block;
    .widgets-trigger {
      display: none;

    For any new questions, could you please start a new thread? Thanks!

    Yes no problems, sorry.

    That didn’t work btw.

    Moderator Kathryn


    Hmm, that’s odd, it worked fine on my test site. Could you provide a link to your site so I can take a look directly?

    Sure, it’s – not sure if there’s clashing styles between style.css and gigpress which I’m also running.

    Moderator Kathryn


    It looks like you’ve mixed in some of the code I provided with the default CSS, directly in style.css, is that right? I also see that you’ve hidden the widget trigger, but I don’t see the first piece of CSS I provided, which is what keeps the panel open.

    Here’s what I suggest for proper CSS overrides:

    First, revert back to the default style.css file that comes with the theme. You may want to make yourself a copy of the changed file in case you need to transfer over any other tweaks you’ve made.

    Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    Since you’re already using Jetpack, an easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Add the CSS I provided above to your custom CSS area.

    Let me know how it goes.

    Sorry yes, was testing on the styles.css file. Reverted that back to stock, and added the CSS you supplied through the Jetpack module.

    Still didn’t work, so as a last resort added an !important to the .bottom-panel style and that has forced it to work.

    Thanks for your help.

    Moderator Kathryn


    Glad to hear it.

    Using a child theme on my test site, no !important declarations were necessary. You might be able to omit !important by targettting a more specific CSS element.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to achieve the two boxes in the demo’ is closed to new replies.