Page 20 – Support | Kriesi.at – Premium WordPress Themes

Download all files (PHP, PO, MO)

Hi there …
The german translation is finished up to 93% I translated the backend!
I need only to translate the LayerSlider WP, but i cant see the translations i did for this plugin yet. Dont know why… Trying to get a solution for this. Would like to finish it! Help? :-)

Here you can download my translation (93% finished). I used a formal translation with “Sie”:

Else …
In some PHP files were some files translation tags missing. I added them to the PHP-Files. PHP-Files are attached in my download package. The german language is different than the english language. Words are longer. Thats why i changed the width of the “shortcode_insert_button” from 66px to 100px. It looks good, works fine and also leaves enough space for the text. I think it would be a benefit for other languages too. It would be great if this could be included in the next update enfold! Here is an example of my admin area with this new size.

Adminpanel German

Changes were made in: enfold/config-templatebuilder/avia-template-builder/assets/css/avia-builder.css

My CSS:

.shortcode_insert_button {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E1E1E1;
color: #777777;
display: block;
float: left;
font-size: 11px;
height: 50px;
line-height: 13px;
margin: 0 3px 3px 0;
outline: medium none;
overflow: hidden;
padding: 4px 2px 10px;
position: relative;
text-align: center;
text-decoration: none;
width: 100px;
}

Other changes:
As mentioned in several files were missing the translation tags.
I have added them. Below, the list of affected files:

enfold/config-templatebuilder/avia-shortcodes/notification.php

Row 42
“std” => __(“Note”, ‘avia_framework’ ),

Row 78
“std” => __(“This is a notification of some sort.”, ‘avia_framework’ ),

—————————————————————————————

enfold/config-templatebuilder/avia-shortcodes/blog.php

Row 42
__(‘Display blog posts’, ‘avia_framework’) =>’posts’,

Row 43
__(‘Display entries from a custom taxonomy’, ‘avia_framework’) =>’taxonomy’)),

Row 66
“name” => __(“Blog Style”, ‘avia_framework’ ),

Row67
“desc” => __(“Choose the default blog layout here.”, ‘avia_framework’ ),

