Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Bootstrap and GP

Home Forums Support Bootstrap and GP

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #181736
    Nat

    Hey Tom,

    I have a question. I have experience building website using bootstrap. My client has a WP website and he wants me to re-design and redo it based on the BOOTSTRAP sample I sent him.

    Now, his site is huge. And one of the things I suggested him was to have the home page with sign-up form and others call to action.

    Is it possible to simply copy and paste all html and css codes to a WP page in GP and set it as static page as it’s normally done? I mean, I’ve tried, but the result is a complete mess. I have to edit and re-write a lot of code and I see that the bootstrap css file may create some conflict with GP. This is the page I want to set as the home page.

    (Look also the custom navbar)

    natguitar.com

    Thanks,
    Nat

    • This topic was modified 4 years, 8 months ago by Nat.
    #181789
    Tom
    Lead Developer
    Lead Developer

    Hi Nat,

    It probably won’t be that simple, but if the HTML and CSS is all present, it shouldn’t be hard to remove/overwrite the conflicting styles to get a very similar look.

    #182247
    Nat

    Hey Tom,

    Well, by copying and pasting the HTML and CSS happens this..

    http://natguitar.com/index.php/generatepress-test-1/

    BTW, I’m using the GP sections here.

    The only way to “fix it” is to remove all the HTML comments and <br> tags. Then I have switch to VISUAL and start editing there (i.e. backspace, etc.)

    Here’s the CSS of the form.

    <section class="optin-form">
    <h2 class="title-benefits">Join the <span class="product-name">Free Mindfulness</span> Newsletter</h2>
    <p class="cta-p">Join today and receive daily mindfulness strategies to increase CALM and FOCUS to become<span class="focus"> Unstoppable!</span></p>
    
    <div class="row">
    <div class="col-md-8 col-md-offset-2"><form class="form-inline" accept-charset="utf-8" action="https://app.getresponse.com/add_subscriber.html" method="post"><!-- Name -->
    <div class="form-group form-name"><input class="form-control" name="name" type="text" placeholder="First Name" /></div>
    <!-- Email field (required) -->
    <div class="form-group form-email"><input class="form-control" name="email" type="text" placeholder="Email Address" /></div>
    <!-- Campaign token -->
    <!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
    <input name="campaign_token" type="hidden" value="token-here" />
    
    <!-- Thank you page (optional) -->
    <input name="thankyou_url" type="hidden" value="http://natagosta.com/blog/confirmation/" />
    <!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
    <input name="start_day" type="hidden" value="0" />
    <!-- Forward form data to your page (optional) -->
    <input name="forward_data" type="hidden" value="" />
    <!-- Subscriber button -->
    <button class="btn btn-default" type="submit">SIGN UP TODAY!</button>
    
    </form></div>
    </div>
    </section>
    #182430
    Tom
    Lead Developer
    Lead Developer

    Hmm, not sure what I can do to help here. You’ll have to make sure all of the HTML is correct and that the necessary CSS has been loaded into GP in order for things to look as they should.

    #182574
    Nat

    Thanks Tom,

    I figured that out even though the code looks nasty haha.

    #182645
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.