WordPress.org

Ready to get started?Download WordPress

Forums

Sundance
[resolved] Search bar , Footer Columns, New Page Template (34 posts)

  1. bpd-graphics
    Member
    Posted 9 months ago #

    ´┐╝Hi, i'm looking for some guidance with the following:

    Using my sundance child theme, for my test site: http://www.bethparrattdesign.com/

    1. how can I add the searchbar to my main navigation (instead of in the sidebar widget).

    2. I created the columns for my footer. How can I clean it up so they are centered on the far left and far right, and also so that the content in there is in each specific column instead of just running. Should I instead do this as col 1 col 2 col 3? Right now I copied some other code:

    #footer-col {
    	-moz-column-count:3; /* Firefox */
    	-webkit-column-count:3; /* Safari and Chrome */
    	column-count:3;
    	margin-left: 4em;
    	margin-top: .2em;
    	margin-bottom: .2em;
    	border-top: 1px dotted #b3b3b3;
    	clear: both;
    	margin: 1.5714285714em 0 0 0;
    	}
    #footer-col li{
    	list-style-type: none;
    	}
    .site-footer {
    	border-top: 1px dotted #b3b3b3;
    	clear: both;
    	margin: 1.5714285714em 0 0 0;
    	padding: 1.5714285714em 0 1.5714285714em 11.17886178%;
    }

    3. I need to create a different page for the link "neighborhoods" which
    instead of showing posts, will show photo buttons of different
    neighborhoods (in brooklyn,ny) to choose from. Would this be a static page? I know I need to do this as a template page, just a little stuck on what I would need to put in the template page. (it should still have the sidebar nav..

    4. I need to add a form to sign up for a newsletter. Any suggestions to an easy way to get that?

    Thanks in advance for any help. I wasn't sure if I needed to post these all in a different thread or if it's ok I posted them all together!

  2. Hi there,

    I wasn't sure if I needed to post these all in a different thread or if it's ok I posted them all together!

    Ideally, it's better to ask unrelated questions in their own separate threads, so that folks who can help with one question but not the others are still encouraged to answer, and it's easier to keep all the questions and answers straight. It also improves search results when others look up a related issue in the future.

    I'll answer your questions separately below to keep things a little more organized. :-)

  3. bpd-graphics
    Member
    Posted 9 months ago #

    Hi Kathryn,

    I didn't want to be a post hog and post a whole bunch of them, but yes I do understand why that would be more organized!

    Thanks for your help and you patience!
    Beth

  4. 4. I need to add a form to sign up for a newsletter. Any suggestions to an easy way to get that?

    The first step would be to sign up for one of the many email marketing services available, such as Aweber, MailChimp, Constant Contact, etc.

    Then, you can either embed your signup form into a page, post, widget, or template file, or use a plugin to pull in the form through a shortcode or another technique. Which plugin you choose will depend on which email marketing company you go with; there are relevant signup-form plugins for all the major services.

    One thing to note is that this isn't theme-dependent, the same steps would apply no matter which theme you choose.

  5. 3. I need to create a different page for the link "neighborhoods" which
    instead of showing posts, will show photo buttons of different
    neighborhoods (in brooklyn,ny) to choose from. Would this be a static page? I know I need to do this as a template page, just a little stuck on what I would need to put in the template page. (it should still have the sidebar nav..

    If it's just a page with photos in it, could it just be a regular page? I'm not sure why you'd need to create a new template for it. Could you explain a little more what would make it different from a regular page?

  6. bpd-graphics
    Member
    Posted 9 months ago #

    3. Is there a way I can upload a photo on here? It's hard to explain without, but the photos will be like categories (not posts) to bring you to other pages (i.e. - park slope, Williamsburg, Bayridge,etc).

    4. Thank you, I believe she has constant contact for her newsletters so I will do some research then to see how to add this to the WordPress blog. Thanks!

  7. esmi
    Forum Moderator
    Posted 9 months ago #

    Is there a way I can upload a photo on here?

    No. You will need to use an online resource like http://snag.gy/ and post the image url here.

  8. bpd-graphics
    Member
    Posted 9 months ago #

    I have uploaded the photo onto find neighborhoods link of the site. http://www.bethparrattdesign.com/past-emails/neighborhoods/
    Originally I was going to try to do a separate slider similar to shown in the top of the image but instead, have felt that it would be easier to turn the other photo buttons into the neighborhoods.

    So the question is, is this possible? It seemed like something where I would do a page template but I'm not sure and have never started a blank new page template before.

    Thanks!

  9. 1. how can I add the searchbar to my main navigation (instead of in the sidebar widget).

    This theme isn't designed to have the search bar up in the menu area. You could certainly experiment by editing header.php in your child theme.

    To point you in the right direction, start by adding a new element after the closing </nav> tag in line 73, something like:

    <div id="newsearch"><?php get_search_form(); ?></div>

    Add some CSS to "newsearch" in your CSS, like:

    display: inline;
    float: right;

    That should get you started. :-)

  10. bpd-graphics
    Member
    Posted 9 months ago #

    Hi Kathryn, thanks
    re- 1 searchbar- I was able to add it by playing with the header.php, but I'll check what I did against your suggestions to improve it. Because what I did, I was able to get it to appear but it's below the main nav menu and I was stuck on how to style it in my CSS to move it. I will relook and try your suggestions. Thank you!

  11. 2. I created the columns for my footer. How can I clean it up so they are centered on the far left and far right, and also so that the content in there is in each specific column instead of just running. Should I instead do this as col 1 col 2 col 3? Right now I copied some other code:

    Your footer columns look great and are all the same width. Did you get this one sorted out?

    https://cloudup.com/czEVguwCASh

    p.s. When you post any code here in the forums, please use backticks or the toolbar code buttons so it's clearer, and also to be sure it doesn't break the page layout. I've edited your original post above.

  12. Originally I was going to try to do a separate slider similar to shown in the top of the image but instead, have felt that it would be easier to turn the other photo buttons into the neighborhoods.

    If you don't want a slider, you can just add a grid within the editor for that page, with your linked images included in each box in the grid.

    There are a few different ways to make grids within the editor, including a column shortcode plugin or manually coding the grid in HTML/Text mode.

  13. bpd-graphics
    Member
    Posted 9 months ago #

    Hi Kathryn,
    you're right this is a bit confusing, so thanks so much with sticking with it! :)

    2. Footer:
    Ok, regarding the columns... I guess what i need to do is make the columns align "center" instead of to the left for each column. There just seems to be some quirks to it. LIke for example, these items as you see them, do not always stay in the columns, so sometimes I'll open a browser and "facebook" ends up in the middle column and that column gets pushed up (not aligned at the top across the 3 columns).

    3. Page:
    Thank you. Are you saying the only/best way to do this is in wordpress settings? Or is there a way to create this somehow in my child theme files?
    And if I did want to do the slider, what suggestions would you have for that?

    Thanks again!

  14. bpd-graphics
    Member
    Posted 9 months ago #

    1. searchbar - it's now sitting below the main nav menu line, how can I get it within that menu using css? Thanks again!

  15. 1. searchbar - it's now sitting below the main nav menu line, how can I get it within that menu using css?

    You're getting close. :-)

    It doesn't look like you wrapped your search-form template tag in a new div tag with its own CSS, like I showed you above. Want to give it another try?

    If you still have trouble, could you please paste the contents of your header.php in a Pastebin and link to it here so I can take a look. Thanks.

  16. 2. Footer:
    Ok, regarding the columns... I guess what i need to do is make the columns align "center" instead of to the left for each column.

    You could certainly try that and see how you like the look of it:

    #footer-col {
        text-align: center;
    }

    There just seems to be some quirks to it. LIke for example, these items as you see them, do not always stay in the columns, so sometimes I'll open a browser and "facebook" ends up in the middle column and that column gets pushed up (not aligned at the top across the 3 columns).

    Maybe you could take a screenshot of this the next time it happens, and that might help me understand what might be going on.

  17. And if I did want to do the slider, what suggestions would you have for that?

    The simplest way would be to choose one of the many slider plugins available in the repository. You could try experimenting with a few until you find one that you like the best.

  18. 3. Page:
    Thank you. Are you saying the only/best way to do this is in wordpress settings? Or is there a way to create this somehow in my child theme files?

    Neither. :-)

    Just add the content to your page through your WordPress dashboard, under Pages. Select the page in question, and make your edits in the page editor, the same way you would with any other post or page.

    Based on what you seem to want, I don't think you need to create a new template.

    If I'm still not clear on what you're trying to do, let me know. :-)

  19. bpd-graphics
    Member
    Posted 9 months ago #

    1. Sidebar - what I have already is the code from the searchform.php placed inside the header.php after line 73 and I added the css you suggested above. Instead of "newsearch" I have it as "searchform" same as what's in the searchform.php. I tried your way as well and it seemed to not make a difference with either code. It still resides just below the main menu navigation bar. Do I need to put the css somewhere along with one of the navigation styles?

    2. Footer - here's a link to a screenshot:
    http://testpalanca.bethparrattdesign.com/footer/

    3. Page - Slider- If I add the slider would there be a way for me to add it only onto that page? I would like to keep the main page the way it is.
    - Page - Photo Grid- I will look into this then through the page editor. It just seemed like something that would be more part of the design if it was in the child theme vs being set up in the wordpress dashboard. But I will definitely check it out!!

  20. bpd-graphics
    Member
    Posted 9 months ago #

    2. Footer - maybe this is happening when I look at the site using Chrome. I just went into my dashboard and add a sub page under Neighborhoods and it did something weird there. After I went back to the main page, the layout of the sidebar was out of wack too. Are there certain settings I need to call out for Chrome to recognize properly? Thanks again!

  21. bpd-graphics
    Member
    Posted 8 months ago #

    Hi Kathryn,

    I've update the code you suggested for the 1-Searchbar but I'm still having trouble styling it so it goes within the menu navigation bar. Any chance you have further suggestions?

    Still stuck on my footer.

    Thanks again for any help!

  22. Hi there, for the search bar issue, would you mind doing what I asked earlier and paste the contents of your header.php file in a Pastebin and link to it here so I can take a look?

    Looking at the generated source code in your browser, I think you're missing a closing </div> tag.

    Original:

    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav>
    </div>

    I think you may have omitted the closing div tag when you added the code I provided above, but I can tell you for sure when you link to your Pastebin.

  23. For your new slider questions, would you mind starting a new thread, since this one is getting extremely long? You can probably see now why separate threads for each question is a good idea. ;-) Thanks.

  24. For your footer, I see what you mean in Chrome. When you view the browser source, you can see some syntax errors that should be fixed:

    <div id="footer-col">
    	<p><ul>
    	<li><a href="http://bethparrattdesign.com">about</a></li>
    	<li>town</li>
    	<li>listings</li>
    	<li>site map</li>
    	<li>unsubscribe</li>
    	<br>
    	<li>neighborhoods</li>
    	<li>to-do</li>
    	<li>see</li>
    	<li>eat</li>
    	<li>listings</li>
    	<br>
    	<li>facebook</li>
    	<li>twitter</li>
    	<li>pinterest</li>
    	<li>instagram</li>
    	<li>subscribe</li></p>
    	</div>

    Remove the paragraph tags before the first item and after the last list items.

    Remove the line breaks within your list.

    You shouldn't use line breaks to create columns, that isn't a reliable or semantic method, as you can see. :-)

    Try using divs instead.

    <div class="footerlist">list 1</div>
    <div class="footerlist">list 2</div>
    <div class="footerlist">list 3</div>

    Use CSS to give your footerlist class a width and float them side-by-side.

    There are some other HTML syntax errors I see that should be fixed - try running your site through an HTML validator to catch and fix them, or view the source in Firefox and the errors will be in red.

  25. bpd-graphics
    Member
    Posted 8 months ago #

    Hi Kathryn,

    Thanks regarding the footer, I will look into that. And yes, if I continue having questions regarding the slider I will post in a separate thread.

    Regarding the searchbar. Here's the link to the code: http://pastebin.com/w1jYBHZG

    Thanks again!

  26. bpd-graphics
    Member
    Posted 8 months ago #

    Hi Kathryn,

    I updated the footer.php with this code: http://pastebin.com/y8JhjqQm is that right, or is there code in the beginning that should be deleted? I have not uploaded it yet because I wanted to check this before I add to my css.

    Thanks!

  27. Regarding the searchbar. Here's the link to the code:

    Thanks. As I suspected, you're missing a </div> tag between lines 74 and 75. You can see it if you compare your modified file to the original, unedited, header.php in the theme.

    Before:

    <div id="newsearch"><?php get_search_form(); ?></div>
    </header><!-- #masthead .site-header -->

    After:

    <div id="newsearch"><?php get_search_form(); ?></div>
    </div> /* missing original closing div tag here */
    </header><!-- #masthead .site-header -->
  28. I updated the footer.php with this code: http://pastebin.com/y8JhjqQm is that right, or is there code in the beginning that should be deleted? I have not uploaded it yet because I wanted to check this before I add to my css.

    Not quite. :-) Each of your three lists needs to go inside its containing div. For example:

    <div class="footerlist">
            <ul>
            <li><a href="http://bethparrattdesign.com">about</a></li>
            <li>town</li>
            <li>listings</li>
            <li>site map</li>
            <li>unsubscribe</li>
            </ul>
    </div>
  29. bpd-graphics
    Member
    Posted 8 months ago #

    Thanks! I've updated the header.php. But, the searchbar is still in the same spot, so I'm guessing something further is needed in the css ... any suggestions?

    Thanks for the clarification on the footer divs.... But do I make each div the same class (footerlist) or is it better to make them all separate, such as footerlist-1, footerlist-2, or something like that? Because what I have in my css right now is for an id tag of footer-col which is now in my footer.php right before the footerlists.

    This is the css I have in there now for it, which I actually grabbed/modified from something else:

    `#footer-col {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    margin-left: 4em;
    margin-top: .2em;
    margin-bottom: .2em;
    border-top: 1px dotted #b3b3b3;
    clear: both;
    margin: 1.5714285714em 0 0 0;
    }
    #footer-col li{
    list-style-type: none;
    }'

    So I'm wondering if I have all the lists under class - footerlist, where the style should come in. Sorry I'm really confused now on this. Perhaps this should now start a new thread as well.

    Thanks again!

  30. Thanks! I've updated the header.php. But, the searchbar is still in the same spot, so I'm guessing something further is needed in the css ... any suggestions?

    I double-checked the code I gave you earlier on my test site to make sure it works, and you can see what it looks like here:

    https://cloudup.com/c1lmBKrLaAK

    Remember earlier when I mentioned that you have some basic HTML errors that should be fixed? I still see some of them, and they could be affecting the layout. Did you do what I suggested here:

    There are some other HTML syntax errors I see that should be fixed - try running your site through an HTML validator to catch and fix them, or view the source in Firefox and the errors will be in red.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bethparrattdesign.com%2F

    In particular, any unbalanced tags (opened somewhere but not closed, or closed somewhere but never opened) can impact the layout. For example:

    End tag div seen, but there were open elements.
    
    Unclosed element footer.

    To troubleshoot these sorts of errors, you can try turning on "View Source" in the validator, to more clearly see which line has the problem:

    https://cloudup.com/coRgkXgVIuF

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.