Rows 74 – 77
“subtype” => array( __(‘Multi Author Blog (displays Gravatar of the article author beside the entry and feature images above)’, ‘avia_framework’) =>’multi-big’,
__(‘Single Author, small preview Pic (no author picture is displayed, feature image is small)’, ‘avia_framework’) =>’single-small’,
__(‘Single Author, big preview Pic (no author picture is displayed, feature image is big)’, ‘avia_framework’) =>’single-big’,
__(‘Grid Layout’, ‘avia_framework’) =>’blog-grid’,

—————————————————————————————

enfold/config-templatebuilder/avia-shortcodes/iconlist.php
Row 103
“std” => __(“List Content goes here”, ‘avia_framework’ ) ,

—————————————————————————————

enfold/config-templatebuilder/avia-shortcodes/section.php
Row 23
$this->config[‘name’] = __(‘Color Section’, ‘avia_framework’ );

—————————————————————————————

enfold/config-templatebuilder/avia-shortcodes/heading.php

Row 48
“std” => __(“Hello”, ‘avia_framework’ ),

Row 66
“subtype” => array( __(“Default Color”, ‘avia_framework’ )=>”, __(“Meta Color”, ‘avia_framework’ )=>’meta-heading’, __(“Custom Color”, ‘avia_framework’ )=>’custom-color-heading’)

Row 86
“subtype” => array( __(“Default Style”, ‘avia_framework’ )=>”, __(“Heading Style Modern (left)”, ‘avia_framework’ )=>’blockquote modern-quote’ , __(“Heading Style Modern (centered)”, ‘avia_framework’ )=>’blockquote modern-quote modern-centered’, __(“Heading Style Classic (centered, italic)”, ‘avia_framework’ )=>’blockquote classic-quote’)

Row 105
“subtype” => array( __(“No Subheading”, ‘avia_framework’ )=>”, __(“Display subheading above”, ‘avia_framework’ ) =>’subheading_above’, __(“Display subheading below”, ‘avia_framework’ )=>’subheading_below’),

—————————————————————————————

enfold/includes/admin/register-portfolio.php
Rown: 46 & 47
‘label’ => __(‘Portfolio Categories’,’avia_framework’),
‘singular_label’ => __(‘Portfolio Category’,’avia_framework’),

—————————————————————————————

enfold/config-templatebuilder/avia-shortcodes/slideshow_fullscreen.php
Row 48
“add_label” => __(“Add single image”, ‘avia_framework’ ),

—————————————————————————————

Added following tags to “de_DE.po”:

One special case in de_DE.po:

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/contact.php:115
msgid "If the width is set to 50% for 2 consecutive form items they will appear beside each other instead of underneath"
msgstr "Wenn die Breite auf 50% von 2 aufeinander folgenden Formularelemente gesetzt ist, werden diese nebeneinander statt in einer neuen Zeile erscheinen

I have deleted one single line with the content
#, Php-format
With the line i got constantly error messages with the translations as soon as i typed a text in German version. Now it works but I do not know exactly why … Therefore, please check this.

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/slideshow_fullscreen.php:48
msgid “Add single image”
msgstr “Einzelnes Bild hinzufügen”

# @ avia_framework
#: includes/admin/register-portfolio.php:46
msgid “Portfolio Categories”
msgstr “Portfolio Kategorien”

# @ avia_framework
#: includes/admin/register-portfolio.php:47
msgid “Portfolio Category”
msgstr “Portfolio Kategorie”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/contact.php:115
msgid “If the width is set to 50% for 2 consecutive form items they will appear beside each other instead of underneath”
msgstr “Wenn die Breite auf 50% von 2 aufeinander folgenden Formularelemente gesetzt ist, werden diese nebeneinander statt in einer neuen Row erscheinen”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:66
msgid “Blog Style”
msgstr “Blog-Stil”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:42
msgid “Display blog posts”
msgstr “Zeige Blog-Beiträge”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:43
msgid “Display entries from a custom taxonomy”
msgstr “Zeige Einträge aus einer benutzerdefinierten Taxonomie”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:48
msgid “Hello”
msgstr “Eine nette Überschrift”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:67
msgid “Choose the default blog layout here.”
msgstr “Wählen Sie die Standard Blog-Gestaltung aus”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:74
msgid “”
“Multi Author Blog (displays Gravatar of the article author beside the entry ”
“and feature images above)”
msgstr “”
“Multi-Autor Blog (Zeigt Gravatar des Artikel-Autors neben dem Eintrag und ”
“Feature-Bild darüber)”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:75
msgid “”
“Single Author, small preview Pic (no author picture is displayed, feature ”
“image is small)”
msgstr “”
“Einzelner Autor, kleines Miniaturbild (kein Autorenbild dargestellt, kleines ”
“Feature-Bild)”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:76
msgid “”
“Single Author, big preview Pic (no author picture is displayed, feature ”
“image is big)”
msgstr “”
“Einzelner Autor, großes Miniaturbild (kein Autorenbild dargestellt, großes ”
“Feature-Bild)”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/blog.php:77
msgid “Grid Layout”
msgstr “Raster-Layout”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:90
msgid “Heading Size”
msgstr “Größe der Überschrift”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:91
msgid “Size of your Heading in Pixel”
msgstr “Textgröße der Überschrift in Pixel”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:99
msgid “Subheading”
msgstr “Untertitel”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:100
msgid “Add an extra descriptive subheading above or bellow the actual heading”
msgstr “Zusätzlicher Untertitel über oder unterhalb der eigentlichen Überschrift”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:66
msgid “Default Color”
msgstr “Standard Farbe”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:66
msgid “Meta Color”
msgstr “Meta Farbe”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:105
msgid “No Subheading”
msgstr “Kein Untertitel”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:105
msgid “Display subheading above”
msgstr “Untertitel oberhalb anzeigen”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:105
msgid “Display subheading below”
msgstr “Untertitel unterhalb anzeigen”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:109
msgid “Subheading Text”
msgstr “Text für Untertitel”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:110
msgid “Add your subheading here”
msgstr “Geben Sie hier Text für den Untertitel ein.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:116
msgid “Subheading Size”
msgstr “Textgröße des Untertitels”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/heading.php:117
msgid “Size of your subeading in Pixel”
msgstr “Geben Sie einen Wert in Pixel ein (z.B. 14px)”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:49
msgid “Icon Style”
msgstr “Icon-Stil”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:50
msgid “Here you can set the style of the icon. Either display it inline as part of some text or let it stand alone with border and optional caption”
msgstr “Sie können das Icon als Inline-Element (umgeben von Text) oder alleinstehend mit Rahmen und optionaler Bildunterschrift darstellen.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:56
msgid “Default inline style”
msgstr “Icon als Inline-Element”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:57
msgid “Standalone Icon with border and optional caption”
msgstr “Icon alleinstehend mit optionaler Bildunterschrift”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:62
msgid “Icon Caption”
msgstr “Icon-Bildunterschrift”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:63
msgid “A small caption bellow the icon”
msgstr “Ergänzen Sie das Icon um einen Text. Dieser erscheint unterhalb des Icons.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/iconlist.php:103
msgid “List Content goes here”
msgstr “Geben Sie hier Ihren gewünschten Textinhalt ein.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:126
msgid “Optional Tooltip”
msgstr “Optionaler Tool-Tipp.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/icon.php:127
msgid “Add a tooltip for this Icon. The tooltip will appear on mouse over”
msgstr “Ergänzen Sie das Icon um einen Tool-Tipp. Dieser erscheint bei Mouse-Over.”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/notification.php:42
msgid “Note”
msgstr “Hinweis”

# @ avia_framework
#: config-templatebuilder/avia-shortcodes/notification.php:44
msgid “This is the text that appears in your Notification.”
msgstr “Dies ist der Text, der in Ihrer Mitteilung angezeigt wird.”

This reply was modified 12 years ago by docperi.

January 5, 2014 at 7:12 am #205496

In reply to: Enfold edit header / css / search bar

Hey Courin!

Edit header.php, find this code:

echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

Below, add this code:

echo "<div class='header-search'>";
get_search_form();
echo "</div>";

Add this on your custom.css or Quick CSS:

.header-search {
position: absolute;
top: 30px;
left: 250px;
}

Modify the main menu font using this:

 .header_color .main_menu ul:first-child > li > a {
color: red;
}

.main_menu ul:first-child > li > a {
display: block;
text-decoration: none;
padding: 0 13px;
font-weight: normal;
font-size: 15px;
}

Cheers!
Ismael

January 2, 2014 at 10:32 pm #204706

Topic: Align flags and text

in forum Enfold

CloudChoice

Participant

Hello,

I’m trying to create an alignment of flags and text like this page:
http://www.apple.com/choose-your-country/

Than i used a TEXTBLOCK with the Custom Css Class name: countries

In the textblock i put something like that:

I created a Quick CSS, like that:

.avia_textblock.countries ul li>a {
display:table;
width:126px;
color:#666;
}
.avia_textblock.countries ul li span{
display:table-cell;
width:86px;
vertical-align:middle;
}
.avia_textblock.countries ul li span span{
width:100%;
*display:block;
*position:relative;
*top:-50%;
}
.avia_textblock.countries ul li>a:hover {
color:#08c;
}

But the end result was considerably different. Do you have any suggestions?

Thanks and a happy new year.

December 20, 2013 at 11:50 pm #202738

In reply to: Enfold Feature Requests

ashpacas

Hello,
1. I would like to offer to add one small, but useful function – “read more” tag. WP has it by default, but it does not seem to be working with Avia builder.
2. Adding ability to zoom photo (lightbox element) on click in easy slider (and other sliders) would be very nice
3. Global setting of padding between Avia elements would be useful
4. Ability to use “color section’s” options on all Avia elements (1/5, 1/4, etc.) would be very good too, for example to add column without padding, with unique background without playing with CSS
5. Think about nice effect on hovering on linked image (for example – small zoom, like masonry gallery) – this would be beautiful :) Maybe even adding CSS section in image’s placeholder, to be able to add CSS effect by hand, or choose from preloaded ones.
6. Secondary menu styling is pretty raw for now, only customizing CSS is helping and even this is not helping 100%, it would be great to give every menu level it’s own class, or maybe even some preloaded CSS options, like gaps, backgrounds, font colors and sizes.
That’s it for now. I have analyzed this skin pretty deeply and all these functions really would be great if implemented in some time :)
Hoping that you will like at least some of my ideas.

