Dub-ins

Header | Style 1

This is your HTML. Drag a ‘Code Block’ onto the top of your Dubsado form, above everything else. Then copy and paste the following code into the block.

<div class="header">
    <h1>Dub-ins</h1>
    <h3>Header | Style 1</h3>
    <div id="logo">
        <a href="https://www.tierneystudio.com/dub-ins/" target="_blank"><img src="https://images.squarespace-cdn.com/content/5177349ee4b0be6d32e5dd93/1466025853027-ZNTWS0L8MQACH0C50NIB/tierney_web.png?format=1500w&content-type=image%2Fpng"></a>
    </div>
</div>

Update the text between <h1>This is your heading 1 text</h1> (title of form would be good here) and <h3>This is your heading 3 text</h3> (maybe your prospect/client’s company name followed by the project name).

To change the logo and make it a link, first copy the url where you want your visitors to go when they click on your logo (your website or social media page to show examples of your work would be a good idea). Paste the url in between where you see <a href="https://www.your-website.com/" target="_blank">.

Next, upload a .PNG of your logo (best file format to use because of their ability to display transparent backgrounds) to your web host, copy your logo url, and paste it into the HTML code between where you see <img src="https://your-logo.png"></a> (directly after the url you just pasted in the first step).

This is your CSS. Copy and paste the following code—in the same block—beneath the HTML code that you just pasted from above.

<style>
.header {
    linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),  url(https://static1.squarespace.com/static/5177349ee4b0be6d32e5dd93/t/5d5a11ad610bb30001ed9572/1566183868163/random-institute-MFA1V_nabPk-unsplash.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 300;
    padding: 50px;
    text-align: center;
    color: white;
    top: 0 !important;
}
#logo {
    padding-top: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}
#logo:hover {
    opacity: .7;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}
.header h1 {
    font-family: oswald; sans-serif;
    color: #ebebeb;
    font-weight: 600;
    font-size: 33px;
}
.header h3 {
    font-family: cormorant-garamond, serif;
    font-weight: 300;
    font-style: italic;
    color: #ebebeb;
    font-size: 24px;
}
</style>

Next, upload a background image to your web host, copy the image url, and paste the url in between url (https://your-background-image.com); Feel free to update your fonts and font styles “font-family:” and “font-size:” to add elements of your own visual branding.

If you have any questions concerning this Dub-in, or if you need any additional help with customizing your Dubsado forms, put in a request here and I’ll get back to you with a quote. Also, if you enjoy this plugin and want to show some love, feel free to post your new Testimonial Slider in the Dubsado Community on Facebook or share it on social media and tag me @TierneyStudio.

Oh and one last thing. I spent a lot of time customizing this plugin. Please do not share the code or sell it to anyone who is interested in it. Instead, point them in my direction so I can take care of them just like I (hopefully) have taken care of you.

Dub-ins

Header | Style 1

Thank you!