Hi,
I would like to have the Enfold porfolio grid images appear as black and white and then become color on hover. I followed instructions on another thread (https://kriesi.at/support/topic/grayscale-hover-effect-on-portfolio-items/) but it is not working. The custom css I’m using is shown below. What am I missing? Thanks for your help.

.image-overlay .image-overlay-inside::before {
background: none!important;} /*removes arrow on hover*/

img.attachment-portfolio.size-portfolio.wp-post-image {
-webkit-filter: greyscale(100%);
}
img.attachment-portfolio.size-portfolio.wp-post-image:hover {
-webkit-filter: none !important;
}
.grid-image img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-transition: all .6s ease;
transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
}
.active_portfolio_item .grid-image img, .grid-image img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}

I have a navigation bar below logo and centered. but now i have a space that appears between the nav bar and my slider. It disappears on mobile but comes back on desktop. Do you know How can I fix this?

The LayerSlider on this page has a Canvas Width of 700px specified but Enfold is ignoring this and displaying the slider in a container 864px wide (the width of flex_column.av_one_full, the outer container), expanding and enlarging the slider images (which are all actually 700px wide) to fill this container.

I do not want this to happen. I want the slider images to show as 700px wide, which is what I specified in LayerSlider.

How do I stop Enfold doing this and get the images to display at the size I want?

Hi,
ich möchte auf einer Seite das Fullwidth Sub Menu und mehrere Fullscreen Slider untereinader kombinieren.
Die Fullscreen-Slider sollen alle eine ID bekommen, damit ich im Fullwidth Sub Menu Anker vergeben kann.
Habe dazu diesen Eintrag gefunden
https://kriesi.at/support/topic/create-custom-div-id-field-for-all-avia-layout-builder-elements/#post-584257

Das hier macht ungewollte Abstände zwischen den Slidern
<div id="my-custom-id"></div>

Und das hier hat irgendwie keine Auswirkungen.

function avia_custom_element_id(){
?>
 <script>
jQuery(window).load(function(){
jQuery('.your-custom-class').attr('id','your-custom-id');
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_element_id');

Also ein Feld für Custom CSS Class wird angezeigt, aber kein neues Feld Custom CSS ID
Hier man komplette functions.php. Ist da alles richtig?

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

//add custom class for alb
add_theme_support('avia_template_builder_custom_css');

function avia_custom_element_id(){
?>
 <script>
jQuery(window).load(function(){
jQuery('.your-custom-class').attr('id','your-custom-id');
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_element_id');

• This topic was modified 8 years, 10 months ago by tl_s180.

Hello, I use this code below to control the phone bar and address of my website. But I change the alignment of the text to left and it did not work. Can you help me? Something wrong with the code?

ANOTHER THING
I would also like to change the color of social media icons.

CODE
.header_color .phone-info {
font-weight: normal;
text-transform: uppercase;
font-size: 12px !important;
text-align: left !important;
letter-spacing: 0.6px;
font-weight: 400;
font-family:’Roboto’, Arial, sans-serif;
color:#fff !important;
}
#top #header_meta .phone-info {
left: 50%;
position: relative;
transform: translateX(-50%);
line-height: 2.0em;
padding-top: 5px;
}
.header_color .container_wrap_meta {
background-color: #a8a8a1 !important;
}

Hey team,

I made a few changes to my WooCommerce product pages as suggested by an moderator in this forum. For example, take a look at: https://edley.de/produkt/digitales-marketing/

I changed the product description box to full size using the following CSS Code in my Quick-CSS:

/*Produktbeschreibung full width*/
.single-product-summary {
overflow: visible;
}
.template-shop div.product div.summary {
width: 60%;
float: left;
}

.single .woocommerce-tabs {
    position: relative;
    top: -75px;
}

/*Thumbnails Product Page in 1x6 anordnen*/
#top .single-product-main-image .thumbnails a{
width:15.3%!important;
}

It looks fine on the desktop version.
However, the product pages look weird on mobile devices and in responsive mode. In the mobile version, the description is just displayed on one half of the page and the button ‘In den Warenkorb’ is not clickable anymore. Also, the different tabs (Beschreibung, Lernplan, Bewertungen) do look weird on devices that are smaller than an iPhone 6s Plus..
Please take a look at the site on your mobile device or in responsive mode, you’ll see what I mean.
Do you have any ideas on how to fix that?

Thanks,

Giaco

• This topic was modified 8 years, 10 months ago by giaco_he.