This reply was modified 12 years, 1 month ago by ashpacas.

December 20, 2013 at 7:13 am #202465

In reply to: un-link pictures in ajax portfolio image lists

Hi nini_bacher!

Edit config-templatebuilder > avia-shortcodes > portfolio.php, find this code on line 642:

$output .= " <a href='".$img[0]."' class='portolio-preview-list-image' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";

Replace it with:

$output .= " <a href='".$img[0]."' class='portolio-preview-list-image noLightbox' title='".$description."'><img src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";

Remove browser cache then reload the page. You can also add this on your custom.css or Quick CSS to disable the image link entirely:

.portolio-preview-list-image {
pointer-events: none;
}

Cheers!
Ismael

December 14, 2013 at 9:53 pm #200274

Topic: Logo does not resize on mobile

in forum Enfold

bogosavljev

Participant

Hello,

I have two problems with my logo. I’m using fixed header with height of 130px and One page Portfolio type of Home page.

1. When you start scroll down, logo is shrinking to height of 54px and then jump to 90px (I have change avia.js, read below), and should stay at 90px.
2. When I check site on mobile, logo is not resized to smaller size, remain big but cut off.

My logo is 489×118 and I have add this in custom.css:

#header_main .container, .main_menu ul:first-child > li a {
    height: 130px;
    line-height: 130px;
}

