-
Search Results
-
Hey!
1. I suppose it might be possible with lots of changes to the code. That would have to be considered custom work though and it would be best to hire a freelancer to help you out with that.
2. Right click your page and view source and then copy the HTML for the widget and paste that inside a text widget in your footer widget areas. You can then edit the HTML to suit your purposes.
3. That should be working. Perhaps you have a typo somewhere in your custom CSS.
5. Hmm, I don’t see any classes being output with it. Try switching the code to this.
add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { echo '<div class = "header_widget">'; dynamic_sidebar( 'header' ); echo '</div>'; }And let us know when your done so we can take another look.
6. In the shortcode options set the image size to 300 x 300 or something similar instead of No scaling.
7. You can add this to your custom CSS.
.avia-fullwidth-slider, .avia-fullwidth-slider img { height: 500px !important; }But that may make some of your images look distorted. It would be best to crop them before uploading.
9. Send us a link.
In the future I recommend creating separate topics for your questions. Asking so many all at once makes it confusing and difficult to answer.
Regards,
ElliottHi, you guys have already helped me a lot with a lot of questions, but I have a follow-up question about a previous topic.
https://kriesi.at/support/topic/add-extra-logos-in-head-space/
The extra text in my header space now shows up as 1st line black, 2nd line blue like a hyperlink.
I would like to change the color. I want the first line to be blue (not a hyperlink but this color: #51b2ea) and the second line to be orange (#fd8917 stil a hyperlink). Is there any way to do this? I’ve included below the quick CSS lines I currently use. Also the lines in my functions.php.
My seconds follow-up question to this is the placement of the NRTO logo and the Social links. Can I put the NRTO all the way on the right and the social links where the NRTO was? (So essentially swap them out for each other).
Thanks in advance!
#scroll-top-link {display: none; } strong.second-logo { float: right!important; position: relative; margin-right: 21%; } .second-logo img{ padding-top:50px; } .header-scrolled .second-logo img { padding-top: 10px; } #top .social_bookmarks li a { font-size: 25px; } @media only screen and (max-width: 768px) { #top .social_bookmarks li a { font-size: 18px; } strong.second-logo { margin-right: 30%; }} #top .social_bookmarks li a { color: #5cb4e4; } #top .avia-logo-element-container .slide-image { background: transparent !important ; } .main_color input[type='submit'] { background-color: #51b3ea; color: white; border-color: #51b3ea; } .main_color input[type='submit']:hover { background-color: ##51b3ea; color: white; border-color: #51b3ea; } .header-message { position: relative; top: 80px; left: 38%; } @media only screen and (max-width: 769px) { .header-message { left: 40%; }} @media only screen and (max-width: 480px) { .header-message { top: 190px; left: 13%; }} .header-message { margin-top: -44px; } .header-scrolled .header-message { top: 50px; } .header-message * { font-weight: bold !important; } .header-message { z-index: 99; } .header-scrolled .logo img,.header-scrolled .second-logo a { padding-top: 0; } .logo img { padding-top: 20px; } strong.second-logo a { padding-top: 10px; } @media only screen and (max-width: 768px) { .header-message { display: none!important; }} @media only screen and (max-width: 480px) { strong.second-logo { margin-right: 20%; }} @media only screen and (max-width: 768px) { .second-logo { display: none !important; }} .home .avia-builder-el-5 { margin-right: 8%; margin-top: 20px; } .home .avia-builder-el-4 { margin-left: 8%; margin-top: 20px; }function second_logo($logo) { $logo .= '<strong class="second-logo logo bg-logo"><a href="http://www.nrto.nl/partnerorganisaties/kwaliteitslabels_en_keurmerken/geschillencommissie/"><img src="http://www.tophbo.org/wp-content/uploads/2015/04/NRTO-logo-2.jpg"></a></strong>'; return $logo; } add_filter('avf_logo_final_output', 'second_logo'); function my_home_category( $query ) { if ( $query->is_home() && $query->is_main_query() ) { $query->set( 'cat', '17'); } } add_action( 'pre_get_posts', 'my_home_category' ); add_action('ava_main_header', 'ava_main_header_mod'); function ava_main_header_mod() { $output = '<div class="header-message">'; $output .= '<span class="blue bold">Kom naar een informatieochtend!</span> <br>'; $output .= '<a href="http://www.tophbo.org/informatieochtend/" class="orange bold">Loop even binnen of meld je hier aan!</a>'; $output .= '</div>'; echo $output; } function custom_widget_featured_image() { global $post; echo tribe_event_featured_image( $post->ID, 'thumbnail' ); } add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );In reply to: Custom headers on product categories pages
Hey!
You can try this:
add_action('ava_after_main_container', 'add_banner_before_breadcrumb'); function add_banner_before_breadcrumb() { if ( is_product() ) { echo '<div id="av_product_description" class="avia-section main_color avia-section-default avia-no-shadow avia-full-stretch av-parallax-section avia-bg-style-parallax av-minimum-height av-minimum-height-75 container_wrap fullsize" style="color:#ffffff;" data-section-bg-repeat="stretch"> <div class="av-parallax avia-full-stretch"></div> </div>'; } } add_action('wp_footer', 'ava_custom_script_parallax'); function ava_custom_script_parallax(){ ?> <script> (function($){ $('#av_product_description .av-parallax').css('background-image', 'url(' + 'http://sst.seite-freigeben.de/wp-content/uploads/stripe_Poducts11.jpg' + ')'); $('#av_product_description').css('height', '500px'); })(jQuery); </script> <?php }Set the height of the #av_product_description manually.
Regards,
IsmaelHi Ismael,
thanks for coming back.
Yes i did create a Custom CSS class. ( in the custom css field within the image element, right ? ).
But since i still had problems with that way, i went for the Quick CSS Version.
– i just noticed, that the custom css field disappeared with the latest enfold update procedure yesterday. –
–> would css code inside this field disappear as well with updates ?still, i would prefer a custom css version. otherwise the quick css field will be getting rather full in the future.
So right now it looks like this under Quick CSS regarding this particular image element:
.page-id-21 .avia-builder-el-1{ border-radius: 0px !important; position: absolute !important; top: 0px !important; right: 0% !important; } .page-id-21 .avia-builder-el-1 .image-overlay { background: url(https://www.schwebewerk.com/wordpress/wp-content/uploads/2015/03/bookmark_featuredproject_overlay.png) no-repeat !important; height:150px !important; width:68px !important; position: absolute !important; top: 0px !important; left: 0px !important; } .page-id-21 .avia-builder-el-1 .image-overlay .image-overlay-inside { display: none !important; }since i tried it in several ways which didn’t work completely, how do i modify this css code properly to move it inside the custom css field?
best regards
StefanOk
the Shortcode is outputting the correct custom colors
DEFAULT EXAMPLE
[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-bottom' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='page,149' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='48.8,80.4'] <p>Tool tip text here</p> [/av_image_spot]CUSTOM COLORS EXAMPLE
[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color' link='manually,http://#url link here' hotspot_color='custom' custom_bg='#00472e' custom_font='#ffffff' custom_pulse='#00472e' hotspot_pos='88.8,86.8'] <p>Tool tip text here</p> [/av_image_spot]However the shortcode is not inserting the custom style HTML CSS code for the custom colors in the FONT COLOR or BACKGROUND COLOR
<div class="av-image-hotspot av-perma-tooltip av-display-hotspot" data-avia-tooltip-position="left" data-avia-tooltip-alignment="centered" data-avia-tooltip-class="av-tt-default-width av-tt-pos-left av-tt-align-centered av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot" data-avia-tooltip="<h3><a title=" " href="http://#url link here" target="_blank">Download our Product Brochure</a></h3> " style="top: 88.8%; left: 86.8%; "><a href="http://#url link here" class="av-image-hotspot_inner" style="background-color: #00472e; color: #ffffff;">6</a><div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div><div class="avia-tooltip avia-tt av-tt-default-width av-tt-pos-left av-tt-align-centered av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot" style="top: -37px; left: -140px; display: block; opacity: 1;"><div class="inner_tooltip"><h3><a title="" href="http://#url link here" target="_blank">Download our Product Brochure</a></h3></div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></div>Above we can see that the custom colour has been inserted for the hotspot
<div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div>But not for the other elements
In reply to: Middle alignment of image
Hi BijendraMohan!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.page-id-8246 .entry-content p img { position: relative; top: 20px; }that would be only applied on this page. If you would like a global solution, please firstly turn on custom CSS class field on ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then give your text block elements that you will need to center images a custom CSS class and use the code as following
.avia_textblock.your-custom-class p img { position: relative; top: 20px; }Regards,
YigitIn reply to: How to place img above comment div
Hi!
Turn on the custom css class. Refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Add custom css class attribute to the image with the caption. Use “custom-image” for example. Add a bottom margin to it:
.custom-image img.avia_image { position: relative; margin-bottom: 70px; }Regards,
IsmaelIn reply to: THUMBS PORTFOLIO
Hi!
This will require custom modification directly on the core theme files. Edit shortcode.js. Look for this code on line 2287:
var gallery = $(this), images = gallery.find('img'), big_prev = gallery.find('.avia-gallery-big');Replace it with:
var gallery = $(this), images = gallery.find('img'), big_prev = gallery.find('.avia-gallery-big'), imglink = gallery.find('.avia-gallery-thumb a');Change this line:
//trigger displaying of thumbnails gallery.on('avia_start_animation', function() { images.each(function(i) { var image = $(this); setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110)); }); });With this:
//trigger displaying of thumbnails gallery.on('avia_start_animation', function() { imglink.each(function(i) { imglink.removeAttr('href'); }); images.each(function(i) { var image = $(this); setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110)); }); });Again, look for this line:
gallery.on('mouseenter','.avia-gallery-thumb a', function()Replace it with:
gallery.on('click','.avia-gallery-thumb a', function()Edit avia.js, look for this code:
exclude : '.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added',Replace it with:
exclude : '.noLightbox, .noLightbox a, .lightbox-added, .avia-gallery-thumb a',Last, add this to the Quick CSS field:
#top .avia-gallery .avia-gallery-thumb a { cursor: pointer; }Best regards,
IsmaelIn reply to: category Images / Button
Hey!
1. Try with this code:function avia_close_image_div() { global $avia_config; if(is_product()) { $back =$_SERVER['HTTP_REFERER']; if((isset($back) && $back !='')) echo '<a href="'.$back.' class='custom_back_button button'">Go back</a>'; $avia_config['currently_viewing'] = "shop_single"; get_sidebar(); } echo "</div>"; }2. Indicate what you want to change in the checkout page, if it’s not too complicated we can provide you some CSS codes to paste in Quick CSS.
Best regards,
JosueJust open the Debugger and uncomment my Custom-CSS which is:
.inner_tooltip {
margin: -20px 5px 5px 5px;
}The heading moves down by those 20px. If You check the HTML-Code in the debugger for this Tooltip and remove the unnessecayr “<p></p>” right before the heading, then everything looks fine – so it’s definetely NOT the margin of the heading. Now let’s check the raw source code.You will find the following code for the Hotspot:
<div class='av-image-hotspot_inner' style=' '>4</div><div class='av-image-hotspot-pulse' ></div></div><div class='av-image-hotspot' data-avia-tooltip-position='bottom' data-avia-tooltip-alignment='right' data-avia-tooltip-class='av-tt-xlarge-width av-tt-pos-below av-tt-align-right av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot' data-avia-tooltip='</p><h4>Markante <strong>Einsätze</strong></h4><p>Let’s translate the data-avia-tooltip’s beginning to real HTML:
</p><h4>Markante Einsätze</h4>So, there is a closing paragraph on top of the heading – no idea, where You place the opening one. It’s of course the block we removed right before in the HTML-Debugger.
Do You now see the problem ? I suggest it has to do with the
ShortcodeHelper::avia_apply_autop($content)which is used in the image_hotspots.php (511).
Regards,
GeorgIn reply to: Fixed image in Fullwidth Easy Slider
Hey!
The css code above will only show 10% of the images. Try this:
@media only screen and (max-width: 768px) { #full_slider_1 .avia-slideshow-inner, #full_slider_1 img { height: 315px !important; width: 150% !important; left: -50%; }} @media only screen and (max-width: 480px) { #full_slider_1 .avia-slideshow-inner, #full_slider_1 img { height: 250px !important; }}It will not show exactly like the desktop view but you will get most part of the images. You should turn on the custom css class if you’re trying to modify a specific element such as the slider: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Regards,
IsmaelHi guys, I’m trying to add on a white border around 3 images on my homepage. I added in a custom CSS class on the images themselves (homepage-images) and have used this code in the quick CSS but nothing’s changing…
#homepage-images.avia-image-container img {
border: 15px white;
padding: 5px;
}I’d also like to know how to add a shadow to the border, if that’s ok/possible?
Could you please let me know what I’m doing wrong or perhaps I have something in my quick CSS that’s overriding it?
Login deets below if you need
Thank you :)
SarahTopic: Homepage margin
Hi again!
I want to place an image on top of the homepage. Below the menu and logo area.
The padding (or margin) is too much and I can’t get it fixed.
I’m talking about the “avia-image-container”.
Have been playing with Firebug to get it right.Have given the image an custom CSS class. “meerwaardeaxs”
Need the following addition in the CSS..meerwaardeaxs .avia-image-container{
margin-top: -53px;
margin-bottom: -78px;
}Doesn’t seem to work.
Can you help me please?
Thx in advance!
In reply to: Posts not recognized as posts, but as pages
In reply to: Mash Between Masonry Blog with Blog Post Grid Layout
Hey!
That is possible but it will require a custom modification. Edit config-templatebuilder > avia-shortcodes > masonry_entries.php. Look for this code:
$items .= "<figure class='av-inner-masonry main_color'>"; $items .= $bg; //title and excerpt if($this->atts['caption_elements'] != 'none' || !empty($text_add)) { $items .= "<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before; if(strpos($this->atts['caption_elements'], 'title') !== false){ $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup'])); $items .= "<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>"; } if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){ $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup'])); $items .= "<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>"; } $items .= $text_after."</div></figcaption>"; } $items .= "</figure>";Replace it with:
$items .= "<figure class='av-inner-masonry main_color'>"; $items .= $bg; $items .= "</figure>"; //title and excerpt if($this->atts['caption_elements'] != 'none' || !empty($text_add)) { $items .= "<figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='avia-arrow'></div>".$text_before; if(strpos($this->atts['caption_elements'], 'title') !== false){ $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup'])); $items .= "<h3 class='av-masonry-entry-title entry-title' {$markup}>{$the_title}</h3>"; } if(strpos($this->atts['caption_elements'], 'excerpt') !== false && !empty($content)){ $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$entry['ID'], 'custom_markup'=>$this->atts['custom_markup'])); $items .= "<div class='av-masonry-entry-content entry-content' {$markup}>{$content}</div>"; } $items .= $text_after."</div></figcaption>"; }Add this to the Quick CSS field:
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content { position: relative; }Masonry items may not align correctly when excerpt is activated.
Best regards,
IsmaelIn reply to: Play button fullscreen video
Hey!
I found a way.
1. Set-up a FullScreen Slider element like this – http://screencast.com/t/RyxNPmtvMau
2. The “image + trigger” slide should be like this – http://screencast.com/t/LXDOSmDokSa
3. Finally add this to theme / child theme functions.php:function custom_js(){ ?> <script> (function($){ $(window).load(function() { $('.avia-fullscreen-slider .trigger').on('click', function(){ $('.avia-fullscreen-slider .next-slide').trigger('click'); }) }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_js');If you are using another fullscreen sliders throughout the page i’d highly suggest you to set a custom class and change the code accordingly so it only affects that one.
Regards,
JosueIn reply to: Issues with transparent header and layout builder
Hey janetgot!
Thank you for using Enfold.
1.) Use this to fix the header:
.html_header_top.html_header_sticky #header { position: fixed; z-index: 10000; }2.) You have this code on the style.css file which affects the image on the 3rd column:
.avia-builder-el-14, .avia-builder-el-15, .avia-builder-el-17, .avia-builder-el-18 { width: 200px; font-size: 110%; }If you want to modify specific elements on the theme, enable the custom css class on the advance layout builder: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelIn reply to: Issues With Mobile Menu & Mobile Responsive Display
Hi!
Add this to the bottom of your functions.php file.
add_action( 'ava_after_main_menu', 'enfold_customization_second_logo' ); function enfold_customization_second_logo() { echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', '<img class = "mobile_logo" src = "URL to your image" alt = "" />', 'strong', true); }And replace the “URL to your image” with the correct URL. And then add this to your custom CSS.
.mobile_logo { display: none; } @media only screen and (max-width: 767px) { .logo { display: none; } .mobile_logo, .mobile_logo .logo { display: block !important; } }Regards,
ElliottHi darryllevine!
Try creating a caption for the slide image and add this inside.
<form class="" method="get" id="searchform" action="http://artwork.mysitehosted.com/~cote/"> <div style="opacity: 0; display: none;"> <input type="submit" class="button avia-font-entypo-fontello" id="searchsubmit" value=""> <input type="text" placeholder="Search" value="" name="s" id="s"> </div> </form>And then add this to your custom CSS.
.avia-caption-content, .avia-caption-content * { display: block !important; opacity: 1 !important; }Cheers!
ElliottIn reply to: Background image in logo area as clickable link?
Hey!
Please go to Appearance > Editor and open helper-main-menu.php file and find
echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'strong', true);
and add your text right below it as following
echo "<div class='header-custom-text'><a href='http://kriesi.at' target='_blank'><img src='http://kriesi.at/wp-content/themes/kriesi/images/logo.png' /></a></div>";
Then you can adjust its position using custom CSS in Quick CSS field.header-custom-text { position: relative; right: 0; top: 10px; }Regards,
YigitIn reply to: Icon font background for an Avia section
Sorry Elliott, i haven’t done anything yet, so i have nothing to show, and it seemed I am not making a good job when trying to explain myself.
– Say i want :
– A color section
– Two columns in the color section
– Two text blocks in the columns.And a background image on my color section.
And instead using an image, i want to use a (big) icon-font character on my backgroundThe only way to set this background is custom css with my color section id or class, ok ?
So i can’t find the right css code (working with the avia editor) to put my font-icon character in the background…Another example, simpler :
http://codepen.io/astrotim/details/IjJzLHi Ismael
Thank you for you’re respond1. I added on the End of functions.php this:
add_theme_support(‘avia_template_builder_custom_css’);2. I go to the element Blog on my site (where I like to make the changes)
3. Open the element Blog and on the last tap where it sayes: Custom Css Class (It’s acctually the last one) I paste in this:
<style type = “text/css”>
.custom-blog .slide-image { display: none !important; }
</style>Save it and refresh – let’s see… Some how diden’t worked – did I forget something? Something I diden’t understand about “custom-blog”? Hmm I don’t get it.
Please help :)
BtinaTopic: Border for images
How do I get there to be a white border for my images?
If at all possible I would like this to be with the Custom Css Class within the image element so I can control with images this applies to.
I used this link, but the best I could do with it was to make all of the images have a white border and it also put borders within the Google Map element.
I am at a loss a loss at this point, how do I make this happen?
Thank you!!
I do have this already in my functions.php: add_theme_support(‘avia_template_builder_custom_css’);
Here is my website : http://www.warriorstronghold.com/
There should be a fullwidth slider at the very top, it even exists in the HTML source code:
<div id=”full_slider_1″ class=”avia-fullwidth-slider main_color avia-shadow avia-builder-el-0 el_before_av_heading avia-builder-el-first container_wrap sidebar_right”><div data-size=”featured_large” data-lightbox_size=”large” data-animation=”slide” data-ids=”’3475′,’3476′,’3477′,’3498′” data-video_counter=”0″ data-autoplay=”true” data-bg_slider=”false” data-slide_height=”” data-handle=”av_slideshow_full” data-interval=”9″ data-class=” ” data-css_id=”” data-scroll_down=”” data-control_layout=”av-control-default” data-custom_markup=”” data-perma_caption=”” data-src=”” data-position=”top left” data-repeat=”no-repeat” data-attach=”scroll” data-stretch=”” data-default-height=”42″ class=”avia-slideshow avia-slideshow-1 av-control-default avia-slideshow-featured_large av_slideshow_full avia-slide-slider ” itemscope=”itemscope” itemtype=”https://schema.org/ImageObject”><ul class=”avia-slideshow-inner” style=”padding: 0px; height: 0px;”></div></div>For some reason, it is not showing up. It showed up before, but one day it disappeared. I tried updating enfold; using CSS to try and not make it “display:none” (in case it might be for some reason).
Can someone advice me on what I should do?
Thanks
KennethIn reply to: Troubles with the header (fixed/responsive/height…)
Hi!
1. + 2. It looks like you turned off the fixed header. Go ahead and send us a WordPress login and we’ll take a closer look.
3. Well, when the header shrinks it’s supposed to shrink your logo image as well. If you need to switch it out with another logo then I suppose we could add another logo in there and then use this CSS to hide them.
.logo, .header-scrolled .alternate-logo { display: block !important; } .alternate-logo, .header-scrolled .logo { display: none !important; }And then find line 105 in /enfold/includes/helper-main-menu.php.
echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'strong', true);And add this right above it.
echo '<img src = "URL to your smaller logo" class = "alternate-logo" />';4. You can set a custom pixel value for your header in Dashboard > Enfold > Header. If you plan on having your header fixed and move down the page with you then I recommend using this option.
Best regards,
ElliottHi,
I’m trying to add a div container to top header area so to insert an image background. I have secondary Header Secondary menu set on righthand side. This new div needs to be placed on the lefthand side.
Can you advise how this is done correctly please.
Thanks
My header.php code is
<?php
global $avia_config;$style = $avia_config[‘box_class’];
$responsive = avia_get_option(‘responsive_active’) != “disabled” ? “responsive” : “fixed_layout”;
$blank = isset($avia_config[‘template’]) ? $avia_config[‘template’] : “”;
$av_lightbox= avia_get_option(‘lightbox_active’) != “disabled” ? ‘av-default-lightbox’ : ‘av-custom-lightbox’;?><!DOCTYPE html>
<html <?php language_attributes(); ?> class=”<?php echo ” html_{$style} “.$responsive.” “.$av_lightbox.” “.avia_header_class_string();?> “>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” /><!– page title, displayed in your browser bar –>
<title><?php if(function_exists(‘avia_set_title_tag’)) { echo avia_set_title_tag(); } ?></title><?php
/*
* outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
* located in framework/php/function-set-avia-frontend.php
*/
if (function_exists(‘avia_set_follow’)) { echo avia_set_follow(); }/*
* outputs a favicon if defined
*/
if (function_exists(‘avia_favicon’)) { echo avia_favicon(avia_get_option(‘favicon’)); }
?><!– mobile setting –>
<?phpif( strpos($responsive, ‘responsive’) !== false ) echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>’;
?><!– Scripts/CSS and wp_head hook –>
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/wp_head();
?>
</head>
<body id=”top” <?php body_class($style.” “.$avia_config[‘font_stack’].” “.$blank); avia_markup_helper(array(‘context’ => ‘body’)); ?>>
<div id=’wrap_all’>
<?php
if(!$blank) //blank templates dont display header nor footer
{
//fetch the template file that holds the main menu, located in includes/helper-menu-main.php
get_template_part( ‘includes/helper’, ‘main-menu’ );} ?>
<div id=’main’ data-scroll-offset='<?php echo avia_header_setting(‘header_scroll_offset’); ?>’>
<?php do_action(‘ava_after_main_container’); ?>
there was a thread here but closed – so i set up a new one.
you can see it here: http://www.wordpress-webdesign.org/grayscale/
because of having some troubles with the common css Solution (filter setting grayscale) i use the code Element to implement a little jquery script.
<script type="text/javascript"> // jQuery(".graytone img").css({"display":"none"); // On window load. This waits until images have loaded which is essential jQuery(window).load(function(){ // Fade in images so there isn't a color "pop" document load and then on window load jQuery(".graytone img").animate({opacity:1},500); // clone image jQuery('.graytone img').each(function(){ var el = jQuery(this); el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){ var el = jQuery(this); el.parent().css({"width":this.width,"height":this.height}); el.dequeue(); }); this.src = grayscale(this.src); }); // Fade image jQuery('.graytone img').mouseover(function(){ jQuery(this).parent().find('img:first').stop().animate({opacity:1}, 1000); }) jQuery('.img_grayscale').mouseout(function(){ jQuery(this).stop().animate({opacity:0}, 1000); }); }); // Grayscale w canvas method function grayscale(src){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for(var y = 0; y < imgPixels.height; y++){ for(var x = 0; x < imgPixels.width; x++){ var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); } </script>you can place it e.g before a partnerlogo element:
with :
here i gave to the partner logo element a custom css class : graytone
you can find that class in the script above on line (// jQuery(".graytone img").css({"display":"none");)
(how to activate the custom css for every alb element put in funktions.php :add_theme_support('avia_template_builder_custom_css');)there are some adjustements you can make (fade in speed, animation speed)
In reply to: Testimonials changing layout
Hey Marcelo!
Open up /enfold/config-templatebuilder/avia-shortcodes/testimonials.php and move lines 393 – 398.
$output .= "<div class='avia-testimonial-meta-mini'>"; if($name) $output .= "<strong class='avia-testimonial-name' {$this->title_styling} {$markup_name}>{$name}</strong>"; if($subtitle) $output .= "<span class='avia-testimonial-subtitle {$this->subtitle_class}' {$this->title_styling} {$markup_job}>{$subtitle}</span>"; if($link) $output .= "<span class='hidden avia-testimonial-markup-link' {$markup_url}>{$link}</span>"; if($link) $output .= " – <a class='aviablank avia-testimonial-link' href='{$link}' >{$linktext}</a>"; $output .= "</div>";Up so they display on top of this line.
$output .= "<div class='avia-testimonial-content {$this->content_class}' {$this->content_styling} {$markup_text}>";And then add this to your custom CSS.
.avia-testimonial-image { float: right !important; }Cheers!
ElliottIn reply to: Custom URL for Logo
Hi Josue,
Thanks for your reply! But I actually want the logo to be the same image, I just want it so that when you click on it, it goes to a custom URL, instead of the Home URL.
I notice that in the framework / php / function-set-avia-frontend.php file, there is the following code:if(!function_exists(‘avia_logo’))
{
/**
* return the logo of the theme. if a logo was uploaded and set at the backend options panel display it
* otherwise display the logo file linked in the css file for the .bg-logo class
* @return string the logo + url
*/
function avia_logo($use_image = “”, $sub = “”, $headline_type = “h1”, $dimension = “”)
{
$use_image = apply_filters(‘avf_logo’, $use_image);
$headline_type = apply_filters(‘avf_logo_headline’, $headline_type);
$sub = apply_filters(‘avf_logo_subtext’, $sub);
$alt = apply_filters(‘avf_logo_alt’, get_bloginfo(‘name’));
$link = apply_filters(‘avf_logo_link’, home_url(‘/’));if($sub) $sub = “<span class=’subtext’>$sub</span>”;
if($dimension === true) $dimension = “height=’100′ width=’300′”; //basically just for better page speed ranking :Pif($logo = avia_get_option(‘logo’))
{
$logo = apply_filters(‘avf_logo’, $logo);
if(is_numeric($logo)){ $logo = wp_get_attachment_image_src($logo, ‘full’); $logo = $logo[0]; }
$logo = ““;
$logo = “<$headline_type class=’logo’>“.$logo.”$sub</$headline_type>”;
}
else
{
$logo = get_bloginfo(‘name’);
if($use_image) $logo = ““;
$logo = “<$headline_type class=’logo bg-logo’>“.$logo.”$sub</$headline_type>”;
}$logo = apply_filters(‘avf_logo_final_output’, $logo, $use_image, $headline_type, $sub, $alt, $link);
return $logo;
}
}Is there something here that I can change to make it go from home_url to a custom URL?
Thanks!
