How to center titles in a grid page ?

Hi Jeremy,

1. I’d like to know how can I center the titles in a grid page with three child-pages ?

You can centre the title using some custom CSS.

To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack active, then you can also activate its custom CSS module.

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

.pique-grid-three h3 {
    text-align: center;
}

2. When I surf on my website with my iPhone 4S, each panel seems infinite and I have to scroll a long time to reach the next panel… How can I resolve that ?

Each panel will be sized according to the amount of content that’s in it. Additionally, any content that is displayed in three columns on desktop needs to “collapse” into one column on mobile in order for it to remain readable. These factors mean that the panels will indeed appear longer when scrolling on mobile devices.

There isn’t an easy way around this but I recommend keeping your most attention-grabbing content at the very top and including call-to-action buttons that link to other lower panels in the first panel, as I can see you have done.

Those visiting your site on mobile can therefore click on the one of the buttons in the first panel in order to be quickly taken to the lower, “contact” panel on your site without scrolling.

3. I’ve read another topic (https://www.ads-software.com/support/topic/help-with-pique-theme?replies=16) about a background picture much darker than it should in frontpage. I’ve tried the solutions proposed by Kathryn but it hasn’t changed anything. How can I resolve that ?

The opacity of the very first panel on your home page is the only one that can’t be changed by navigating to Appearance > Customizer > Theme Options.

You can change the opacity of that panel with some more custom CSS though:

#pique-hero .pique-panel-background {
    opacity: 1;
}

Change the value of opacity from anything between 0 (the darkest option) to 1 (the lightest option) e.g. 0.1, 0.2, 0.3, etc.

4. In the contact page, I’ve reproduced the overlay on the right side of the page but I haven’t been able to extend its width (it’s much smaller than in the Pique demo) nor to color the symbols.

In the Pique theme’s demo site, the headers have H3 HTML tags wrapped around them. The H3 tags are automatically styled to make the symbols and text the light blue colour.

Here’s an example of how the HTML for the “Phone” header in the demo site looks:

<h3><i class="fa fa-phone"></i> Phone</h3>

In addition, the page has the “Full Width Page” template assigned to it in the demo, which makes it a little wider. To assign that page template to your page, navigate to the editor and then select from the Template dropdown menu in the Page Attributes module on the right.

Hope that information is helpful! Let me know if extra questions come up.

Thank you VERY MUCH for your marvellous and very complete answer ! It helped me a lot ! I have a last question about a multilingual version of my site. I don’t have access to my server (hosted by OVH), so I cannot install easily the Multisite plugin. However, I installed WPML and it created a path-based multilingual version of my site.

My question is : how can I customize the call-to-action buttons to look exactly as they look on this website https://restaurantgiaba.com/ ?

Once again, thank you very much for your answer !

You’re welcome, Jeremy! I’m glad that I was able to help out.

My question is : how can I customize the call-to-action buttons to look exactly as they look on this website https://restaurantgiaba.com/ ?

Are you referring to the red “FR” button in the upper right? If so, they have styled that button using some custom CSS:

.langSwitcher a {
    color: #F7E79C;
    background-color: #BC0C17;
    padding: 12px;
    border-radius: 50%;
}

Once again, thank you for your answer, Siobhan !

What should I insert into the CSS to locate this language button on the upper-right corner ? And where do I type the text and the link of the page to which the button points ?

Hi Jeremy,

Does the plugin you installed include a widget or the option to insert a link to your separate languages in the menu of your site? If so, the first step would be to make use of the plugin’s features and add the link somewhere on your site, preferably the main menu.

Indeed, this plugin has an option to insert a widget but I don’t know how to insert it with the dynamic menu provided with Pique. WPML’s solution is to insert the language-switcher button as a widget ; Pique’s options about widgets are in the side-bar or in the footer… And I would it in the header, like it is on the restaurant website !

Do you have any idea ? What kind of code should I insert to have this button on the upper-right corner ?

Thank you very much !

Hi Jeremy,

The best option for you to achieve the same look as that other site would be to create a new widget area in your header, which requires some familiarity with HTML and basic PHP.

The very first step to setting this up is to create a child theme:

https://codex.www.ads-software.com/Child_Themes

Once you have set up your child theme, the following guide will walk you through the steps to register a new widget area:

https://codex.www.ads-software.com/Widgetizing_Themes

As per the above guide, you will need to firstly register your new widget area in your child theme’s functions.php file. The code may look something like this:

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function pique_child_widgets_init() {

	register_sidebar( array(
		'name'          => 'Header Right',
		'id'            => 'header_right_1',
		'before_widget' => '<div class="header-right">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2>',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'pique_child_widgets_init' );
?>

You could then use the following to display the above widget in your child theme’s header.php file:

<?php if ( is_active_sidebar( 'header_right_1' ) ) : ?>
	<div id="language-icons" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'header_right_1' ); ?>
	</div><!-- #primary-sidebar -->
<?php endif; ?>

Let me know how you get on with those steps.

Hi
I am not experienced with css, php or html code.
But after some experience with the beautiful theme Pique and reading some posts it seems that Pique may require coding skills that I don’t posses.
My area of specialization is SEO and more specifically link audits and detox.
Anyway, when I added my logo – code I learned that it had to be entered in the header.php file for the logo to inserted.

Now I notice a few things that need adjusted.
I am wondering if I should just buy a more premium theme that would not require so much coding?

I love Pique it is absolutely beautiful. I would hate to loose it but I must be practical.

Thanks

Steve

Hi Steve,

Please could you start your own thread on this forum?

We try to keep separate topics to separate threads in order to make them more readable and easier to support. In addition, a separate thread will prevent the original poster from receiving further email notifications around unrelated questions.

You can start a new thread on this forum here:

https://www.ads-software.com/support/theme/pique#postform

In answer to your question: It’s not absolutely necessary for you to edit code in order to add a logo. Pique has built in support for a logo which you can activate by installing the Jetpack plugin. After you have activated Jetpack, navigate to Appearance > Customize in your admin area and then the Site Title, Tagline, and Logo panel to upload your logo.

If you are going to make changes to code then I do not recommend editing the theme’s files directly. Any changes you make will be lost when it comes time to update your theme. Instead, create a child theme and make changes from there. More information on child themes can be found in these guides:

https://codex.www.ads-software.com/Child_Themes
https://wordpress.tv/2015/05/12/kathryn-presner-getting-comfortable-with-child-themes/

As mentioned, please create a new thread if you have further questions. We’ll be happy to help from there!