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.

1 Attachment

Type: Pre-Sale
Status: In Progress
grafoman
View Replies:
grafoman replied on at Permalink Reply
grafoman
More explanation: I want the image above the arrow move with the arrow when resizing my web browser screen.

Working at :http://grafomantestsite2.be/index.php...
jordif replied on at Permalink Reply
jordif
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:

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
grafoman replied on at Permalink Reply
grafoman
And like always, your support is excellent!

concrete5 Environment Information

Unable to load

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.