Edit the Hubl group.public_title

[Sourcengine]

Hey there,

I am not familiar with Hubl coding and I am encountering an issue when I try to change the title of our blog.

I have changed the {{group.public_title}} to twhat I want but then the CSS is not applied to it.

How do I change the {{group.public_title}} to what I want the name of the blog to be and have the css applied to it?

Here is the CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500');

.custom-banner-blog {
  min-height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  position: relative;
}
.custom-banner-blog .banner-text {
  padding: 100px 0 24px;
  text-align: center;
  margin: 0;
  -webkit-box-flex: 0;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  flex: 1;
  z-index: 1;
  position: relative;
}
.custom-banner-blog .banner-text .banner-title {
  color: #FF4900;
  font-family: "Montserrat", sans-serif;
  font-size: 50px;
  line-height: 56px;
  margin: 0px 0px 36px 0;
  width: 100%;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -2px;
}
@media (max-width: 767px){
  .custom-banner-blog .banner-text .banner-title{
    font-size: 2rem;
  }
}
/* Ie Only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .custom-banner-blog {
    height: 500px;
  }
}

Here is the HTML+HUBL code:

<div class="custom-banner-blog" style="background-image: url('//cdn2.hubspot.net/hubfs/4508663/June2018/Images/header-3000.jpg');">
    <div class="banner-text">
        <div class="page-center">
          <div class="banner-title">
            {{ group.public_title }}
          </div>
        </div>
    </div>
</div>

[Jsum · Accepted solution]

@Sourcengine,

{{ group.public_title }}

refers to "The title of this blog as it should appear at the top of rendered pages" 

{{ group.html_title }}

refers to "The title of this blog as it should appear in the <title> tag"

The first one seams like it is the second one. This is pretty confusing in my opion. Hubspot should really update the docs to make this more clear. 

There is also:

{{ group.header }}

Which I beleive is what I used to apply the blog title to the banner areas of some of the blogs I have built. 

In any case, these tokens are pulling from your blog settings. If you go to content settings, blog settings, choose the blog you want to edit, you will find fields for these variables.

All of these variables print strings. There shouldn't be any markups in these strings. Css does not apply to text, it applies to markup. As long as the markup doesn't change your css should not break. Obviously, changing your markup (class names, id names, elements, etc) could, and most likely would, break your css. 

I'm a little rusty on my blog variables at the moment so play with the three above. make changes to them in your blog settings. You shouldn't have to do anything to your markup or your css and no style changes should occur.

Need help? Hire Us Here