.fixed_header #main {
    padding-top: 130px;
}

In /js/avia.js I have change this:

if(st < el_height/1.4) // was 2
                {
                    newH = el_height - st;
                    header.removeClass('header-scrolled');
                }
                else
                {
                    newH = el_height/1.4; // was 2
                    header.addClass('header-scrolled');
                }

Also, I have try this solution:
https://kriesi.at/support/topic/change-logo-image-for-scrolled-header/#post-188003

for

el_height       = $(elements).filter(':first').height(),

el_height       = 130,

but non of them didn’t work for me. Test site is here – http://dev.bogosavljev.com/
Any help on this?

This topic was modified 12 years, 1 month ago by bogosavljev.

December 13, 2013 at 9:11 am #199808

In reply to: menu color

Hey kecster2!

Edit header.php, find this code:

/*
                            * Hook that can be used for plugins and theme extensions (currently: the wpml language selector)
                            */
                            do_action('avia_meta_header');
                        echo '</nav>';

Below, add this code:

echo "<div class='header-buttons'>";
						echo "<a href='' class='header-button header-chat'>LIVE CHAT Online</a>";
						echo "<a href='' class='header-button header-contact'>Contact Us</a>";
						echo "</div>";

Edit Quick CSS or custom.css then use this

.header-buttons {
position: absolute;
right: 0;
border: none;
}

.header_color .header-buttons a {
display: block;
padding: 5px 10px 5px 20px;
float: left;
color: white;
}

.header-buttons a.header-contact{ background: green url(ICON URL HERE) left center no-repeat; }
.header-buttons a.header-chat{ background: blue url(ICON URL HERE) left center no-repeat; }

You need to provide your own icon image as background. It should be transparent.

Regards,
Ismael

December 6, 2013 at 6:19 am #196875

In reply to: Custom background image for bottom footer behind copyright text

Hey!

Edit footer.php, find this code on line 93:

<footer class='container_wrap socket_color' id='socket' <?php avia_markup_helper(array('context' => 'footer')); ?>

Add this code below:

<div class="socket-background"></div>

Add this on Enfold > Styling > Quick CSS:

.socket-background {
	height: 50px;
	background: red;
}

Replace the background with your background image.

Best regards,
Ismael

October 30, 2013 at 3:32 am #182319

In reply to: Add social share functions to light boxes and theme in general

Hi hodgsondesign!

You need to manually add the social buttons and provide the images. Edit js > avia.js, find this code:

elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, overlay_gallery:false, default_width: ww, default_height: wh });

For example, we will add a facebook button. Replace the code above with this:

elements.prettyPhoto({ social_tools:'<div class="pp_social"><div class="facebook"><a href="facebook.com" class="facebook-button"></a></div></div>',slideshow: 5000, deeplinking: false, overlay_gallery:false, default_width: ww, default_height: wh });

Add this on your custom.css or Quick CSS:

.pp_social .facebook .facebook-button {
display: block;
width: 20px;
height: 20px;
background: red;
position: relative;
margin-top: -15px;
}

