Get Updates

Your email:

Suggest an Article

How do I...?

In this section we'll discuss some of the finer points of getting things done on the HubSpot CMS... sometimes it's not readily apparent how things work!

Migration Tips and Tricks

Current Articles | RSS Feed RSS Feed

How to create and add Call-to-Action buttons

Posted on Tue, May 10, 2011

First you need to Enable Call-to-Action creation from
Settings > Website Settings > Enable Call-to-Action creation.

CTA

 

Go to the page where you want to have the call-to-action (CTA) button and add a new module, or edit an existing one.

Point the cursor inside the module – where you want to have the CTA button – and expand the toolbar by clicking on more.

CTA

 

Now click on this icon BTN to create/insert the buttons.

CTA

 

Add your text to the button. Choose what shape you want, background, width, height, font, etc. and more options from Advanced tab.

CTA

 

Be aware of the width you choose keeping in mind the shadow and the place where the button will go.

You can also insert an image, like I did in the example bellow:

CTA

 

When you are ready click on the “Save and Continue” button.

Now choose a page of your portal to link to or paste an external link in the textbox:

CTA

 

Click “Save and Continue” and now you can make another button (is recommended) of different design/ text. These two buttons will be displayed at random.

Finally, click on “Insert into page”.

CTA

 

The generated code can be copied from this module to header or courtesy links too.

You can also delete, create or group CTA buttons from Settings > Website settings > Call-to-Action dashboard, once the Call-to-Action creation is enabled.

CTA

Using border-radius and box-shadow (CSS3) for all browsers, including IE8/7/6

Posted on Wed, Dec 15, 2010

1.Download and unzip the archive.

2.Upload all files in File Manager.

3.Change with your portal path and add this to <head></head> (Settings > Website Settings > Header Html) :
<!--[if IE]><link rel="stylesheet" href="/Portals/70580/pie/ie.css" type="text/css" media="screen, projection" /><![endif]-->

4.In the CSS/custom.css code use always a “very” relative path to the element that uses box-shadow or border-radius  in order to avoid the “!important” property for background style. This is required, otherwise the script won’t work.

For example:

instead of

div.block div.pad {
background:url(image.gif) !important;
}

use

#foxboro_container #foxboro_content div.block div.pad {
background:url(image.gif);
}

5.In CSS/custom.css code use this:

for BORDER-RADIUS:

#MyElement {
-webkit-border-radius:10px;
-khtml-border-radius:10px;        
-moz-border-radius:10px;
border-radius:10px;
}

or, if you want to have only certain corners to be rounded:

 

#MyElement {
-webkit-border-radius:10px 10px 0 0;         
-khtml-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}

starts at the top left corner and runs in clockwise order. So, in this example we have rounded only the top corners.

 

for BOX-SHADOW

 

#MyElement {
-webkit-box-shadow: #3d4069 0 0 15px;   
-moz-box-shadow: #3d4069 0 0 15px;
box-shadow: #3d4069 0 0 15px;
}

  • first property is the color of the shadow.
  • 2nd property is the left/right position of the shadow. for left position use minus (“-”)
  • 3rd property is the top/bottom position of the shadow. for top position use minus (“-”)
  • the last property is the blur.

 


6.Add all elements that uses this script in ie.css file and don’t forget to change the path to htc file.

#foxboro_col1 div.block div.pad, #foxboro_col2 div.block div.pad, etc. {
behavior: url(/Portals/68137/scripts/PIE.htc);
position: relative;
}

Issues:
As far as I have noticed:

It won’t work on elements with !important property for background style.
It’s not working for HTML and BODY tags.
The elements (images,elements with background, etc.) inside the one with rounded corners will cover the margins and the effect will be gone if the main element don’t have a proper padding or the child don’t have the same “rounded corners” property.

There could be more issues and workarounds, so is up to everyone how to adapt the content in order to obtain the best look.
Personally I prefer to use images but sometimes is very hard to do that, especially when are gradients in place. So this could be a pretty helpful script.

More info here: http://css3pie.com/

Removing HSPACE and VSPACE from images

Posted on Tue, Jul 27, 2010

The new WYSIWYG editor adds horizontal and vertical spacing to images by default: vspace=”3” hspace=”3”

Sometimes this can interfere with the placement of images, especially in a migration that depends a lot on imagery. A bug report has been filed on this behavior, but until it's fixed Radu has suggested a work-around using JavaScript:

remove margins
Download the script in a text file here.

Thanks Radu!

Setup a multi-language site using the "microsite" feature

Posted on Tue, Apr 20, 2010
 (thanks to Lucian for this article) 

There are situations when we need a multi-language website. In order to achieve that, we will use the microsite feature. 

Steps:

1. Create a new page (Create -> Website Pages). Let's call it 'French'. 

2. Click on the 'Page Properties' button from our view or go back (Create -> Website Pages) and access the 'Page Properties' of our new page ('French').

3. We scroll down until we see 'Microsite Root Page:' and we choose 'French' from the drop-down list. This means that this page is now the root of the microsite and all menus on this page will only show the children of the 'Microsite Root Page' and nothing else.

4. Create the rest of the pages that will stay in the microsite. Let's create a new page called 'Home' and another one called 'About'. For each of these pages we must choose the name of our microsite in 'Microsite Root Page'. In this case, that will be our first page ('French').

