BoldGrid Support

Hi, abner027.

I’m sorry to see you’re receiving an error when you try to view your installed staging website. What version of BoldGrid are you running? Also, which design/theme did you select for your Inspiration? If you can provide the version of that theme as well, we can try to review this issue further on your behalf.

If you haven’t already, please try to remove and re-install the Inspiration. I hope this helps! We look forward to your reply to assist you further.

Sincerely,

Carlos E

Hi, Allison!

I’m sorry to see you’re experiencing issues with the Primus theme, in the mobile version. The good news is, BoldGrid does give you a few options to modify from within the Gallery GridBlock.

Simply navigate to Pages > All Pages and select your home page. Then, click on the photo to select the Galery and then click on the Edit (Pencil Icon). This will open the Edit Gallery pop-up screen. This is where you can modify the options for the captions displayed. You can change the “Caption Type” to “p” (for paragraph) to make the caption text smaller. Otherwise, you can set the “Captions” to “hide”, to disable them from displaying altogether.

Once you’ve adjusted the captions to your liking, you can click on the image again to open the Edit Gallery pop-up. Then, click on an image. The options will display in the right-hand column. Once you click on the image, scroll down on the right-hand column to “Link To”. There you can enter the full URL to the page you’d like your visitor to be directed to upon clicking the image. I hope this helps!

Sincerely,

Carlos E

Sure thing Will! Glad I could be of assistance.

If you’re looking around for a host, I would recommend InMotion Hosting. Although they are not a direct registrar, you can purchase your hosting and domain registration through them. This helps to ensure your renewals are processed in a unified manner, which can help avoid a lapse in or expiration of services. You can even elect to have BoldGrid automatically installed upon provisioning of your hosting account. Most importantly, their Support is #1 as well!

Good luck with your site!

Sincerely,
Carlos E

Hi, Isabella!

Thanks for asking your question about a specific theme for a Travel Blog. All of the BoldGrid Inspiration Design Categories have the ability to include Blog functionality. When you select your theme from the Design tab in Inspirations, select the button “Change Settings”. Once that menu opens up, you will be able to enable the Blog functionality to any BoldGrid theme.

If you already installed your theme, you can still add the Blog functionality, by following these instructions. I hope this helps!

Sincerely,

Carlos E

Hi Hal!

Thank you for asking your question about the color palette change after the update to your Hydra theme. I’m sorry to see this has caused an issue. If you are able to navigate to the Colors Tab in the Customizer, you should be able to update the colors there automatically.

Although I recommend making changes from the Colors Tab, you may also use the Custom HTML/CSS Editor to enter the following code to modify the color of the Titles on your website:


.palette-primary a {
color: #1bbc9b;
!important;
}


I hope this helps!

Sincerely,

Carlos E

Hi!

Thank you for reporting the errors you received. I’m sorry to see there was an error displayed after your update. Did you receive that error while the updates were running or after clicking into the BoldGrid Editor (or another plugin–if so, which plugin?)? Are there any issues or bugs you’ve experienced in using the BoldGrid Editor, since updating? Also, what are the current version(s) you have updated to?

I apologize for so many questions. However, with your feedback, we can attempt to replicate the error you saw and trouble shoot accordingly. If you aren’t having any abnormal behavior from the BoldGrid plugins, I’d say you can disregard that error. We look forward to your response.

Sincerely,

Carlos E

Hi ikatdigital,

Thank you for your question about modifying the space between your header and slider. The CSS alterations are a bit intricate. However, finding the elements and adjusting them to your liking can be simplified using Google Chrome’s Developer Console. This is how you can manipulate the CSS live and eventually decipher that code.

All you have to do is navigate to your Home page in Google Chrome. Simply right click on the “element” you want to adjust. In this case, the margin. Select “Inspect Element” from the menu that is displayed. This will launch the Google Developer Console in the browser. Following their instructions, you can modify the CSS/HTML live to pin point the correct code to add to the CSS Editor in BoldGrid.

