Forum Replies Created
-
Posts
-
well as i said
just a fullwidth slider with custom-class (in my case: customclass)
and only your text in one button (from slider dialog)
the rest is css: (the last three rules are to setup your font and other stiles ):.customclass .avia-slideshow-button::after { content: url("/lodders/wp-content/uploads/2016/11/excell-icon.png"); display: inline-block; height: auto; padding: 0 0 0 10px; position: absolute; top: -30px; width: 40px; } #top .customclass .avia-slideshow-button.avia-color-light { background-color: #b7c84b !important; font-size: 15px; font-weight: normal; padding: 12px 80px 12px 16px !important; } .customclass div .slideshow_caption h2 { font-style: italic; font-weight: bold !important; text-transform: none; } .customclass .slideshow_caption { width: 100%; } .customclass .avia-caption-content { font-weight: bold; }see here my solution: http://webers-testseite.de/ikom/image-in-slider-button/
if you like it – say it.
so you have the installation too here in a subfolder.
so link to your image must be different/lodders/wp-content/uploads/2016/11/excell-icon.png
.page-id-16 .customclass .avia-slideshow-button::after { content: url("/lodders/wp-content/uploads/2016/11/excell-icon.png"); display: inline-table; height: auto; padding: 0 0 0 10px; width: 30px; } #top.page-id-16 .customclass .avia-slideshow-button { display: inline; height: 50px; top: 30px; } .avia-button.avia-size-x-large { font-size: 15px; text-align: left }but there are strange things in that slider – where can i choose an x-large button on that sliders ?
i think here is the place a mod must help you with admin account .
no chance to see from outside what you have done there – sorryfirst of all
take the one button option.
insert only that text into the button text: Download onze assortimentslijst
give the slider that class and look to your page-id.page-id-16 .customclass .avia-slideshow-button::after { content: url("/wp-content/uploads/excell-icon.png"); display: inline-table; height: auto; padding: 0 0 0 10px; width: 30px; } #top.page-id-16 .customclass .avia-slideshow-button { display: inline; height: 50px; top: 30px; }and than we have a look
what kind of slider did you take – because where does the span come from?
And why are you using 2 buttons i thought the image was your need – not a second button.can you please only insert in that buttonfield the text and remove the img tag.
but neverthe less this will be on responsive case difficult to obtain a button that stayes in the slider.
by the way did you choose the sliding or fading?
on fading i think the animation is not so important.the situation is that you have an image (that little excel icon) this is not part of a fontello iconset ( there are some alternatives with black and white excel icons))
give a custom class to the fullwidth-slider (for example: “customclass”) – (i have tested it on a enfold playground and page id was 3437)
.page-id-3437 .customclass .avia-slideshow-button::after { content: url("/wp-content/uploads/excell-icon.png"); display: inline-table; height: auto; padding: 0 0 0 10px; width: 30px; } #top.page-id-3437 .customclass .avia-slideshow-button { display: inline; height: 50px; top: 30px; }webers-testseite.de/ikom/image-in-slider-button
but than the button stops moving
we only can reach the moving if your excel icon is in that frame!
if you let this at inline-block the animation is ok:
#top.page-id-3437 .customclass .avia-slideshow-button { display: inline-block; }on my hoster i can declare who is the “chief of a folder ” i can give the ownership of a folder to a wp-user or a ftp-user. Maybe your hoster got this too. (by the way wp is in this case no shortform of wordpress – it is from hosteurope a given shortform)
try first only to set the rights to the config.php
if that does not help yes triy thatif this (777) helps afterwards you can set the folder permissions back to normal 750 and the file permission to 640 and test that.
did you prove the user permissions of your installation?
The folder /wp-content/uploads/dynamic_avia (quick css and others)
and /wp-content/uploads/layerslder (if you installed preformated Layersliders) and
/wp-content/themes/enfold/config-layerslider (nomen est omen) has to be writeable.
You can proove that on setting them (including content folder and files) for that moment to 777i think particularly the /wp-content/themes/enfold/config-layerslider/config.php has to have 640 (at least)
this tip seems to me very familiar:
yes the code is important to set the logo to display: none (ps don’t forget to make it for the responsive case too.)
but you don’t need any plugin for that.
The code to be able to upload svgs to wordpress is old:(both comes to child-theme functions.php)
function custom_mtypes( $m ){ $m['svg'] = 'image/svg+xml'; $m['svgz'] = 'image/svg+xml'; return $m; } add_filter( 'upload_mimes', 'custom_mtypes' );after you set the original “logo” to display none you can insert the svg code (so without img src) into enfold:
function first_logo($logo) { $logo .= '<strong class="logo first-logo"><a href="path to an url1">' ; $logo .= file_get_contents("/wp-content/uploads/logo1.svg"); $logo .= '</a></strong>'; return $logo; } add_filter('avf_logo_final_output', 'first_logo');this is a big andvantage because now you have the possibility to setup f.e. hover styles to svg path or something like that.
ich denke das Beste wäre du gibst der Slideshow eine benutzerdefinierte Klasse.
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
(i think it will be best to determin a custom class on fullwidth-slider)zB “background-vollebreite”. oder so ähnlich.
(f.e. “.background-vollebreite” )wenn du das generell bei allen Bildern gleich haben willst:
(if you like to have it globaly for that specific page/post).background-vollebreite .avia-slideshow-inner { background-color: #383838; }wenn du es für jedes Bild einzeln definierten möchtest:
(if you like to set up for each slide:).background-vollebreite .avia-slideshow-inner .slide-2 { background-color: #383838; }das kannst du dann für jedes einzelne Slide durchführen.
(than you can make it for slide-1, slide-2 etc. they all have a unique class!)well there is a unique site which can help the most of your desired things.
http://web-stuebchen.de/you can upload there a square image best and correct only the 310x150png for Windows10.
after generating you can download one zip file with all you need.i uploaded on my part allways to wp-content/uploads/icons
the path can be set in here on that dialog:
the insertion you can do via child-theme functions.php – the downloaded snippet.html contains the code you need:
add_action('wp_head', 'ava_add_customicons'); function ava_add_customicons() { ?> <link rel="shortcut icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/gif" href="/wp-content/uploads/icons/favicon.gif"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-57x57.png" sizes="57x57"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-60x60.png" sizes="60x60"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-72x72.png" sizes="72x72"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-76x76.png" sizes="76x76"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-114x114.png" sizes="114x114"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-120x120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-128x128.png" sizes="128x128"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-144x144.png" sizes="144x144"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-152x152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-180x180.png" sizes="180x180"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-precomposed.png"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-196x196.png" sizes="196x196"> <meta name="msapplication-TileImage" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-navbutton-color" content="#ffffff"> <meta name="application-name" content="bonnzeit.de"/> <meta name="msapplication-tooltip" content="bonnzeit.de"/> <meta name="apple-mobile-web-app-title" content="bonnzeit.de"/> <meta name="msapplication-square70x70logo" content="/wp-content/uploads/icons/win8-tile-70x70.png"> <meta name="msapplication-square144x144logo" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-square150x150logo" content="/wp-content/uploads/icons/win8-tile-150x150.png"> <meta name="msapplication-wide310x150logo" content="/wp-content/uploads/icons/win8-tile-310x150.png"> <meta name="msapplication-square310x310logo" content="/wp-content/uploads/icons/win8-tile-310x310.png"> <?php }this is now the global solution if you don’t like it for the whole wordpress installation you have to set up some if-clauses
f.e:
function only_one_toggle_open_at_the_same_time(){ if ( is_page(3423) ) { ?> <script> (function($){ $(window).load(function() { $('.toggler').on('click', function(){ $('.toggler').not(this).next().removeClass('active_tc'); }); $('.toggler').on('click', function(){ $('.toggler').not(this).removeClass('activeTitle'); }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'only_one_toggle_open_at_the_same_time');on that if clause you can use all conditional tags you know e.g:
if ( is_singular( 'event' ) || is_search() || is_category() || is_page() && !is_page(1307) || is_singular( 'portfolio' ) )etc.pp
by the way is_home( ) does not work ??? but: is_front_page( ) works
PPS: again something new to me :
is_home() returns only true if it is the blog-post index site
if your landing-page is a page you have to use is_front_page()i guess it has something to do with: anti-aliasing of safari font rendering
try this here first as a global rulehtml { -webkit-font-smoothing: antialiased; }but on this adivise from: https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/
Use Wisely
For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.try perhaps only:
.av-main-nav > li > a { -webkit-font-smoothing: antialiased; }by the way i see you use a different font for this – do you have all web-font files uploaded?
hm seems to be a rendering problem of safari. it is strange because if you activate each of your menu points one after the other. sometimes the difference is gone.
By the way – the same thing on Safari Technology Preview.try this here – maybe it works for you (in child-theme functions.php)
function only_one_toggle_open_at_the_same_time(){ ?> <script> (function($){ $(window).load(function() { $('.toggler').on('click', function(){ $('.toggler').not(this).next().removeClass('active_tc'); }); $('.toggler').on('click', function(){ $('.toggler').not(this).removeClass('activeTitle'); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'only_one_toggle_open_at_the_same_time');by the way : the laurels go to Josue
see also here: https://kriesi.at/support/topic/single-toggles-besides-sibblings-each-other/ok – i created my own do_action and placed it just before
so i have than:
do_action('avia_after_wrap_all'); wp_footer();now i can place with if-clauses some content on specific pages/post just after wrap-all closes
sometimes the easy way is out of sight. i searched for do_action but did not find the right place i want. On creating my own one i never had thought of till now.
can be closed
Well activating is no problem so far – but you mean if there is on a specific page a adv. layerslider the greensock animation will not work.
you want to remove the alt text only or to remove the tag ?
because on coming WordPress 4.7 the alt tag stays empty if there is no text input for it than the tag is alt=””yes i can have a child theme footer.php but i don’t want it on all pages just on the frontpage (home)
and i thought that an image like this is your problem:
and look what my solution did with it in mobile (not simulated mobile) does with it!
http://webers-testseite.de/kaetz/leistungen/#av_section_6
is your header a shrinking one or not ?
is it fixed on top ?The thing i understand from your request is that you don’t want to crop the images on top.
The responsive behaviour is a different thing – but you see on screenshot here: https://kriesi.at/support/topic/is-there-any-way-to-make-the-background-image-in-a-color-section-responsive/#post-712654 that it will work on real mobile browsers too and even the font goes to the responsiveness.On what mobilephone your are testing these pages – tell me your Browser and or IOS version please.
you can see here : http://webers-testseite.de/kaetz/leistungen/#av_section_6
ist this what you want? it is positioned center top even if you are turning your mobile to landscape the hat of that young lady isn’t cropped.
no mobile simulated – i can see it on my iphone 4s ( a bit older) and on my ipad4 that all is working in that manner you prefer.Do you can see it too on my testpages that it works? ( i only have here mac equipement – so i could not test it in other variants.)
and once again: if you have a non shrinking header – you know your header hight ! from Enfold Dialog
if you choose small i guess it is 50px – for big …. look yourself. this comes to scroll-offset on main!so if you have a color section with fixed positioning add a custom class – maybe topfixed or something like this:
.responsive #top .avia-section.topfixed { background-position: center 50px !important; }or left or right. etc. the 50px (look to the bride theme) on css you find the background-position : center top but without regarding the header hight.
on responsive case the sticky header is lost – and scrolls away – so background position has to get the top (0px value) !!!
@media only screen and (max-width: 768px) { .responsive #top .avia-section.topfixed { background-position: center 0 !important; } }