.pp_social .facebook {
overflow: visible;
}

You can replace the background with the facebook icon and replace the url with your account.

Cheers!
Ismael

October 28, 2013 at 2:15 am #181336

In reply to: Image hover and mainpage post grid

Hey msfoto!

1.) Add this on your custom.css or Quick CSS:

.image-overlay {
display: none !important;
opacity: 0 !important;
}

2.) You can edit config-templatebuilder > avia-shortcodes > postslider.php, find this code:

  if($show_meta && !empty($excerpt))
					{
						$output .= "<div class='slide-meta'>";
						if ( $commentCount != "0" || comments_open($the_id) && $entry->post_type != 'portfolio')
						{
							$link_add = $commentCount === "0" ? "#respond" : "#comments";
							$text_add = $commentCount === "1" ? __('Comment', 'avia_framework' ) : __('Comments', 'avia_framework' );

							$output .= "<div class='slide-meta-comments'><a href='{$link}{$link_add}'>{$commentCount} {$text_add}</a></div><div class='slide-meta-del'>/</div>";
						}
                        $markup = avia_markup_helper(array('context' => 'entry_time','echo'=>false));
						$output .= "<time class='slide-meta-time updated' $markup>" .get_the_time(get_option('date_format'), $the_id)."</time>";
						$output .= "</div>";
					}

Regards,
Ismael

October 18, 2013 at 1:18 pm #177361

In reply to: Avia image hover -> use own images for hover state

Adenadoume

thx for the reply, site is not live and since I have a deadline till Monday so am still trying different approaches

My FINAL approach which gives me EXACTLY the results I want is usng product grid and show only image + hover via custom css class.

WHAT I NEED is to replace link & URL of these “products” so they be used as images that link to pages

Thank you in advance!!!

P.S.
If you have a better/faster approach please advise, I include Layotut of main page (3 column Layout, images lead to pages, with different image on hover)
http://i.imgur.com/6mTCRPY.png
http://i.imgur.com/6mTCRPY.png

This reply was modified 12 years, 3 months ago by Adenadoume.

October 18, 2013 at 9:56 am #177313

In reply to: Handful of questions – Bullets, Hovers, Banners…

Dude

Hi!

1) You can change the border width with following css code


#top .header_color .avia_mega_div > .sub-menu, #top .main_menu ul:first-child >li > ul {
border-top-width: 4px!important;
}

2) Yes, custom fields would be a solution but it requires some custom code. Depending on what you need I recommend to to hire a freelancer. You can use the ava_after_main_menu action (see: http://codex.wordpress.org/Function_Reference/add_action ) to output the code. The advantage would be that you can place the banner image code into a child theme file.

3) I think the “text shift” is caused by an unnecessary br tag in the html source. I think WP adds it because of the script tag. Try to place the js scripts into the same line like the image link – i.e.


<p>
<a class="wistia-popover[height=540,playerColor=7b796a,width=960]" href="http://fast.wistia.net/embed/iframe/tyg8zrndv4?popover=true" style="position: relative; overflow: hidden; display: block;"><img style="border: 1px solid black;" alt="" src="http://embed.wistia.com/deliveries/b47d9488778804ce44807dffedc629c202ee909e.jpg?image_play_button=true&image_play_button_color=7b796ae0&image_crop_resized=282x159" width="282" height="159"><span class="image-overlay overlay-type-extern" style="opacity: 0; left: 0px; top: 0px; display: block; height: 151px; width: 267px;"><span class="image-overlay-inside"></span></span></a>
<br>
<script charset="ISO-8859-1" type="text/javascript" src="http://fast.wistia.com/assets/external/popover-v1.js"></script>
</p>

should turn into:


<p>
<a class="wistia-popover[height=540,playerColor=7b796a,width=960]" href="http://fast.wistia.net/embed/iframe/tyg8zrndv4?popover=true" style="position: relative; overflow: hidden; display: block;"><img style="border: 1px solid black;" alt="" src="http://embed.wistia.com/deliveries/b47d9488778804ce44807dffedc629c202ee909e.jpg?image_play_button=true&image_play_button_color=7b796ae0&image_crop_resized=282x159" width="282" height="159"><span class="image-overlay overlay-type-extern" style="opacity: 0; left: 0px; top: 0px; display: block; height: 151px; width: 267px;"><span class="image-overlay-inside"></span></span></a> <script charset="ISO-8859-1" type="text/javascript" src="http://fast.wistia.com/assets/external/popover-v1.js"></script>
</p>