In BoldGrid, if you go to Customize > Custom Theme CSS and click on Open Editor, you will be able to add custom CSS in that section. The margin for the content (Slider) can be  reduced using the following code:

.entry-content {
margin-top: -0.5em !important;
}

I hope this helps!

Sincerely,

Carlos E

• This reply was modified 4 years, 4 months ago by Jesse Owens.

Hi, Nathan.

Thank you for posting your question about the custom shadowing effect on your title. I’m sorry to see you’re having issues with that. You should be able to review that kind of modification immediately. However, if you are modifying the “Staging” site, then you may have to ensure you click on the correct link for “View Staging Site”. If you click on “View Active Site”, then you would simply need to click on the button to switch between Staging and Active views. As well, you may need to confirm which version of the site you are making these changes to.

Also, you can try to open your browser in a “Private Browsing Session”. This should help eliminate your browser’s immediate loading of the cached version of your site. I hope this helps!

Sincerely,

Carlos E

Hi Stephen,

Thank you for posting your question about editing the text inside a GridBlock. I’m sorry to see you’re experiencing issues. I’m not quite sure where you are at when you are experiencing the inability to edit the text. You should be able to navigate to Pages > All Pages. Select the Page with the text you’d like to edit. Once you are at the Edit Page window, ensure that the “Visual” tab is selected for the editor. If you are set to “Text” then the GridBlocks are not displayed. As long as you are using the visual editor, you should see the GridBlocks as you hover over the text and click on it to modify the text.

I hope this helps! If you are attempting to modify text and persistently having issues. Please let us know where (Customizer, Posts Editor, Pages Editor, etc) you are experiencing these issues, so we can look into it more.

Sincerely,

Carlos E

That’s great to see Neal!

The CSS alterations are a bit intricate. However, finding the elements and adjusting them to your liking can be simplified using Google Chrome’s Developer Console. This is how I was able to locate and manipulate the CSS live and eventually provide you that code.

All you have to do is navigate to your Shop Online page in Google Chrome. Simply right click on the “element” you want to adjust. In this case, the product’s image placeholder or the image itself. Select “Inspect Element” from the menu that is displayed. This will launch the Google Developer Console in the browser. Following their instructions, you can modify the CSS/HTML live to pin point the correct code to add to the CSS Editor in BoldGrid.

I’ll post another comment, once I locate some more CSS details related to those products. Thanks for your patience!

Sincerely,

Carlos E

Hey there mbrooks!
Thanks for getting in touch with us in regard to your background image sizing.  Sizing background images for just the right display between devices can be sorta tricky.  iOS devices have had issues with background-size: cover and using fixed positioning for the scroll attachment when using Safari.

This does require a little bit of trial and error to get it looking just the way you want depending on your image and the dimensions it has, but the first thing I would try is adding this CSS in the CSS editor:

body.palette-primary.custom-background {
background-position: center center;
}

This should position the background image in the center instead of the current top left you’re seeing.  For most cases, this usually gets the desired look.  You might want to check the image you’re using as well, maybe it’s very large and could be scaled down or resized some to make this display better on mobile.

You can try scaling the background image to the size desired by changing the background-size property as well with this CSS:

body.palette-primary.custom-background {
background-size: auto 100%;
}

If you only want the image to be scaled in mobile and are happy with the desktop display, then you would use a media query to achieve that:

@media only screen and (max-width : 768px) {
body.palette-primary.custom-background {
background-size: auto 100%;
}
}

I ran into this issue with this theme today.  This has been taken care of and will be in the next release of the theme.  In case anyone runs into this problem and references here, the image can be adjusted to the middle with CSS using the CSS tool in the customizer:

.wcflexslider-container .gallery-icon {
margin-left: -16px;
}

Hey Markpr,
Thanks for your question about removing the “Posted On Date” from your posts.

With the amount of customization you’re doing, it’s recommended that you create a child theme so any modifications you make to the theme’s structure don’t get lost when doing updates.

Solution #1: Removing the content from being generated.

