How do you get the images to display at the top like the demo?

[SWcoins.com]

Ok, I have been trying everything.... clearing cache, turning cache off, etc. But no matter what I cannot get the slider to be on the same level as the two smaller stacked images like the demo shows. I have tried the theme configuator and tried to hook it to top, home, left, right, etc. In the Module > Position I have tried to have the slider hooked into all different positions, I have moved the theme configuator up and down..... I get a lot of messed up looks but nothing close to the demo. 

 

In one test I had the image hooked to home with the theme configuator above the popular selling block yet the images showed down by the footer and were made very small... despite the face that the footer hook had neither the home slider and/or theme configuator hooked to it.

 

Can someone please make a step by step guide how to set up the theme configuator and home slider to get the our custom images to appear like the demo? What sizes are needed? What spot in Module > Positions do the various modules need to be in? Why isn't this working? 

 

For what it is worth my site is: www.swcoins.com (I have both mods turned off as this is a live site and with them turned on I get all kinds of messed up looks). 

 

Much thanks!

[SWcoins.com]

Ok I think I have it figured out.... As you can see on my site (www.swcoins.com) I now have customized images in the same layout and style as the demo version. 

 

This is how I got there.... note, the "I" pronoun... This worked for me. I auto upgraded from 1.5.x to 1.6... I have not done a lot of customizing to the backend code.... but this may work for you, may not, but this is how I did it and it seems to work so good luck! 

 

First off before you start disable all cache systems smarty, filesystem, etc. Just turn off all cache. 

• Create your images.
  • For the right side images I found that 381x119 is an optimal size. 
• Make sure the right column is turned on:
  • Preferences > Themes > Edit
    • index right checked
      • My set up also shows the meta tag line as being an option make sure that is checked too... Don't know why... but whatever... 
    •  
• Modules > Theme configurator
  • Hook the two images you will use to the left hand side to the "top" hook.
  • Make sure you define and set the image size... yes even though your images are 381x119 you still need to enter that in apparently. 
  • Give your images a URL to go to. 
  • If you want some text to show at the bottom of each image write it in the HTML block... Note you cannot actually use HTML in this block it will print out the html code.
• Modules > Image Slider for your homepage
  • Max width: 1170
  • Add the images you wish to slide next to the two stacked right hand images. 
• Modules > Positions (I am not sure if the actual positions matter or how much they matter but this is what I have it set as and it seems to work for me)
  • displayHeader
    • Make Image home slider for your homepage the last element
    • Theme configurator should be above the image home slider but below the Products Category. 
    • On my set up (from bottom to top it goes like this)
      • Image Home slider...
      • Facebook Block....
      • Product payment logo block....
      • Theme Configurator
      • Product Category
      • etc....
  • displayHome
    • Set Theme Configurator as the last element
    • The only other hook I have is the Facebook Block above the Theme Configurator
  • displayLeftColumn
    • For this set up it doesn't matter.
  • displayRightColumn
    • The only block I have is the Theme Configurator
    • You can have other blocks but the Theme Configurator MUST be the first item.
  • displayTop
    • I have no good reason for this but when I unhooked the Theme Configurator from the displayTop hook it was the only way to get everything to show up right and not double up on some images. 

Bonus material:
You will see on my site that the text below the right hand images are nicely aligned with the start of the graphics... If your graphics contain whitespace around them like mine do then these text lines look funny... here is how to fix that:
 
1. Open the file /yourroot/modules/themeconfgurator/templates/hooks/hook.tpl
 
around line 42 you will find this:

<div class="item-html">......etc"

change to

<div class="item-html" style="margin-left:100px;">

Where 100px = how far you want to indent... your value maybe different depending on your images, but this seems to work for me. Also I know this is not ideal coding practice.... For the life of me I could not find where item-html is defined... but anyhow when an update comes out to fix all these issues it will probably be overwritten anyhow. So for now I think most of us can agree it is an so-so hack.

 

Another freebie... How do you make the next and back buttons look so cool with red????

 

1. Open /yourroot/themes/default-bootstrap/css/modules/homeslider/homeslider.css

 

Around line 122 you will find:

#homepage-slider .bx-wrapper .bx-prev {right: 60px; }

change it to:

#homepage-slider .bx-wrapper .bx-prev {background-color:red;right: 60px; }

Then around line 127

#homepage-slider .bx-wrapper .bx-next {right: 10px; }

change to

#homepage-slider .bx-wrapper .bx-next {background-color:red;right: 10px; }

Again, not ideal but it gets the job done for now and I think it looks pretty cool especially for a light color background.

 

Well, thats all folks hope this has helped some of you. Oh, and BTW feel free to buy a coin or two. lol. 

Edited March 26, 2014 by swcoins (see edit history)