Appearance like in demo – how to?

Homepage › Community Forums › Epik Theme Support › Appearance like in demo – how to?

Tagged: , , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 25, 2014 at 10:37 am #10192
    Ectophob
    Customer

      Hi, I’m actually pretty new to all this and I bought that theme because how it looked in the demo; I thought I will have my theme like this and only would have to change images and text.

      So after installing I found it something I probably no would have bought, I understand that one wants to sell his product but then I [as author] would at least have included an decent walk-through for my buyers how to configure the theme as shown in the demo for which I have spent [including the Gravity forms ad-don] almost 140 bucks – this is a lot of money here where I live.

      I’m sure that I’m not the first buyer who is complaining about this in a thread but the forum seems to lack of a search function so I can’t tell.

      Maybe one of you can walk me through that configuration process that the theme looks finally as expected and shown in the demo. Please?!

      http://www.expat2expat.org

      January 25, 2014 at 11:33 am #10193
      Ectophob
      Customer

        So I found now the search function here and a similar thread where is said:
        “If you take a look in your Read Me file you’ll see that the documentation/tutorials and code snippets can be found at the top of the Epik forum – https://appfinite.com/forum/epik-theme-support/ They are the highlighted (yellow) sticky posts at the very top of the forum. That is exactly how you can setup the homepage to look just like the demo, if that’s what you want.”

        Well, in the Readme.text the templates features are generally explained, nothing else than this. The Sticky posts are nice, best part is the location guide – however there are code snippets and only god knows where and how to use them or put them in.

        January 25, 2014 at 12:30 pm #10196
        Eric
        Customer

          I’ve never seen anyone have an issue with the code snippets, it’s much easier than you think. If you’re new to WordPress all you have to do is add those code snippets inside a “Text” widget (drag a text widget into one of the Widget areas first)…..then all you have to do is replace the text or image with your own text or images, and that’s it. It may look difficult at first if you’re not a coder, but it’s only basic HTML so you shouldn’t have a problem with it.

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

          January 25, 2014 at 12:35 pm #10197
          Ectophob
          Customer

            So, analyzing the demo and comparing it with what is shown at the widget locator found at https://appfinite.com/topic/epik-widgets-guide/ the Epik demo-structure and plan to work on is the following [for the frontpage]:
            1. Header with menu’s.
            2. Slider widget with images [1,140px × 400px]
            3. Welcome widget with subsequent [Welcome feature widgets #1-#3].
            4. Home feature 9 with subsequent [Home feature widgets #10-#13].
            [Followed by a couple of Home features of same width but different heights].
            5. Home feature with text widget containing: image left [400px × 580px] – text right.
            6. Home feature with text widget containing: text left – image right [605px × 320px (scaled to 547px × 289px)].
            7. Home feature with text widget containing: image left [689px × 450px (scaled to 547px × 357px)] – text right.
            8. Home feature with text widget containing: text left – image right [620px × 500px (scaled to 547px × 441px)].
            9. Home feature with text widget containing: image left [640px × 450px (scaled to 547px × 385px)] – text right.
            10. Home feature [small] with image centered [1,152px × 80px (scaled to 1,140px × 79px)], that is the grey logo section.
            11. Home feature with 4 images centered all [276px × 318px (scaled to 272px × 313px)] – text under. WTf is a div-wrap and how to put it in?? o.O
            12. Home feature 9 with subsequent [Home feature widgets #10-#13]. This is the payment plan. It seems like a table with text inside and under the table. Purchase button.
            13. Footer with subsequent Footer widgets #1-#3.

            I found the following Addons are needed in order to get this theme running as shown in the demo:
            1. Gravity forms [ I paid 39$ for 1 year subscription – I feel there are other option for less or no money in the wild]
            2. Genesis Responsive Slider
            3. Regenerate Thumbnails
            4. Simple Social Icons

            Now we can go on configuring step by step the frontpage and I’m currently fighting with #2 from above list: The Slider
            Have a look at: http://www.expat2expat.org/
            Hillarious, isn’t it?!
            Can someone tell me from where this thing picks the images which are shown and how to convince the slider to show what I want AND how to change the slider windows height?!
            Many thanks in advance.

            January 25, 2014 at 1:04 pm #10199
            Eric
            Customer

              Did you add a featured image to any of those posts that you’re adding? Here is a tutorial to get it setup – https://appfinite.com/tutorials/how-to-add-the-genesis-responsive-slider/ and here is a video which goes into a bit more detail if you need – http://www.youtube.com/watch?v=j4e7UG1LzLk

              For all other questions, you’ll need to create separate posts for each issue. They have a one question/topic per thread policy as you can see here – https://appfinite.com/topic/forum-rules/ (please read if you’re new here) which helps keep things organized…and it makes it easier for us to search for similar topics/solutions.

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

              January 25, 2014 at 2:27 pm #10201
              Ectophob
              Customer

                Thank you Eric for your reply. I know the forum rules. The thread or issue here is how to configure the template so that it looks exactly like in the demo since I bought it because of this appearance. Therefore I don’t feel that it’s necessary to open a new thread for each issue arising out of this “basic-issue”. I would say I work through it here entirely in this sole thread and let ask Wes once finished to make it Sticky; I could imagine that 50% of all support questions will become obsolete then. How cool is this?

                I have now made a general layout following my list and the widget locator, that one gets an idea where to start first, I have it uploaded on my Dropbox:
                http://goo.gl/gtyZBQ

                I will now work on the Slider – tutorial on Youtube and report back.

                January 25, 2014 at 7:27 pm #10202
                Ectophob
                Customer

                  Well, that’s fabulous, I have this Slider running – still not perfect but I understand now how this is working; many thanks Eric for your link to the Genesis Responsive Slider Video.
                  You can see the result here: http://www.expat2expat.org/
                  Now I would like to know how to manipulate the images in such a way that all have the same size and bring the text under the images.
                  Do you know?

                  January 25, 2014 at 9:23 pm #10203
                  Eric
                  Customer

                    No worries, I always post that link for new users.

                    For the slider images, most Genesis users (and WordPress users) use a plugin called Regenerate Thumbnails – http://wordpress.org/plugins/regenerate-thumbnails/ once you run this plugin it will automatically adjust your images to the size you have specified in the settings. Some images won’t be the same size if they are too wide or too tall. WordPress handles the sizes, so if you want your images to all be the same size, try and upload images that are all as close to size as possible, and the regenerate thumbnails plugin should handle the rest.

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

                    January 26, 2014 at 12:27 pm #10205
                    Ectophob
                    Customer

                      Good morning, yes I know this Plugin and have this already installed; I will run it once I have replaced the images with these I actually want to have shown in this page. The images I use now are only for demo purposes.

                      However, now I’m working on the “Welcome Features #1 – #3.
                      I have found a sticky thread from Wes, where is said how to put in text and images at http://goo.gl/qY3jQL

                      That’s very nice , but how to change font and background color. I found a thread where you explain it at http://goo.gl/6oV12Z BUT unfortunate I can’t find this portion of code which I believe has to be in the style.css file. I feel your answer refers to an previous version of Epik.
                      The “Welcome” section in the current styles.css version starts at line #1229, have a look at the screenshot of the code snippet http://goo.gl/KlSpg3
                      Do I have to make the changes for color there?

                      January 27, 2014 at 11:13 am #10213
                      Eric
                      Customer

                        Yeah that was probably an older version of Epik they were using, and they probably have other code in their css which would make those elements appear on a completely different line than other users. For your site, you would actually need to edit .welcome instead of #welcome (they’re using classes instead of ID’s now). Currently it is located around line 1232 in your css – 

                        .welcome {
background: #303236;
clear: both;
color: #ccc;
margin: 0 auto;
text-align: center;
}

                        You can make your edits from there.

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

                        January 27, 2014 at 2:13 pm #10223
                        Ectophob
                        Customer

                          Oops sorry haven’t seen your reply, forgot to refresh my browser, many thanks Eric!
                          Do you also know how to bring in there images?

                          I found a thread where was said to put in the following code:
                          image title
                          <h4>Mobile Responsive Design</h4>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

                          If I open the Welcome Feature #1 Tab in Appearance>>Widgets>>Welcome Feature #1 and put the code in [of course with the proper link adjustments] only the Text i shown buy not the image.
                          Have i missed something or does this code is wrong?

                          January 27, 2014 at 2:36 pm #10224
                          Ectophob
                          Customer

                            Have missed something, I used links to local-host since I run a clone of this site, so after correcting them all is fine 🙂
                            I’m writing down all my findings and step by step what I have done and I have to say “wow” – web design is a hard and time consuming job.
                            Once I finished my website I will put it (the tutorial) online with a few nice pics and videos.

                            Now, going to work on Home Feature #1 (Left) and Home Feature #2 (Right):
                            How to format it properly, that I end up with 4 icons with text?

                            January 27, 2014 at 5:45 pm #10225
                            Ectophob
                            Customer

                              Well, this is the result so far and I don’t know what I’m doing wrong
                              http://imgur.com/QkrmfhT

                              For the Home Feature #1 (Left) I use the following code:
                              https://gist.github.com/anonymous/8658780

                              For the Home Feature #2 (Right) I use actually the same.

                              Any idea how to get this working?

                              January 27, 2014 at 10:06 pm #10231
                              Eric
                              Customer

                                This is really all you need to get it working – https://appfinite.com/topic/home-feature-1-and-2-code-for-the-epik-theme/ and that is coming from the tutorials at the top of the Epik forum – https://appfinite.com/forum/epik-theme-support/

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

                                January 28, 2014 at 12:48 am #10235
                                Ectophob
                                Customer

                                  Hi Eric, thank you for your reply. I did like Wes showed in the tutorial and it does not work for me or better said – not as expected; have a look here, please:
                                  http://imgur.com/uJHNF9K

                                  It must be possible to format the text with images, so that we have on both sides [Home Feature #1 Left / Home Feature #2 Right] the same optical appearance. I tried to achieve this somehow by copying the code from the demo into my theme but that ended up disastrous.

                                  January 28, 2014 at 1:36 pm #10243
                                  Eric
                                  Customer

                                    Seems to be working fine when I check your site.

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

                                    January 28, 2014 at 2:20 pm #10248
                                    Ectophob
                                    Customer

                                      /Update:
                                      I even learned that Widgets can be stacked; that was new to me 🙂
                                      A Widget can be stacked in the way that we drag and drop a second Text-widget from the left side into the Home Feature Box on the right side.
                                      Now, it looks like expected.

                                      That enables me to work finally on the Home Feature #3, where I would like to put in three images with floating text and buttons under.
                                      Haven’t found a thread so far.
                                      How to scale the images to the size I want and how to put a button in?

                                    • Author
                                      Posts
                                    Viewing 17 posts - 1 through 17 (of 17 total)
                                    • You must be logged in to reply to this topic.