If this doesn’t work because of whatever reason try to add following code to the quick css field


.home .flex_column .iconbox_content p br{ display: none; }

4) Try following css code – it should replace the rectangles with bullets


.avia-bullet {
border: 2px solid !important;
border-radius: 2px;
}

Best regards,
Peter

October 15, 2013 at 5:41 pm #175974

In reply to: Color Section Opacity

Devin

Inactive Moderator

Hi!

You could probably do it using rgba colors for the background of a text element. You would put your image in the color section and then add your elements in there. Then add a custom class name to the elements and give that class a background color using rgba and the transparency on the color.

Add this to your functions.php to get the custom class field on all elements: add_theme_support('avia_template_builder_custom_css');

Regards,
Devin

October 15, 2013 at 4:16 pm #175925

In reply to: Avia image hover -> use own images for hover state

Adenadoume

http://imgur.com/delete/LRnEpEUUutYe0wR

OK so I had some success..
In the avia builder I select a transparent png image then I assign a custom class

In my Css I use background image and indeed it works, so I have one image for normal state and one for hover.

BUT…. there is a scaling problem especially when screen goes inbetween 768-989 pixels:

The images are not centered or scaled correctly

I attach a screenshot where the first 2 rows have my images and the last is a normal image from avia builder.

Any suggsestions woul be very welcome..

October 15, 2013 at 9:06 am #175514

Topic: Avia image hover -> use own images for hover state

in forum Enfold

Adenadoume

Participant

Hi,

Am trying to use a custom image to appear on hover when inserting an image with avia builder.

When I insert my own images with hover they are not responsive – I woul like to keep the responsive behaviour of the avia_image

Here’s my apporach so far:

Have removed the image hover effects from js/avia.js

I use a custom class for each image I insert so I can target each image in my css

e.g. .avia_image.imagecustomclass img:hover

I can add hover effects like custom icon, change color, opacity etc but cannot replace the image.

Could you tell me if am approaching this correctly, or maybe try javascript onmouseover?

Cheers

October 11, 2013 at 4:05 am #173943

In reply to: Image positioned absolutely not displaying on Firefox and IE

Hello!

1.) Refer to the number 2.

2.) Edit header.php, find this code:

<div id='header_main' class='container_wrap container_wrap_logo'>

Below, add the image:

<img class="avia_image register-banner" src="http://www.encoure.com/private/wp-content/uploads/2013/04/reg_button_small.png" alt="" title="">

Add this on your custom.css or Quick CSS:

#header_main {
z-index: 999;
}

.avia_image.register-banner {
position: absolute;
right: 10%;
top: -50px;
}

3.) You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like Text Block then scroll below. Add a unique css selector on “Custom Css Class” field.

Cheers!
Ismael

October 6, 2013 at 9:52 am #171085

In reply to: IE8 Issues + others?

Hi!

You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit the Color Sections that you want to the shadow1 image as background then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “section-shadow1”.

You can add something like this on your custom.css or Quick CSS:

.section-shadow1 {
background-repeat: no-repeat;
background-image: url(https://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg);
background-attachment: scroll;
background-position: top center;
background-color: #ffffff;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale');
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://www.kimberfire.com/wp-content/uploads/2013/04/shadow1.jpg', sizingMethod='scale')";
}

Only those section with the class section-shadow1 will have the background.

Best regards,
Ismael

September 23, 2013 at 10:38 pm #165332

In reply to: Changing the Header Add an Extra DIV

infiniteloop

http://entreventos2.lafabricadigital.com.mx/

Hi Guys!

I’ve got my site online:

Issues I’m having trouble with:

1. Menu Links: Placing cursor exactly over links does not work. Link is below type.

2. I used a smaller logo (227 x 123px) than the recommnded maximum size on the administrator theme options which is 340 x 156 px, nevertheless logo keeps resizing. I don’t want that because it loses resolution, original size is -almost- pixels perfect :)

