Aligning the arrow to the left?
Permalink Browser Info Environment
Hi,
I want to align the arrow button to the left side, but it's not embedded in the container so it's giving me problems to properly align with the content.
Also, i want to add an image above the arrow (see screenshot). The text "grafoman zorgt voor ... " is vertically aligned in the middle.
Can you help me achieve this?
Thanks in advance.
I want to align the arrow button to the left side, but it's not embedded in the container so it's giving me problems to properly align with the content.
Also, i want to add an image above the arrow (see screenshot). The text "grafoman zorgt voor ... " is vertically aligned in the middle.
Can you help me achieve this?
Thanks in advance.
Type: | Pre-Sale |
---|---|
Status: | In Progress |
Hi,
yes, the bottom arrow is added dynamically, so you'll need to tweak the main js file.
Open the main.js file and find lines 57-64:
Change them to:
(You see, I'm just wrapping the bottom arrow in a container and adding an image, you'll just need to chnage the url of the image)
You'll also need to add the following CSS to align the arrow to the left:
By the way, it's always nice to see how you use the theme, beautiful design :)
Jordi
yes, the bottom arrow is added dynamically, so you'll need to tweak the main js file.
Open the main.js file and find lines 57-64:
if (Modernizr.inlinesvg) { slide.append('<a class="bottom-arrow '+arrowStyle+'" href="#'+next+'">'+ '<span class="icon-wrap">'+ '<svg class="icon" width="100" height="100" viewBox="0 0 100 100"><use xlink:href="#arrow-left-5"></svg>'+ '<svg class="icon" width="100" height="100" viewBox="0 0 100 100"><use xlink:href="#arrow-left-5"></svg>'+ '</span>'+ '</a>'); }
Change them to:
if (Modernizr.inlinesvg) { slide.append('<div class="container">'+ '<a class="bottom-arrow '+arrowStyle+'" href="#'+next+'">'+ '<img src="http://grafomantestsite2.be/application/files/4614/3591/6546/icoon.png" alt="icoon" width="50" height="50">'+ '<span class="icon-wrap">'+ '<svg class="icon" width="100" height="100" viewBox="0 0 100 100"><use xlink:href="#arrow-left-5"></svg>'+ '<svg class="icon" width="100" height="100" viewBox="0 0 100 100"><use xlink:href="#arrow-left-5"></svg>'+ '</span>'+ '</a>'+ '</div>'); }
(You see, I'm just wrapping the bottom arrow in a container and adding an image, you'll just need to chnage the url of the image)
You'll also need to add the following CSS to align the arrow to the left:
.bottom-arrow { left: auto; margin-left: 0; }
By the way, it's always nice to see how you use the theme, beautiful design :)
Jordi
And like always, your support is excellent!
Working at :http://grafomantestsite2.be/index.php...