-
Search Results
-
Hi all,
when I add a promobox, in certain conditions, a </p> tag is added without any opeing <p>, and in nosense places (for instance, at the beginning of the box). The w3 validator detected it.To be honest, I don’t know if I’m doing something wrong, or how critical this is. The browser did not complained.
This is the code generated (simplified):
<div class='av_promobox avia-button-yes avia-builder-el-9 el_after_av_one_half el_before_av_textblock '> <div class='avia-promocontent'> </p> <h2>Title</h2> <p>text</p> </div> <div class='avia-button-wrap avia-button-right '><a href='...' class='avia-button avia-icon_select-yes avia-color-blue avia-size-large avia-position-right ' ><span class='avia_button_icon' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span><span class='avia_iconbox_title' >PRESS ME</span></a> </div> </div>And this is the shortcode (copied from the debug box):
[av_promobox button='yes' label='PRESS ME' link='page,332' link_target='' color='blue' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='yes' icon='ue86d' font='entypo-fontello'] <h2>Title</h2> Text [/av_promobox]I have troubleshoot that, if the text start by a paragraph and not by a header, it does not happen.
Should I change anything or forget about it?
thnx in advance
In reply to: Child doesn't apply on Firefox and Internet Explore
Topic: promobox in sidebar
hello devs,
i put a promo box inside a text box in the sidebar of my blog. here’s the code i put in the widget:<div class="av_promobox avia-button-yes avia-builder-el-28 el_after_av_hr avia-builder-el-last "> <h4>EASY BACKUPS MADE SAFE.</h4> CloudAlly provides online secured daily backups for Office 365, Google Apps, SharePoint, Salesforce and more. Backup all your data online in one place..<br><br> <div class="avia-button-wrap avia-button-center "><a href="" class="avia-button avia-icon_select-no avia-color-custom avia-size-large avia-position-center " style="background-color:#f3ae08; border-color:#f3ae08; color:#444444; "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Sign up now</span></a></div> </div></div>as a result, the other widget elements (i have search widget, recent posts widget, category widget) are loosing their left padding and now are sticking to the sidebar vertical line. how can i get them to be with the same padding they were prior to my adding the promo box?
p.s: this is not causing the problem, but i thought i might mention: in the quick css i put this code to make the button to be below the text (otherwise it is placed on top of the text):
.widget .av_promobox .avia-button-wrap .avia-button { float: none !important; position: static !important; margin-top: 0 !important; }Hi, I don’t really know what the problem is, but my clients site looks really bad in IE8/9 browsers…
I wasn’t really aware of that, but some of their customers have been complaining about blue/pinkish links on dark red background.It’s header that is spilling out the main color in the background instead of white that is normal in header. It looks like the header is transparent in IE.
Also, the table in the footer is light blue in those browsers, and that is really weird.
Icons in those iconboxes are kinda terrible too.Have I done something stupid (not impossible by any means ;) or is there a bug lurking somewhere?
FYI, there is also an issue with duplicate id’s when I used main (top) menu in footer/socket area too… So I just made another menu that is an exact copy of top-level one and now it’s OK. I thought you’d want to know and address the issue if possible. I guess there are many sites that just have it like that.
Anyway, thanks for the lovely theme, I’ll be upgrading WP to v.4.x and the theme to latest version during the weekend. it’d be nice to have IE problem solved too…
Have a good one
DamirIn reply to: Iconbox in mobile view
Hi!
After adding the code to functions.php file you should see custom CSS class field – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/blur.jpg
You can follow the instructions i posted here – https://kriesi.at/support/topic/iconbox-in-mobile-view/#post-336807
and display different icons on mobileBest regards,
YigitIn reply to: Iconbox in mobile view
Hey!
You can now add custom css class on the iconbox elements. Meaning, you need to create two iconboxes then add a custom css class on both of them. Use media queries as suggested above to show the other iconbox while hiding the other one vice versa.
Best regards,
IsmaelIn reply to: Iconbox in mobile view
Hi aadler!
Please change following code
@media only screen and (max-width: 480px) { .logo a { top: 15px; } }to following one
@media only screen and (max-width: 768px) { .logo a { top: 15px; } }Then turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and add another iconbox element which displays icons on the left side and give it a class “mobile-iconbox” and give the iconbox element with icon on top “desktop-iconbox” and then add following code to Quick CSS field
@media only screen and (max-width: 768px) { .desktop-iconbox { display: none !important; }} @media only screen and (min-width: 769px) { .mobile-iconbox { display: none !important; }}Regards,
YigitHi!
Thank you for the update.
Please try to add this on Quick CSS or custom.css:
.avia-slideshow-inner li{ -webkit-transform-style: preserve-3d; /*fixes flickering issue when slider moves. usually other elements in other container flicker */ }Remove browser cache then reload the page. If it’s not enough, add this:
.avia_textblock, .avia-icon-list, .avia-button, .avia-testimonial, .iconbox, .avia_message_box, .avia-team-member, .widget, .post, .team-img-container img, .team-social, .iconlist_icon, .fallback-post-type-icon, .fullsize .related_posts, .grid-image, .avia-caption-content, .avia-caption-title, .entry-content-wrapper, .avia_start_animation { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }I hope that fix the issue.
Best regards,
IsmaelIn reply to: Icon Boxes overlapping on mobile devices
Hi wpstarter!
Thank you for using Enfold.
Please use this on Quick CSS or custom.css:
@media only screen and (max-width: 767px) { .iconbox_top .iconbox_content { margin-bottom: 10px; } }Best regards,
IsmaelIn reply to: Icon box styling
Hi Peter, thanks for your reply. I’ve tried adding a custom css class to the icon box and it works but my class and CSS:
#top .iconbox_top_metod {
text-align: right;
}
is overruled by the original
#top .iconbox_top {
text-align: left;
}
Am I missing something? Hope you can help
/MichaelIn reply to: change background colour of an icon box
I thougt I might have screwed something up with the child theme, so in my test system I newly instaled the child theme. the only entry in the function.php is now
add_theme_support('avia_template_builder_custom_css');The only entry in the style.css in the enfold-child-folder is now:
.ek_ibbgc1 .iconbox_top .iconbox_content { background-color: red !important; }And still nothig changes. Both icon boxes at dev1.sansolum.de is the css custom class ek_ibbgc1 assigned.
user:guest
pw:guestIn reply to: change background colour of an icon box
Hi Erich!
You can turn on Custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your iconbox element a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab
.your-custom-class .iconbox_top .iconbox_content { background-color: red !important; }Best regards,
YigitIn reply to: Socket image border + iconbox problem
Hi macondo-group!
1- Please edit your image file and remove border. It is not possible to remove that border using custom CSS
2- Please add following code to Quick CSS as well.iconbox_left .iconbox_icon { width: 30px; height: 30px; padding: 5px; }Cheers!
YigitHey guys,
a client’s “lovely” designer wants boxes to look like the attached picture which will go on the frontpage (the size of a third):-
Having scoured shortcodes I see the advice is to stay away from creating more shortcodes… so I added a code block with the following code:<div class="shadow-orange" style="border: 3px solid #fe9763; color:#fe9763; padding:50px 30px 78px 30px;"> <span style="font-size:40px; font-weight:bold;">PRIVAT</span> <p></p> <p></p> <p></p> <div style="color:#fff; padding:50px 0px 100px 0px;"> <span style="font-size:20px; font-weight:bold; background-color:#BCBCB2;">RO OVERSKUD OG ØGET LYKKEFØLELSE</span> </div> <a class="avia-button avia-icon_select-no avia-color-custom avia-size-medium avia-position-right" style="background: none; color:#fe9763; font-size:23px;" href="http://www.god-dag.dk/foredrag/kurser-private"> <span class="avia_iconbox_title">LÆS MERE</span> </a> </div>It worked but the text is not responsive! Could you advice me what I’ve done wrong??? LINK TO PAGE
Thank you very much for your help!
Hi there,
i have two different questions regarding a website i am currently building using enfold.
1. I want do remove the border/padding of the Custom Background Image i uploaded for the socket. Could you provide me with a piece of code for Quick CSS?
2. As you can see on the front page, i was able to change the icon background color for the icon box but the icons are not shown correctly. is there a bug or did i make a mistake?
thank you in advance and kind regards
Malte
In reply to: Enfold Subtle
Hi schuttjon!
Thank you for using Enfold.
You want the button title and icon change to black? Use this on Quick CSS or custom.css:
span.avia_button_icon { color: #666666; } span.avia_iconbox_title { color: #666666; }Best regards,
IsmaelPeople who visit my site are now greeted with big white screen of nothing.
My Full width slider on Frontpage is completely blank. Also, I now have opacity coving my frontpage slider images, this never happened before
The problem occurred after I upgrade to WP4 and Enfold 2.9.2
What can you do to help me out ?
I hope when I upgraded to enfold 2.9.2 that you did not overwrite custom.css did you ?
My guess it must have something to do with CSS that you have provided me with in the past>
General styling
.iconbox .iconbox_content .iconbox_content_title { margin: 0 0 0px 0 !important; }
.iconbox_top .iconbox_content { padding-top: 30px !important; }
#top .iconbox_top { margin-top: 0px!important; }.av_header_transparency .logo { opacity: .95; }
.logo { opacity: .95; }thanks
In reply to: Problemas con "caja con icono"
Hola Jose,
Esa opción no existe, sin embargo si activas esto puedes lograrlo via CSS.
Digamos que tienes un icon box con clase “rojo”, con este CSS su icono se volverá rojo:
.rojo .iconbox_icon { background: red !important; }Lo mismo para modificar el tamaño del titulo:
.titulo-grande .iconbox_content_title{ font-size: 22px !important; }Puedes setear multiples clases a un mismo elemento:
rojo titulo-grande
Saludos,
JosueI have a color scheme (on the frontpage) with an image background. (I refer to the section directly under the sliders with the 8 iconboxes “TAG MEDITATION TIL ET DYBERE NIVEAU”).
No matter what settings, every time it loads in a browser it shows the image as background for the rest of the page. If I press f5 it will bounce back. This is no good because a customer will not think of that and when they arrive it gives a bad impression and looks a mess. (I have also cleared all my cookies so I get a clean test)
SEE LINK:Henningdaverne.dkIn reply to: Change font of menu and buttons
Hey vanderburg!
Thank you for using Enfold.
Please use this on Quick CSS or custom.css:
span.avia_iconbox_title { font-family: 'Oswald', sans-serif; font-size: 15px; }Add this on functions.php:
function oswald_font() { ?> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <?php } add_action('wp_head', 'oswald_font');Cheers!
IsmaelHey!
You can turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and then give your iconbox element a custom class and then add following code to Quick CSS in Enfold theme options under General Styling tab
.custom-iconbox .iconbox_icon:before { display: none; } .custom-iconbox .iconbox_icon { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }Best regards,
YigitIn reply to: Iconbox + picture above
Hey Matthieu!
You can put whatever you want as the custom class, but what you put there must be the same declared in the code, example if i put something like “josue_iconbox”:
.josue_iconbox .iconbox_top:before { content: ""; width: 100%; background: url(put_background_image_here) no-repeat center top; background-size: cover; height: 60px; /* change this for the height of your preference */ position: absolute; top: -61px; /* change this for the height of your preference */ left: 0; }In the actual code properties the only thing you need to change is the background: url(..) and the height/top if needed.
Cheers!
JosueIn reply to: Iconbox + picture above
Hi Josue,
Thanks for your fast answer !
I ever enable it, i use this AVIA function for other elements.
I work in local, but could I upload it tomorrow when i go back to home.Just about my last questions, could i put the same script as you give me or have I to change other element than background link ?
What “name” of class have I to put in AVIA custom class ? I tried with “iconbox_top”, is it that ?
Should I put someting in “content” line of the script or i use like this with content: ” “; ?Again, thanks a lot !
Best regards,
MatthieuIn reply to: Iconbox + picture above
Hey Matthieu!
Can you post a link to the page where you are trying this?
Remember that you need to enable this first and set a class of “custom_class” to the iconbox elements you want to affect.
Best regards,
JosueIn reply to: Iconbox + picture above
Hi Josue !
Thank you very much for your answer, i tried but it’s not working in my website.
I put your code in custom-css (and i tried too in Quick css) with an absolute url for my picture to be sure
I called “iconbox_top” in AVIA in custom class of my iconboxShould I change .custom_class ? (by example something like that : .iconbox .iconbox_top:before { )
Should i put something in content: “_here_?_”;Thanks a lot !
Regards,
MatthieuIn reply to: Iconbox + picture above
Hey Matthieu!
You’d need to use CSS for that, something like this in Quick CSS will do it (i’m supposing you set a custom class to the iconbox):
.custom_class .iconbox_top:before { content: ""; width: 100%; background: url(put_background_image_here) no-repeat center top; background-size: cover; height: 60px; /* change this for the height of your preference */ position: absolute; top: -61px; /* change this for the height of your preference */ left: 0; } /* Global */ .iconbox_top { position: relative; }Regards,
JosueIn reply to: Iconbox background colour
Hey Nick!
Enable this, set a custom class (ex: red_iconbox) to the icon box and then add this to the Quick CSS:
.red_iconbox .iconbox_icon { background: red !important; }Cheers!
JosueIn reply to: Full Page Background Image
Hey!
I’m sorry but we really need to see the layout of the theme via screenshot or image. You can drop the screenshot here using imgur, dropbox etc. You can add this on Quick CSS or custom.css to remove the background of all sections or container:
.alternate_color, .alternate_color .site-background, .alternate_color .first-quote, .alternate_color .related_image_wrap, .alternate_color .gravatar img .alternate_color .hr_content, .alternate_color .news-thumb, .alternate_color .post-format-icon, .alternate_color .ajax_controlls a, .alternate_color .tweet-text.avatar_no, .alternate_color .toggler, .alternate_color .toggler.activeTitle:hover, .alternate_color #js_sort_items, .alternate_color.inner-entry, .alternate_color .grid-entry-title, .alternate_color .related-format-icon, .grid-entry .alternate_color .avia-arrow, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery img, .alternate_color .grid-content, .alternate_color .av-share-box ul, #top .alternate_color .av-related-style-full .related-format-icon, .alternate_color .related_posts.av-related-style-full a:hover, .alternate_color.avia-fullwidth-portfolio .pagination .current, .alternate_color.avia-fullwidth-portfolio .pagination a, #main, .html_stretched #wrap_all, .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a, .header_color table, .header_color .widget_nav_menu ul:first-child>.current-menu-item, .header_color .widget_nav_menu ul:first-child>.current_page_item, .header_color .widget_nav_menu ul:first-child>.current-menu-ancestor, .header_color .pagination .current, .header_color .pagination a, .header_color.iconbox_top .iconbox_content, .header_color .av_promobox, .header_color .toggle_content, .header_color .toggler:hover, .header_color .related_posts_default_image, .header_color .search-result-counter, .header_color .container_wrap_meta, .header_color .avia-content-slider .slide-image, .header_color .avia-slider-testimonials .avia-testimonial-content, .header_color .avia-testimonial-arrow-wrap .avia-arrow, .header_color .news-thumb, .header_color .portfolio-preview-content, .header_color .portfolio-preview-content .avia-arrow, .header_color .av-magazine .av-magazine-entry-icon, .header_color .related_posts.av-related-style-full a, .header_color .aviaccordion-slide, .header_color.avia-fullwidth-portfolio .pagination, .header_color .isotope-item.special_av_fullwidth .av_table_col.portfolio-grid-image, .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .footer_color, .footer_color .site-background, .footer_color .first-quote, .footer_color .related_image_wrap, .footer_color .gravatar img .footer_color .hr_content, .footer_color .news-thumb, .footer_color .post-format-icon, .footer_color .ajax_controlls a, .footer_color .tweet-text.avatar_no, .footer_color .toggler, .footer_color .toggler.activeTitle:hover, .footer_color #js_sort_items, .footer_color.inner-entry, .footer_color .grid-entry-title, .footer_color .related-format-icon, .grid-entry .footer_color .avia-arrow, .footer_color .avia-gallery-big, .footer_color .avia-gallery-big, .footer_color .avia-gallery img, .footer_color .grid-content, .footer_color .av-share-box ul, #top .footer_color .av-related-style-full .related-format-icon, .footer_color .related_posts.av-related-style-full a:hover, .footer_color.avia-fullwidth-portfolio .pagination .current, .footer_color.avia-fullwidth-portfolio .pagination a { background: transparent !important; }Regards,
IsmaelIn reply to: how to add button to layered slider
Unfortunately the only way to do that is to write custom css for their responsiveness.
You could try copying out the html that is generated by the buttons and see if LayerSlider is able to grab and modify it then. Ex:
<div class="avia-button-wrap avia-button-right "><a href="http://www.mangolanguages.com/libraries/" class="avia-button avia-icon_select-no avia-color-custom avia-size-large avia-position-right " target="_blank" style="background-color:#ffc425; border-color:#ffc425; color:#ffffff; "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">FOR PUBLIC LIBRARIES</span></a></div>and the next button:
<div class="avia-button-wrap avia-button-right "><a href="http://www.mangolanguages.com/academic/" class="avia-button avia-icon_select-no avia-color-custom avia-size-large avia-position-right " target="_blank" style="background-color:#8dbe3a; border-color:#8dbe3a; color:#ffffff; "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">FOR ACADEMIC LIBRARIES</span></a></div>In reply to: fade-in icon boxes, text, etc
Hey!
Once again, i am very sorry for the trouble but it was not intended.
Please add following code to Functions.php filefunction add_custom_iconbox(){ ?> <script> jQuery(window).scroll(function() { var st=jQuery(window).scrollTop(); jQuery('#top .iconbox_top').animate({opacity: st/100},1); }); </script> <?php } add_action('wp_footer', 'add_custom_iconbox');and then add following code to Quick CSS
#top .iconbox_top { opacity: 0.1; }It will set the iconbox opacity to 0.1 and when scrolled down 100px, it will fade in
Best regards,
Yigit