3. On resposive, logo falls over my <div id=header-top>, also breadcrumbs and main container are not where they should be, For sure is the margin I’m using in desktop viewport.

4. Fixed Header with social icons and links falls over header-top image. Maybe client would request taht in the near future.

Maybe making header-top image responsive (reducing size as viwport changes) would help?

Here is the code:

Header.php

<div id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>'>
        
        <!-- This is my extra div element-->	
        <?php echo '<div class="header-top"></div>'; ?>
        <!-- Ends extra div element-->

		<?php

		$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');

		//subheader, only display when the user chooses a social header
		if(strpos($headerS,'social_header') !== false)
		{
		?>

Custom CSS:

.container_wrap {
    border-top: none;
}
.header-top {
	position: relative;
	z-index: 400;
	width: 100%;
	height: 80px;
	background-color: transparent;
	background-attachment: scroll;
	background-image:url(../../themes/enfold-child/images/header_image_2.png);
	background-position: center top;
	background-repeat: no-repeat;
        margin-bottom: -50px;
}

.title_container{
        margin-top: 35px;
}

Needless to say I’m not sure if I’m doing this the right way. I’ll appreciate your help a lot.

Thank you, regards.

September 15, 2013 at 8:22 pm #141252

In reply to: Is there any way to prevent scaling of images?

Hey,

You can add a unique selector for each Avia Elements if in case you’re using the Image element via Advance Layout Editor. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the Image element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image”.

You can add something like this on your custom.css or Quick CSS:

.avia_image.awesome-image {
width: 100px;
height: 100px;
position: absolute;
right: 0;
top: 0;
}

Regards,
Ismael

September 14, 2013 at 7:19 am #141031

In reply to: Allowing images to float above and not confine.

cyrusis

Hi again Ismael,

This doesn’t seem to be working when I add more than one picture,

I’ll make custom css class such as these:

mainpage-imageone

mainpage-imagetwo

mainpage-imagethree

Then I will assign the three images these in the quick CSS:

.avia_image.mainpage-imageone {

position: absolute;

left: -50px;

top: -100px;

}



.avia_image.mainpage-imagetwo {

position: absolute;

left: -50px;

top: -100px;

}



.avia_image.mainpage-imagethree {

position: absolute;

left: -50px;

top: -100px;

}

The first image functions and displays. The second and third images don’t display at all, I even tried chaning the name of the Custom CSS Class.

September 14, 2013 at 1:35 am #141029

In reply to: Allowing images to float above and not confine.

Hey,

You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the Image element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image.

You can add something like this on your custom.css or Quick CSS to move the image around.

.avia_image.awesome-image {

position: absolute;

left: -50px;

top: -100px;

}

Regards,

Ismael

September 11, 2013 at 5:19 am #140080

In reply to: Logo/partner element & Content Slider

Dude

The difference is that the image sliders and the post sliders do not support custom content. The image slider can just display images with captions, the post slider can display posts. The content slider allows you to slide any text or content (including shortcodes) – many users requested this feature and thus we decided to implement it.

2) No, you can’t hide the space by default. If you want to hide it open up wp-contentthemesenfoldconfig-templatebuilderavia-shortcodescontentslider.php and replace

$output .= "<div class='avia-smallarrow-slider-heading'>";

$output .= "<div class='new-special-heading'>".$heading."</div>";

with

$heading_class = '';

if($navigation == 'no') $heading_class .= ' no-content-slider-navigation ';

if($heading == '&nbsp;') $heading_class .= ' no-content-slider-heading ';



$output .= "<div class='avia-smallarrow-slider-heading $heading_class'>";

$output .= "<div class='new-special-heading'>".$heading."</div>";

The use following css code to hide the space if no title & control buttons are set

.no-content-slider-navigation.no-content-slider-heading{

display: none;

}

September 9, 2013 at 1:41 am #140141

In reply to: Text based title, no Logo

Hi,

Edit header.php, find this code:

echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

Replace it with:

echo '<h1 class="logo">';

echo bloginfo('name');

echo '</h1>';

Add this on your custom.css or Quick CSS:

.logo {

top: 40px;

}

Regards,

Ismael

September 8, 2013 at 11:54 pm #140139

In reply to: image positioning

Hey,

You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Insert the “Image” element then add Custom Css Class. For example, add “awesome-image”.

