Several gk-special boxes over one background

Hi,
I'm using Steakhouse theme and would like to adjust the template a little bit and hope to get help here, if my whishes aren't a big deal, I don't know.
So I want to use the gk-special class, but with two changes. I want to have two or more boxes which are seperated by a small free space and are scrollable over a constant parallax background.
And I would like to change the style, such that the picture is on the rigth third in every second box.

Is this possible? I couldn't find anything by my search, but I am very new to Wordpress and Gavick, as I'm not very familiar with html, css,..., sorry So I would be very glad if someone could help me. Thank you very much.

Martin

Hi,

You modifications will be difficult if you dont' have basic html and css knowledge. Please check i.e. this article aboud scrollable containers: http://stackoverflow.com/questions/9811 ... -container
http://www.htmlite.com/faq015.php

I don't understand the second part of your issue (the picture should be on the rigth third in every second box), could you send a sample screenshot and URL to your website?

Hi,
thank you for your answer. A little bit of basic knowledge is available and I will try. But could you help me where to start? Do I have to add this functionality completely by my own? I hoped to get this feature by adjusting the gk-special class?

Oh I'm sorry for my second question, I did not try it with two single pages, I just tried to include two boxes in one page, which failed up to now SO if the position of the picture already changes it fulfills my needs perfectly

Thank you,
Martin

Hi,

I'll try to help but need to see your website (you can post the URL here or via private mesage) and if you can, please do a quick screenshot and mark the modifications which you want to add.

Hi,
I'll send you a link in a minute. For a quick view I uploaded a picture of the part I want to change. You can see a fixed parallax background image and a first upper box with a picture on the left side and text on the right. And then as you scroll the background image shall stay and a second box shall scroll up from the bottom while the first one scrolls out at the upper screen corner. You can see the second box at the lower part of the picture. I hope that describes my problem a little bit more precise.

TwoBoxes.jpg

Thank you again for your help,
Martin

It's the default content of the special page and the second block from your screenshot:

Code: Select all

<div class="bigtitle gk-special">
<div class="figure" data-scroll-reveal="enter left over .5s">
<div><img src="http://localhost:8888/1_14/steakhouse/wp-content/uploads/2014/07/banner_special.jpg" alt="Summer Grill" /></div>
<div class="figcaption" data-scroll-reveal="enter bottom over .5s after .5s">
<h3><span>Summer</span> Grill</h3>
<small>Starting from <strong>$19.99</strong></small>

</div>
</div>
<div class="gk-special-content" data-scroll-reveal="enter right over .5s">
<h3 class="header"><span>Special</span>
<small>Check out our offers</small></h3>
<ul class="gk-special-menu">
   <li data-scroll-reveal="enter bottom over .25s after .5s">
<h4>New York Strip Steak</h4>
<strong>$28.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .8s">
<h4>Black Angus Steak</h4>
<strong>$18.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .6s">
<h4>Porterhouse Steak</h4>
<strong>$26.49</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .9s">
<h4>Rib Eye Steak</h4>
<strong>$36.49</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .7s">
<h4>Salisbury Steak</h4>
<strong>$28.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after 1s">
<h4>Wellington Steak</h4>
<strong>$48.99</strong></li>
</ul>
</div>
</div>
<div><a class="gk-special-link button" href="#">More details</a></div>

<div class="bigtitle gk-special right">
<div class="figure" data-scroll-reveal="enter left over .5s">
<div><img src="http://localhost:8888/1_14/steakhouse/wp-content/uploads/2014/07/banner_special.jpg" alt="Summer Grill" /></div>
<div class="figcaption" data-scroll-reveal="enter bottom over .5s after .5s">
<h3><span>Summer</span> Grill</h3>
<small>Starting from <strong>$19.99</strong></small>

</div>
</div>
<div class="gk-special-content" data-scroll-reveal="enter right over .5s">
<h3 class="header"><span>Special</span>
<small>Check out our offers</small></h3>
<ul class="gk-special-menu">
   <li data-scroll-reveal="enter bottom over .25s after .5s">
<h4>New York Strip Steak</h4>
<strong>$28.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .8s">
<h4>Black Angus Steak</h4>
<strong>$18.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .6s">
<h4>Porterhouse Steak</h4>
<strong>$26.49</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .9s">
<h4>Rib Eye Steak</h4>
<strong>$36.49</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after .7s">
<h4>Salisbury Steak</h4>
<strong>$28.99</strong></li>
   <li data-scroll-reveal="enter bottom over .25s after 1s">
<h4>Wellington Steak</h4>
<strong>$48.99</strong></li>
</ul>
</div>
</div>
<div><a class="gk-special-link button" href="#">More details</a></div>


The second block has additional class "right":

Code: Select all

<div class="bigtitle gk-special right">


Now you have to add the following css code (into Steakhouse/css/override.css file or you can use any custom css plugin):
https://www.gavick.com/blog/adding-cust ... ress-theme

Code: Select all

.gk-special.right {
  clear: both;
  margin-top: 140px;
}
.gk-special.right .figure {
  float: right;
}

.gk-special.right .gk-special-content {
    float: left;
}


Wow,
Thank you for your help, I will try as soon as possible.