Noob Alert: Need Help Replicating "Demo Site Home Page" Look

Homepage › Community Forums › Optimal Theme Support › Noob Alert: Need Help Replicating "Demo Site Home Page" Look

Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 4, 2013 at 11:44 am #2282
    Photoshopper
    Customer

      Hi folks. I recently put up a placeholder page so I can begin to build up the content within my Genesis / Optimal web site. There are a few things I’m trying to do that I’m not sure how to go about it. Background I have moderate CSS skills and OK WordPress skills but nothing in the realm of PHP, etc. I used to do a fair amount of CSS coding but since WordPress took over my workflow the last few years I rarely practice this type of workflow. I do have Coda so that I can go into my server and look through the PHP files, etc…

      Goal 1: Create that “Home Page” look where I have the slider + category-driven menus at top, and in the middle of the page that “4 rectangle grid” of featured posts and/or pages, then the recent posts below that, then the contact and social info in the large footer area. That way, when users hit mysite.com, they don’t see a slider + list of recent posts like on a normal WP site.

      I looked at the CSS via Safari’s Dev widget and it looks like this behavior comes from the “Home Feature” classes or similar? Couple confusing points here, the first of which is there are two style sheets named “style.css” on the demo page. Are both of these built into the default install and if so how do I call the appropriate one from any CSS I add to my site?

      Second but more importantly, how do I get WordPress to avoid its default behavior of showing a list of recent posts on mysite.com? How do I get the first page to be that custom home page look? I’m afraid this is where PHP comes into play and where I’m going to struggle. When I go to create a new Page I don’t see anything in the UI that would let me “identify” said page as “the index page” or “home page” to WordPress. And if I did, would the easiest way to implement the page look itself, be to copy the HTML from the Demo and then just start adding / removing things to tweak?

      Goal 2: How do I get the slider to recognize an image in a featured post that has been resized? In testing I used an image that originally imported into WP 3.5 was 500px square. I used it in a post, then tested teh slider. The image was bigger than the slider so I went into the post again and crunched it down under 350px square. However when tested again (and a third time), the slider always uses the original (imported) size of the image, not the size I define in the post. I need to work around that somehow so I am not limited to importing only images that fit inside the slider image area.

      Goal 3: I assume I can use a tweak to the CSS style sheet to extend the colored background behind the slider, so that it’s flush with the bottom of the slider, right?

       

      Thanks in advance for any help! 🙂

      January 4, 2013 at 2:04 pm #2287
      Eric
      Customer

        If you have multiple questions or issues, you’ll need to create separate threads/topics for each one individually, (not in the same post). This helps us keep the forum easy to read and manage for everyone. Since you’re new, take a quick look at the forum rules – https://appfinite.com/topic/forum-rules/ (specifically Rule 3, 4, and 5)….and this will help us be able to answer your questions better, if we can.

        Thanks!

        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        January 4, 2013 at 3:01 pm #2290
        Photoshopper
        Customer

          Thanks Eric, and sorry about the multi-topic rule infringement. So if you want to go ahead an re-title this thread “PHP Required to Generate Static Home Page Elements”?

           

          Then I’ll create separate ones for the other topics. I did look through about 6 pages of topics to make sure these weren’t covered but its possible I missed something.

          January 4, 2013 at 3:08 pm #2292
          Photoshopper
          Customer

            (Also feel free to chop out the second two questions if you can edit. 🙂 )

            January 4, 2013 at 7:27 pm #2298
            Wes
            Moderator

              I’ll jump in here to help out 🙂

              Please correct me if I’m wrong but are you asking how to make your homepage look exactly like the demo – http://demo.appfinite.com/optimal/ ? If so, all you need to do is add widgets to any of the “home widget areas” and it will automatically show up. This theme is designed to show blog posts on the homepage if the widget areas are empty…..but as soon as you do the regular homepage will show just like the demo.

              If you’re trying to add more customizations to the homepage on top of what is already there, then yes you would have to use PHP in order to make the edits, since that’s what everything is built on.  If you need to hire a developer to make theme customizations just let me know.

              For your last question (Goal 3):  Yes you can edit the css to show a different background…you’ll want to look for “.slider-wrap” and you should see the background color and image. To remove that background image and add a color you can edit this –

              .slider-wrap {
              background-color: #F5F5F5;
              background-image: url("images/slider-bg.png");
              background-repeat: repeat-x;
              }

              The background image itself is actually a png transparent file so it covers the entire slider area, but only appears to stop half way on the demo. So once you remove that and add a color instead it will still reach the bottom like normal.

              January 4, 2013 at 8:53 pm #2302
              Photoshopper
              Customer

                I feel like a fool. Those widgets are exactly what I needed. For some reason, I was thinking you had to create a new PHP type document and put it into the PHP flow for WP to not do the “list of posts” thing. 🙂 DOH! Anyway thank you for pointing that out. So related to this, to match the demo at the bottom we’d need “Genesis User Profile” inside of “Footer 1”, is that right? And the User Profile would feature a page that has all the social widgets (like those seen in the demo). Or, is that group of features “already built” inside a different genesis widget I have to download?

                January 5, 2013 at 11:41 am #2306
                Eric
                Customer

                  No problem!

                  We’re using the Simple Social Icons plugin for the social links in the demo. You can download it here – http://www.studiopress.com/plugins/simple-social-icons

                  I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                  January 10, 2013 at 4:37 pm #2385
                  Photoshopper
                  Customer

                    Figured I’d resurrect this thread for a related question (now that I figured out the slider stuff).

                    Right now I have a menu structure that is based strictly on top level categories, as I build out the templates and test pages. When I put three categories into a basic menu (I don’t have the fancy option turned on), those categories show up on the left side, just beneath the header graphic and above the slider. How do I get them to “flush right” or right justify above the slider?

                    Right now the Top-most menu (where links to blog etc go), the header, and the category menus are all aligned and fairly close together. Thinking it might be better to try the menu out the to right side and see what that looks like.

                    January 10, 2013 at 10:09 pm #2391
                    Eric
                    Customer

                      Add the Custom Menu widget to the Header Right widget area.

                      I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                      January 11, 2013 at 1:09 pm #2402
                      Photoshopper
                      Customer

                        OK. When I do this, the menu floats way above the slider (unlike if I just add a custom menu to the Appearances > Primary Menu area). I thought maybe I had goofed something up in the style sheet, so I replaced the style sheet with a fresh download but that didn’t change it. Is this the intended behavior(s)?

                        Thanks again for all your help with these questions. 🙂

                        January 11, 2013 at 1:19 pm #2404
                        Eric
                        Customer

                          I’m confused. Do you have a link so we can see what you’re referring to?

                          I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                          January 11, 2013 at 2:02 pm #2405
                          Photoshopper
                          Customer

                            Unfortunately not. Site isn’t live / public. Looking at it again, I think yesterday I must’ve mess up the padding for one of the menu containers because now that I’ve replaced the css sheet (see other thread) the menu sits in the right place now when I place it in Header Right. I have like 4 problems I’m trying to fix at once and didn’t test this behavior again since I swapped the style sheet out late last night. Sorry about that.

                             

                            January 11, 2013 at 4:30 pm #2411
                            Eric
                            Customer

                              No problem.  Just let us know if you ever get a link setup so we can see the issue.

                              I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                            • Author
                              Posts
                            Viewing 13 posts - 1 through 13 (of 13 total)
                            • The topic ‘Noob Alert: Need Help Replicating "Demo Site Home Page" Look’ is closed to new replies.