Forum Replies Created
- AuthorPosts
BoldGrid Support
KeymasterI 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;
}BoldGrid Support
KeymasterHi mark_pr!
Thanks for asking about adjusting your headers spacing. It seems that the spacing can be modified via the CSS Editor inside of the Customizer. The following code added there helps reduce the spacing below the logo:
.site-branding {
height: 210px;
}You may adjust the actual value to your liking.
Keep in mind that making these CSS changes may cause some unintentional responsiveness issues. I would recommend making a backup of your site before and after making changes to the CSS. This will ensure you have a backup to restore from, if you do experience issues after making adjustments. I hope that works out for you!
Sincerely,
Carlos E
BoldGrid Support
KeymasterHey 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;
}BoldGrid Support
KeymasterDefinitely!
You should be able to remove the triangles by setting the before and after pseudo-selectors on the body with CSS using the WordPress Customizer’s Custom CSS tool.
This CSS snippet should take care of that:
.custom-background::before, .custom-background::after{border:0}
BoldGrid Support
KeymasterHello 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!
BoldGrid Support
Keymasterhcope,
Thanks for the question! There are a few color classes you could apply to modify that element if you want it to retain it’s ability to change with the color palettes.In the “Hydra” theme you can navigate in the customizer to “Widgets > Below Primary Navigation > Visual Editor: Call To Action” to edit the markup for that button.
for example on your button-primary:
<a class=”button-primary” href=”https://referral.ameritox.com/PriumMain/”>Make a Referral</a>Using the color classes in BoldGrid for the properties on the button to change can be done like this:
<a class=”button-primary color3-background color1-background-hover color1-border-color color3-border-color-hover color1-color color3-color-hover” href=”https://referral.ameritox.com/PriumMain/”>Make a Referral</a>The color# corresponds with the color in the selected palette. So adding the classes above would give your button a grey background, white text, and a white border. On hover it would give the background a white background, grey text, and grey border. Some of the supported properties for elements are: color, background, background–color, and border–color.
Otherwise, you can of course create your own style for that button as well. Custom CSS can be added through the customizer as well by going to “Advanced > Custom JS & CSS > Custom Theme CSS -> Open Editor” to put in your own custom styles.
- AuthorPosts