changing place of the navigation buttons

in the theme-folder there’s 3 files. edit supersized.shutter.css

Hi Jenstho.

Thanks for that, unfortunately it doesn’t answer my question. I know what css to edit and where to edit it, the problem is that the actual html code is not ideal.

The images are stored in a container and the navigation is stored outside of that container.

Example:

<a class="slideshow-previous">prev</a>
<a class="slideshow-next">next</a>
<div class="slideshow">
  <ul>
    <li><img>picture 1</img></li>
    <li><img>picture 2</img></li>
  </ul>
</div>

Now because of that, I can never position the navigation items relative to the images.

I need to know where to edit the actual mark-up of the code so I can move the navigation elements inside the container of the slideshow.

Example (this is what I would like ideally)

<div class="slideshow-container">
  <ul class="slideshow-images">
    <li><img>picture 1</img></li>
    <li><img>picture 2</img></li>
  </ul>
  <ul class="slideshow-navigation">
    <li class="slideshow-previous"><a>prev</a></li>
    <li class="slideshow-next"><a>next</a></li>
  </ul>
</div>

I have found the file to edit it seems: WPSupersized.php (wp-content/plugins/wp-supersized/includes) and it start from line 412. But i dont know how to move that all, or at least put a wrapping div around all of it including the image slider below it?

https://www.ads-software.com/support/topic/background-of-certain-div-instead-of-whole-body?replies=2#post-3738266

edit: just realized this doesn’t answer your question completely.

This did bring me a little bit closer though and now I have come up with a solution, so thatnks for that. What I have done is as follows (I know it may not be the best or most elegant solution but it does the trick for me so far.)
In WPSupersized.php (i have the latest version of the plugin and these are the line numbers that correspond to mine – all line numbers are the original line numbers (before adding anything))

new line after line 387

<div id="navWrap1"> <!-- add a wrapping div around all nav items -->

replace line 389 ( <div id=”prevthumb”></div> <div id=”nextthumb”></div> )

<div class="thumbWrap1"> <!-- wrap the thumbs nav -->
	<div id="prevthumb"></div> <div id="nextthumb"></div>
</div>

replace line 420 (</div> <?php // closing the controls-wrapper and controls)

</div> </div> <?php // closing the controls-wrapper and controls and NavWrap1

replace line 423 (else { )

else { ?> <div id="navWrap2"> <?php //close php, add a wrapping div around all nav items and reopen php again

replace line 428 – 430

<!--Thumbnail Navigation-->
<div class="thumbWrap2"> <!-- wrap the thumbs nav -->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>
</div>

replace line 436 – 438

<!-- Arrow Navigation -->
<div class="arrowNavWrap"> <!-- wrap the arrow nav -->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>
</div>

replace line 511 ( } )

}?> </div> <?php //close php, close navWrap2 and reopen php again

then add this script snippet to the script in the top of the document:
new line after line 369

var wrapper = $('<div></div>').addClass('supersizedWrapped');
var parent = $('#navWrap2').parent();
wrapper.append($('#navWrap2, #supersized')).appendTo(parent);

Now the wrapping div (navWrap2) can be set to position: absolute and set .supersizedWrapped to position: relative and you can then change the size of the slideshow and have all the nav stay relative to the .supersizedWrapped container.

Just be aware that the options i set in supersized only picks up the navWrap2 div so thats whati add in the script to wrap with the default #supersized (slides) div.

Hope this helps someone.