The correct way to do this is to override the method that is creating the links to suit your needs.  This is better for Search Engine Optimization since you’re not loading information that isn’t needed for your users.  While it’s a very small amount of code being removed, there’s less overhead, which in turn can increase your site’s speed.  Search engines don’t see with eyes, so when scraping your site, they will also see things that you hide, which may or may not be good for your site’s ranking in search engines.

The method that creates this link is boldgrid_posted_on().  This is what is called a pluggable function, which means your child theme can override it to produce whatever custom markup you want to use for the post there.  The page you links for our-blog is an archive page.  Inside of your child theme’s method for boldgrid_posted_on(), you could conditionally check that by using the WordPress conditional is_archive().  There’s a lot of conditionals you can use within your template files to make the display of the content look and fit your exact need.  This gist is what you would add to your child theme’s functions.php file.

You can see there at the top of the method, we check if we are on the archive page using the is_archive() method, and then return or abort running the rest of the code in that block.  This removes those sections from appear in your archive pages, but allows the other areas of your site to still have the markup when it’s needed.

Solution #2: Using CSS to visibly hide the content.

This solution would provide a way to hide the content visibly, but it’s still loaded on the page – just hidden to the naked eye.  People who use things like screen readers to visit your site or blog would also still “see” this content because they are reading the content of the page with their screen reader, and not visibly looking at it.

The theme is designed in a way that allows everything to be contextually styled as you see fit.  You can see these classes on the body element.  Each page and post has a bunch of different things, so you can literally provide unique styles for just one post.

We know that you want to hide this on the blog page, so we will start by looking at the body element.  There’s a blog class added to there as the top level we use.  If we right click on the “Posted On Date” and inspect the element, we will see that this is wrapped inside of a div with the entry-meta class.  This means we can target the element, and set it’s display property to “none” with the following CSS:

.blog .entry-meta {
display: none;
}

Hello gordrr,

Thanks for your question!

From my understanding, you’re displaying two languages on one site at the same time.  Each language is in a different color to make it easier for someone to read their preferred language.

The easiest way to accomplish this would be to use the CSS Editor in the WordPress Customizer.  You would use an :after pseudo-element.  In this selector you are able to add a content property, along with any other CSS properties.  This will allow you to set your alternative tagline’s text, change the color, font-size, and control where it’s placed in relation to the parent element, ie the actual tagline.

This CSS would create “This is the second language tagline.” below the standard tagline:

.site-description:after {
content: “This is the second language tagline.”;
color: red;
display: block;
padding: 1em 0;
}

If that doesn’t quite cut it for you, then the next solution is to modify the theme.  When you modify a theme’s template files, you will want to create a child theme, so your changes don’t get lost during updates!

Luckily, you don’t have to look around and find the right template part to modify just to change that markup as we have provided the ability to do that using the BoldGrid Theme Framework Configurations.  You could add the following code to your child theme’s functions.php file – make sure you replace both instances where it has “your_child_theme_name” with your actual child theme’s name:

function your_child_theme_name_config( $config ) {
    // Adds our custom tagline markup to be used.
$config[’template’][’tagline’] = ‘<h3 class=”site-description %1$s“>%2$s</h3>’ .
‘<h3 class=”site-description %1$s“>This is the second language tagline.</h3>’;
    return $config;
}
add_filter( ‘boldgrid_theme_framework_config’, ‘your_child_theme_name_config‘ );

To explain the above code a bit – this is just using a WordPress filter for the configuration options.  The markup you see is the HTML that makes up the tagline currently.  Where you see %1$s – that gets replaced by CSS classes that get filtered or added by other code in the theme or in plugins.  Where the %2$s is – that gets replaced with the tagline that is entered inside of the WordPress Customizer.  The above example gives you two H3 elements, one with the tagline how it is today, and the second one saying “This is the second language tagline.”

You’ll want to make sure you have those two values in your HTML markup to ensure everything works properly, but you can change whatever else you need in terms of the elements, and structure to fit your needs.

Hopefully this will help you get your issue resolved.  Let us know if you have any other questions gordrr!