You can add something like this on your custom.css or Quick CSS to move them up or down.

.avia_image.awesome-image {

top: -50px;

}

Regards,

Ismael

August 31, 2013 at 4:14 pm #138592

In reply to: Facebook Like Button

Hey,

Edit header.php, find this code:

<?php

/*

* Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)

*/

do_action('ava_main_header');



?>



<div class='container'>

Below, add the fb code:

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="true" data-send="true"></div>

Edit footer.php, find this code:

<![endif]-->

<?php

echo "<div class='bg_container' style='background-image:url(".$avia_config['fullscreen_image'].");'></div>";

}

?>

Add the fb script:

div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Then add this on your Quick CSS or custom.css to adjust the position of the widget.

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {

position: absolute;

right: 0;

top: -10px;

}

It is better if you use a non-fixed header for this.

Regards,

Ismael

August 30, 2013 at 1:31 pm #138229

In reply to: Avia Layout Builder (Advanced Layout Builder) buggy

Devin

Inactive Moderator

Hi kellymarie2001,

Generally no, it isn’t supposed to be buggy.

Working with it is a bit different than with the regular visual editor however so it takes a bit to get used to doing layouts with all of the elements instead of just with the text item.

Eg, if you are trying to do a layout with images and text its better to use the columns with text elements and image element instead of dropping the images into the text editor.

For the spacing on items, the special headers have customizable padding but most other items are set via css theme wide.

You can add this to your functions.php to give every element its own class field so you can easily add custom classes which tends to be where you can start getting deep customization:

add_theme_support('avia_template_builder_custom_css');

Regards,

Devin

August 21, 2013 at 5:18 am #136474

In reply to: Positioning shortcodes in Header.php

Hi,

Edit header.php, find this code:

echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

Below, add this code:

echo '<div class="mc4wp-form">'.do_shortcode('[mc4wp-form]').'</div>';

Edit Quick CSS or your custom.css, add this code:

.mc4wp-form {

position: absolute;

left: 300px;

top: 60px;

}

Adjust the left and top position.

Regards,

Ismael

August 7, 2013 at 9:31 am #27340

Topic: Update Documentation

in forum Enfold

Cliffy

Participant

Hi, I am pretty new to all this WP and theme stuff. Have built a couple of sites but class myself as a real novice. I am loving this Enfold Theme though, really easy to use. However, I just received an email to say there is an update. Do I downloaded the whole theme again and opened the Version.txt file. PLEASE can I ask that you format this in some way? …

Oh I just pasted some of the text and it formats itself here lol. OK will paste it into Word in the future.

Q: Is the only way to update via FTP ?

Q: If updating a Folder, I replace the whole folder right?

Q: How do I tell which version of the theme I currently have installed?

Q: I installed on WP 3.6 – am just using basic functions at the moment so presume I can carry on until you have a 3.6 update and don’t really need to bother with this current one?

Thanks, great theme !

2013 August 6 – Version 1.9.1

please update:

– style.css – new version number

– functions.php – theme uses the wordpress 3.6 media scripts now

– css/shortcode.css – fixed a styling problem with the new video shortcode

– js/shortcode.js – fixed an easyslider problem introduced with WordPress 3.6

2013 August 6 – Version 1.9

please update:

– style.css – new version number

– css/layout.css – various small fixes

– functions.php

– functions-enfold.php

– includes/helper-responsive-megamenu.php

– includes/helper-conditional-megamenu.php

– config-woocommerce/config.php – fixed bug with 404 page

– config-woocommerce/admin-options.php – Added layout options (header, footer etc)

– config-bbpress/bbpress-mod.css – improved bbpress forum widget stylings

folders to update:

-folder js:

-fixed a bug with the easy slider not rotating properly

-folder config-templatebuilder:

– fixed: a bug that prevented the layoutbuilder from showing

– fixed: a bug that occurs with custom css label and image element

– fixed: a bug with the gallery caption

-folder framework:

-fixed: required symbol for date input field

-added: theme support flag for conditional menu:

add_theme_support(‘avia_conditionals_for_mega_menu’);

using the flag will enable conditional logic for menus

(you can show/hide menu items based on user level, login, current page, etc)

July 31, 2013 at 4:17 am #132245

In reply to: How to add Enfold Menu to non-WordPress pages?