Adding a News Sign Up Box in Header – 2012

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter dequecolour

    (@dequecolour)

    10 years, 9 months ago

    Can anyone chime in?

    WPyogi

    (@wpyogi)

    10 years, 9 months ago

    Where do you envision that box? Your social icons are kind of in that place that the other site has the box…

    Have you looked at this?

    http://wordpress.org/plugins/mailchimp/

    Thread Starter dequecolour

    (@dequecolour)

    10 years, 9 months ago

    i think i’d like to try making the icons a tad bit smaller, each of them, and put them in a row of six. then the newsletter sign up would be above those icons. i love how you showed me to put them in the header, but they are a little big right now, and i want it to look professional. the header is still being designed although i am loving it more and more. even the scale of the world map i drew on the left and the site title is not set in stone.

    anyway — i’ve used a plugin for mail chimp in the sidebar, yes. it looked out of place bc it wasn’t customized to go with my site. it was grey with a random font that didn’t fit.

    i will live if it isn’t possible, but what i’d want ideally would be a box i drew, so that it could be black and white and be labeled with a font i chose, and then it would be programmed to connect to mailchimp (or any other valid bulk email site.) i know it must be possible to program generally bc i see sites with custom boxes. i just don’t know if it will work with twenty twelve’s header. i know this is a real niche question, so it’s just a shot in the dark.

    gracias!

    WPyogi

    (@wpyogi)

    10 years, 9 months ago

    Yes, all of that is possible – it’s basically quite a bit of custom work so you may need to either learn more CSS or hire someone to do the work for you.

    Here’s a start on it:

    To move the icons, change this CSS:

    .socialicons {
    float: right;
    margin-top: -25px;
    position: relative;
    width: 300px;
}

    To add a box for the sign-up add the code below in the header.php file between these lines:

    <?php endif; ?>

NEW CODE GOES HERE

        <div class="socialicons">

    new code:

    <div id="signup">
THE CODE FOR THE SIGN UP FORM WILL GO HERE
</div>

    Then also add this CSS:

    #signup {
    float: right;
    width: 400px;
    height: 300px;
    border: black 1px solid;
}

    Those changes may need to be adjusted, but see how they look…

    Thread Starter dequecolour

    (@dequecolour)

    10 years, 9 months ago

    thanks for this. i have been experimenting with the social icons, and they now look like they are slightly underneath the actual header. can i move them up?

    internalcompass.us/castle

    can you help, or is there a resource you would point me to that might help me learn how to correct that? i tried editing the margin on the social icons code in css but that isn’t helping.

    WPyogi

    (@wpyogi)

    10 years, 9 months ago

    This seems to work:

    .socialicons {
    float: right;
    margin-top: -40px;
    position: relative;
    width: 250px;
    z-index: 100;
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding a News Sign Up Box in Header – 2012’ is closed to new replies.