Hey,

i would like to change the position of the title in the easy slider. I found out, how to change the font size an how to hide the background

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title
{
background: none !important;
}

.avia-caption-content p {
font-size: 13px !important;
}

The title should be directly in the left or in the right corner. What do i have to do?

Thanks for helping,
Daniela

Hi,

I love the Enfold theme, but I’m having some difficulties with the quick css.

I would like the caption and caption text ind the easy slider to be full width, both in the background color #f39200, no left and bottom margin and sticking to the bottom of the slider, so that it will look something like this:
http://cyberrum.dk/enfold-pic/easy-slider-orange-bottom.png

I’ve tried to insert this code in quick css, but I can’t change the background color of the small caption text (it’s too dark), and I can’t get the background of the text to be full width.

/*big caption slider text styling*/
.avia-caption .avia-caption-title
{ background: rgba(243,146,0,1); font-size: 18px !important; line-height: 20px !important; text-transform: none !important;}

/*small caption slider text styling*/
.avia-caption-content
{ background: #f39200 !important; font-size: 14px !important; text-transform: none !important; margin-top: -1px;}

/*slider text background full width*/
avia-caption.av-slideshow-caption, .avia-caption.av-slideshow-caption .avia-inner-caption p
{ width: 100%;}

/*slider text sticking to left side and bottom of slide*/
.avia-caption.av-slideshow-caption
{ padding: 0; left: 0; bottom: 0; margin-bottom: -1px;}

Why isn’t the background full width, and why is the small caption text background brown?

Hello there,

following Josue’s reply

.av-masonry-entry:before {
    content: attr(title);
    background: #8C62A4;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
}

.av-masonry-entry:hover:before {
    opacity: 0.75;
}

.av-masonry-entry:before{
    transition: all linear 0.2s;
}

i managed to make the overly effect i want, but as you can see below

the overly effect covers whole the portfolio item.
I want overly only for the image not the excerpt.
The reason to do so, is that i want for the excerpt to have a clickable iframe (with social media buttons), and in that case, any click links to the items page.

Than you instead,

I tried to add a shortcode to the Enfold Child found on this link http://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/

I have last year I previously added it to the main Enfold theme but that was before I knew better. Is there something I am missing that is not in the above link?

Added this to the Child function.php:
add_filter(‘avia_load_shortcodes’, ‘avia_include_shortcode_template’, 15, 1);
function avia_include_shortcode_template($paths)
{
$template_url = get_stylesheet_directory();
array_unshift($paths, $template_url.’/shortcodes/’);

return $paths;
}

Created a folder called shortcodes

Added a shortcodes.css with this:
/* ======================================================================================================================================================
Feature Badge
====================================================================================================================================================== */
.avia-feature-badge{width: 100%; background-color:#ffffff !important; background-position:center; overflow:hidden; clear:both;}
.avia-feature-badge:hover {background-color:#3399ff !important; background-opacity: 0.7; }
.avia-feature-badge h3{color:#333333 !important;}
.avia-feature-badge:hover h3{color:#ffffff !important;}
.feature-badge-title{color: #333333; width: 100%; display:inline-block; background: transparent; padding: 10px 14px; margin-top:0px; margin-bottom: 0px;}
.avia-feature-badge:hover .feature-badge-title{color: #ffffff !important;}
.feature-img-container{position: relative; text-align: center; width: 100%; height:80%; background-size:cover; background-position: center !important;}
.avia-feature-badge:hover .feature-img-container{opacity: 0.7;}

.avia-feature-badge{
border: 1px solid rgba(0, 0, 0, 0.1);
font-size:20px;
opacity: 1;
top:0; left:0; right:0; bottom:0;
text-align: left;
height: 200px;
margin-top:0px;
margin-bottom:10px;
clear:both;
}