update:
I found an example but that is Jquery and I don’t know if and how I can add jquery in the theme.
Can jQuery be combined with enfold?

Het is the example I found:

$(‘.case’).each(function() {
var link = $(this).html();
$(this).contents().wrap(‘‘);
});

case is the name of the class
source: http://jsfiddle.net/r5uWX/1/

Hi Ismael.

Thank you for the response. working with grid row elements does allow me to place images as background.
The problem with images as background is the aspect ratio (which I completely forgot).
With different sized windows the section is deformed due to incapability of images to resize both width and height without adjusting the aspect ratio. So I can not continue using an Image with text without the image deforming.

I created a new solution with an Avia Layout Element. But is there any way to link a layout element and all its content?

I now have an element containing a background image, cell padding 60px from the top and placed a special header, a textblock and an image at the bottom of the cell. I want the visitor to redirect to a different page as soon as he clicks somewhere in the cell.

Best regards,

Bart Altena

• This reply was modified 8 years, 9 months ago by alteba. Reason: minor grammar adjustments, so you guys better understand

thumbs up!!! That is exactly as I requested.
Thank you for the support

Bart

Hi Josue,

Sorry for the late response but I only noticed this shortly.
When adding your code to the functions.php then the menu also disappears when viewing the website on a mobile phone.

I changed the rights of the function.php, screenshot.png and the style.css
together with the installation of SC Theme Editor, you should be able to adjust the functions.php as per requested.

I hope you can help me out once more.
Cheers,

Bart

Hi Josue,

I don’t know if I should reopen this ticket or just place a reply.
I am puzzling all morning to get it right and it seems I fail.

What I would like to achieve:
– remove the logo (regardless whether there is a logo uploaded in the theme options or not) on both pc and mobile phone
– display the site identity
where site title with: – font:mistral; font-size:25px; font-color:white
and tagline with – font:arial; font-size:15px; font-color:red

Below is a copy of the quick CSS in the theme options. As you can see I add first the code you gave me to remove the logo
This code does not only remove the logo, but also the site identity as site title and tagline.
The code between /* =================================================== */
is code where I have been experimenting with code to be able to display the site identity

below the second /* =================================================== */
is where the rest of the code (including description and source) goes

Everything below the second /* =================================================== */ I find irrelevant but I kept it in this post in case I am wrong and it does effects the behaviour of the logo and site identity afterall.

Can you please help me?
Best regards,

Bart

/* begin quick css */

/*
verwijderd het logo en site identity
removes both site logo and site identidy
https://kriesi.at/support/topic/remove-enfold-logo-from-header/
*/
.logo {
visibility: hidden !important;
}

/* =================================================== */
.logo a {
line-height: 40px;
top: 20px;
font-size: 20px;
}

span.subtext {
color: grey;
font-size: 25px;
}

span.tagline {
position: absolute;
color: red;
}
/* =====================================================*/

/*
maakt de achtergrond van de menubalk blauw
makes the background color of the menu bar turn blue
no link available from forum
*/
.header_color .header_bg {
background-size: cover;
}
#header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
background: #3b5998;
}

/*
verwijderd de rand om plaatjes heen
removes the border from pictures containing a hyperlink
https://kriesi.at/support/topic/how-to-remove-the-image-borders/
*/
a img, a:hover img{
border: none !important;
background: transparent !important
}

.entry img{
border: none !important;
background: transparent !important
}

/*
verwijderd de pijl over een plaatje met een link
removes the overlay on a picture with link
https://kriesi.at/support/topic/how-to-disable-hover-onmouseover-on-images/
*/
.image-overlay {
display: none !important;
}

Now that is exactly why I love Enfold…You guys are the extra bonus you get when you purchase the theme. Thank you for the code!!
It does exactly what I requested.
Cheers

Bart

Hi Edfritz and Josue,

Thank you indeed for your input. I don’t have the impresion the theme streches the picture. Instead it cropes the picture to fit it in the window.

I was very frustrated that I wasn’t able to see the whole picture. Instead the slider displayed a ‘zoomed’ version.
Unfortunately I was not able to take the picture again making sure there was enough surrounding around the object. So part of the object is cropped away. I gues that comes with the ability display the website in a resizable window. Maybe it is a nice RFE (request for enhancement) to enable the webdesigner a choice to either stretch the picture or crop the picture to fit the window.

I managed to display the most important part of the picture by using ‘manage picture’ an slide the picture up.
But still not very happy with the result.

Hi Yigit,

You’re fast thanks for that.
Your solution changes indeed al pictures making them a bit bigger on onmouseover.
Unfortunately my sliders also grow bigger on a onmouseover event.
Is it possible to do the transition only when the image contains a link?
So not the sliders. and not the images without a link?

Thanks for the support

Bart

djee… you’re quick. it works!! great. thanks a lot again!

Is this plain PHP? or is there more to learn to write this kind of code?

You are one patient guy. Thank you very much as it is working
Cheers. Where can I send you the beer?

don’t tell me it was just the ‘fieldtitel’
Big thumbs up for you!!

Hi Josue,

Thanks for the quick reply. But I don’t intent to build an attachment.php. I just need to know where to put the code for ACF (advanced custom fields). In my WP media library I have a picture with default ‘caption’ and ‘description’ and also an extra field ‘titel van het werk’ (see picture 1)

picture 1

the picture is shown in http://www.ltena.com/?page_id=411 (picture 2)

picure 2

Ones you click the picture you are redirected to the attachment page. Which shows the ‘caption’ and ‘description’, but not (yet) the ‘titel van het werk’ as shown in http://www.ltena.com/?attachment_id=1006 as shown on picture 3

picture 3

I am trying to figure out where I can put the code. (I know which code to implement thanks to ACF)
Example: in theme twentyfourteen I can add the code in the image.php, but I don’t know the file in enfold which is responsible for the attachment-page. Any Ideas?

• This reply was modified 9 years, 8 months ago by alteba.