5. The new pages must stay under the microsite root page ('French'). Therefore, we will drag & drop these pages under the 'French' page.

6. Next, we will redirect our first page - 'French' - to the second page - 'Home' (Page Properties -> Redirect URL -> /home). Thus, when we will click on 'French' we will be redirected to our new French 'Home' page.

These steps were tested on the Brighton theme only but they will work on Foxboro, Cambridge and Everett. However, if any of these themes are used, we may need to tweak the result a bit.

Update... when used on Foxboro and Everett, the microsite pages show up in the SideMenu as well as the top navigation. This is a bug in the menu since it's coded to render only children of a root page named "SideMenu".  For now, all that can be done is hide the side menu using CSS. 

Watch Lucian walk through these steps...

Styling the _body tag in custom CSS

Posted on Mon, Mar 08, 2010

(Thanks to Dan Mihai for this tip)
The problem:
brighton_body (and foxboro_body, everett_body... etc.) in IE and Opera has a space at the bottom.
The problem is a span with the id "hsjssp" that is generated by the HubSpot tracking javascript (it can not be seen in viewing page source, only with firebug).

The solution:
Style the SPAN like this:


#hsjssp {
display: block;
height: 0;
margin-top: -35px\9; /* for IE only */
}

 

This will effectively hide the span without killing the tracking code.


Center the Footer Menu in Brighton

Posted on Sun, Nov 08, 2009

Lucian provides this custom css for center-aligning the footer menu in Brighton:

/* FOOTER */
#brighton_footer .radmenu {
float:none!important;
}
#brighton_footer ul {
list-style: none!important;
float: none!important;
text-align:center!important;
}
#brighton_footer ul li, #brighton_footer ul li a, #brighton_footer ul li a span {
float:none!important;
display: inline!important;
}
 

Menu doesn’t break to a new line in Safari and Google Chrome

Posted on Thu, Sep 17, 2009

Thanks for this solution goes out to Radu Mihai...

The problem: when there are too many top-level menu items then the menu wraps to one or more additional lines, but in Safari and Google Chrome the menu fails to wrap... making it stretch to the right, outside the content area. Ugly.

The solution: style the menu UL element to a fixed width and make the horizontal overflow visible. Your menu items will wrap to new lines in all browsers.

#brighton_menu ul {
width:760px !important; /* fixed width */
overflow-x:visible !important;
}

This works for the footer items as well:

#brighton_footer ul {
width:730px !important;
overflow-x:visible !important;
}


Help! The "Edit Logo" button is missing and I can't change the logo

Posted on Thu, Aug 13, 2009

I'll never forget the first time I chose a 1x1 px transparent .gif for a logo by mistake... I thought I'd never find a way to fix that.
But here's the trick, use FireBug of course.

Just find the correct link:

(click for full-size image)
find the lost button

Then you can change its position onscreen from within FireBug. Here I changed the div id=”CMS_ELE_0” from top: 76px to 176px, making it come into view:

(click for full-size image)
push it into view

Once you’ve pushed the button into a visible area, you can click it and change logos.

Adding Flash Movies

Posted on Thu, Jun 25, 2009

Embedding Flash movies is a little tricky in the CMS, mainly due to the virtual directories. Basically you need to include the relative path from the page to the Flash file, and under the CMS this is different from a normal hosting environment.

The path will need to be formed similar to this:
/portals/PortalID/FolderName/FileName

You can always get the PortalID by doing a 'view-source' on any page in the site and scrolling to the bottom - there you'll see a commented script block with "Start of HubSpot Logging Code" and within that script block, "var hs_portalid = #####" - this number is the HubSpot PortalID.

Other than getting the path correct, you can use standard object/embed codes or invoke helper scripts like swfObject or AC_RunActiveContent.js - just be sure the path to your script is correct as well. Colleen shows us how to embed video in this movie borrowed from the Success.HubSpot site.

*UPDATE*  Use the Flash Embed Code Generator to easily create the embed code for your movie.

One last note - always, always use the wmode "opaque" parameter - without this the Flash movie will render on top of the CMS edit buttons and you may not be able to access the module code to fix it!

Adding Footer Links for Terms of Service, Privacy Policy, etc.

Posted on Tue, Mar 03, 2009

To add links to the footer, you will need to create a snippet of HTML that includes the style and the links that you want to display.  The snippet needs to be added by going to Settings -> Website Information and pasting into the Body Footer HTML field. Below is an example:

<style>
<!--
p.footerlinks {
color:#FFFFFF;
font-size:0.8em;
margin-top: -37px;
}
p.footerlinks a {
color:#FFFFFF;
text-decoration: none;
}
p.footerlinks a:hover {
text-decoration: underline;
}
-->
</style>

<p align="center" class="footerlinks">
<a href="http://yoururlhere" target="_blank"
rel="nofollow">Your Link Text</a>
   
<a href="http://yoururlhere" target="_blank"
rel="nofollow">Your Link Text</a>
<br />
<a href="http://yourprivacypolicyurl" target="_blank"
rel="nofollow">Privacy</a>
   
<a href="http://yourtermsofserviceurl" target="_blank"
rel="nofollow">Terms</a>
</p>


All Posts | Next Page