-
Search Results
-
Header Widget, Page Design, Buttons behavior and more…
Hi.
i am working on my website and i am facing many problems / stuff that i dont know how to handle it so i have few questions:
1. i would like to have part of the page to be designed with a parallax background image with some content separated on the same section.
example: http://www.laurentperezdelmar.com/ (i liked the scrolling effect). i know that the “color section” provides parallax option with a cutom image but didn’t find the way to separate between sections. also tried the “Background Image” on the “enfold” settings, General styling but it didn’t supplied the solution for it.2. i would like to add some links in the footer like the “Enfold Latest News”, the links should be shown like the “testimonials” balloons with some text in the left side like the “Enfold Latest News”.
3. when i am adding many page links on the menu it overlays the Logo. need to fix it.
4. i want to add a GAP wothout any lines or icons in the middle of the page but the separator doesn’t provide a solution for it.
5. i want to add “Transposh” translation widget to the header near the “Extra Elements” Section.didn’t find how to do that.
6. i want to add “Partner/Logo Element” slider and i have many logos that each one has different sizes but it cuts the images, need to fix it as well.
7. i want to force all images in a slider to be shown in the same size on a “FullWidth Easy Slider” without the need to change their resolution manually each one (some images are shown in a zoom…).
8. i want to force all images in a “Image” media element to be shown in the same size without the need to change the image resolution.
9. on enfold there is no “maintenance” or “coming soon page” so i have created one and i would like to add a line of social icon buttons on bellow the “countdown” how can it be done?
10. on the “icon box” i want to have the “Icon Hover effect” without having any Hyperlink behind it. how can it be done?
11. i want to automate some “Color section” by pasting it like a “shortcode” on pages but there is no shortcode for “Color section”.
i will highly appreciate any assistance.
need helpmany Thanks!
BR,
Ben
Hi!
If you shorten your header size then it will update automatically. Or you can use some CSS like so to shorten it.
nav.main_menu > div > ul > li > a { height: 44px !important; line-height: 44px !important; }You may need to move the menu down a bit which you can do with this.
nav.main_menu { top: 20px; }And add this to reset it’s position when you scroll down the page.
.header-scrolled nav.main_menu { top: 0px; }Regards,
ElliottHi;
I am creating ecommerce site with WooCommerce. I do not want to display in my bottom of “Shop Page” like “Pic 1” (no pagination) . I would like when I scrolling bottom of page the products load automatically or at least to have “Load More” button and display them as a “Pic 2”.
Is there a way to achieve this?
Thanks
Hey!
Oh! My bad. It will take care of the scroll position but it will not open the tab automatically. Here’s what you have to do, you still have to add a hidden container but the id should correspond to the current tab id. For example, the second tab should have a hidden container that looks like this:
<div id="tab-id-2"></div>You can now, create a link that will automatically open the tab and simultaneously scroll to the exact position of the tab content:
<a href="http://weblinedesigns.com/web-design-development/#tab-id-2"></div>Same goes for the first, third and up to the last tab.
Cheers!
IsmaelHi guys
I have a prob. The fullslider on my frontpageat raginiinfo.dk jumps, when you look at it from an iPad.
When you scroll down, it automatically jumps up. I saw it on my PC screen, but it stopped. But my friend checked on his tablet, and told me it was still an issue. Can you tell me how to change it?It is setup to be responsive.
Br. Ragini
Hello!
I added a status bar in the top of my page and need to move down 40px the sticky fixed position of the Sub Menu. Please take a look at this page http://www.adaptixnetworks.com/hospedaje/ and scroll down, you will see that the sticky Sub Menu almost disappear because when scroll down, the element style top changes from auto to 80 and I need it to be 120px.
Thanks for your kind response
Regards,
ArturoIn reply to: Border around a Login logout menu item in Enfold
Hey Bjørn!
Your HTML is different so you will need to style it separately. Perhaps something like this.
.header-scrolled .av-main-nav > li:nth-last-child(2) a { transform: translateY(10%) !important; } .av-main-nav > li:nth-last-child(2) a { border: 2px solid black; border-radius: 3px; height: auto !important; line-height: 20px !important; padding: 5px 13px !important; position: relative !important; transform: translateY(80%); }Regards,
ElliottIn reply to: Video Slideshow Not Working on IE11
I thought the same thing… I had two internal users tell me they didn’t know to scroll down after the 3rd video so I made a 4th slide with an image with the call to action to scroll down to ensure those that don’t auto scroll down have some direction.
I will wait for a response for the issue at hand. Thanks.
Topic: Customising Enfold
Hi,
Seems like the question didn’t go through yesterday. Listed everything point wise
1. Looking to move the caption of the thumbnail image below the image.
Scroll Down, open the link Uniform in a Box, The caption of the thumbnail image, I would like to move it below the image. By default its above it. Tried finding the CSS element associated with it but couldn’t since it hides automatically unless the mouse cursor is over it.2. I would like to add another Logo on the right part of the header. How can I go about doing this? Any guide I could follow of Enfold?
Thanks,
SuumsIn reply to: Design für Kategorien?
Hey!
sorry, aber ich glaube ich verstehe nicht ganz was du meinst. Kannst du bitte versuchen das Problem mittels Screenshots zu illustrieren? du kannst imgur.com oder einen public dropbox Ordner verwenden.
Willst du jetzt deinen Blog gestalten? geht es dir darum? Du hast bei Enfold zwei Möglichkeiten deine Blog Posts zu gestalten:
1.) Du verwendest mit Enfold das Standart Blogsystem von WordPress und erhältst die Vorgaben (Datum, Preview Image, etc.) automatisch vorgesetzt.
2.) Du wählst den Avia Layout Builder, mit dem du alles selbst bestimmt kannst, aber auch alles selbst machen musst. Mehr Freiheiten, aber auch mehr Pflichten :).Ich persönlich empfehle dir Variante 1.), weil diese leichter ist umzusetzen.
Oder geht es dir lediglich darum, dass dein erster Link nicht so aussieht wie dein zweiter? was genau hast du am zweiten auszusetzen? Ich kann sehen, dass dort die Sidebar fehlt, aber die kannst du wenn du die Seite editierst einstellen (im Backend runterscrollen, auf der rechten Seite unter “Sidebar Settings”).
Breadcrumps sehen für mich auch in Ordnung aus. Wo ist genau das Problem?Bitte zeige uns klar und deutlich die Änderungen, die du erreichen möchtest.
Gruß,
AndyIn reply to: Color section background issue since Enfold 3.1.1
Hey!
Mobile browsers scroll to top automatically when touched on the top of the browser and to not cover any content on small screens it was removed I think. But glad Yigit could help you to achieve what you needed :).
Let us know in a new ticket when you need some more help.
Cheers!
AndyIn reply to: Galerie – Portfolio – Themenauswahl
Hey nullhorn!
du musst deine jeweiligen Portfolio Seiten in Kategorien (Alles, Wald, Auto, etc.) zuordnen. Dies kannst du tun, wenn du die jeweilige Portfolio Seite editierst und dann runterscrollst und auf der rechten Seite schaust:
Hoffe das hilft :)
Lieben Gruß,
AndyHi!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) and (min-width: 480px) { .responsive #socket .sub_menu_socket { display: block!important; }}Scroll to top button is hidden on mobile to save space. Plus mobile browsers scroll to top automatically once you touch the top of the browser :)
Regards,
YigitHi!
Code i posted should have worked. Do you mind creating a temporary admin login and posting it here privately?
Mobile browsers scroll to top automatically when touched on the top of the browser, i believe it was removed not to cover the content on mobile :)Regards,
YigitIn reply to: Color Overlay on Full Width Slider
Hi suburbanite!
Add this to your custom CSS.
.avia-caption-title { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); display: inline; padding: 40px; width: auto !important; }Cheers!
ElliottIn reply to: Masonry portfolio grid lightbox issue
Ismael,
thank you for your reply. This works for the masonry. But the filter does not filter the lightbox.
(if I filter on category, fashion, glamour or automotive in can still scroll trough the unfiltered images in lightbox)
But how do I get this to also work with the portfolio grid to load the ajax gallery/list for a series and a single lightbox for a single image.I’ve set it up like you described. But the portfolio grid still opens the gallery (post) for a single image after displaying the lightbox.
In reply to: Advanced layer slider
Hi – I’ve tried all the other sliders and even just an image, but they all return an error. The shortcodes are just too complicated.
This is the shortcode to insert a full width slider:
[av_slideshow_full size='featured' stretch='' animation='slide' autoplay='false' interval='5' control_layout='av-control-default' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll']
[av_slide_full slide_type='image' id='4117' video='' mobile_image='' video_format='' video_ratio='' title='' custom_title_size='' custom_content_size='' caption_pos='caption_right caption_right_framed caption_framed' link_apply='' link='lightbox' link_target='' button_label='' button_color='light' link1='manually,http://' link_target1='' button_label2='' button_color2='light' link2='manually,http://' link_target2='' font_color='' custom_title='' custom_content=''][/av_slide_full]
[/av_slideshow_full]All I want to do is display 1 large image at the top to ever post. I do keep trying what you suggest, but it never works. Is there any chance you could tell me the exact shortcode I need to use please?
When I have done that I would also like that same image to be at the top of the main blog page (which is the php file I edit for that?
Thanks
In reply to: # is URL anywhere in page causing issue
case 1:
http://www.amarequip.com/glass-body-autoclaves/#tab-id-2
The above url just view it, we dont want table scrolling in specification tab .
Help us with to stop the scrolling .we want fixed table ,we dont want movable .case 2 :
For entire website we want google ubuntu font in header and content area help us with this query provide any link and solution.
Reply me update @ (Email address hidden if logged out)
In reply to: Limit ajax search results with Relevanssi
Hi!
Add this to the Quick CSS field:
.avia-search-tooltip form#searchform { overflow-y: auto; }If it doesn’t work, use this:
.avia-search-tooltip form#searchform { overflow-y: scroll; }Cheers!
IsmaelHi Enfold Team,
I tried setting to no background, but the webpage still utilize a purple background in which I do not understand where it came from.
Link is given at “Private content” section.
CSS Utilize so far..main_color .avia_cart, .main_color form, .main_color .avia_cart, .main_color form, .main_color tr:nth-child(odd) { background-color: white; } #top .woocommerce-message{ padding:1em 1em 1em 3.5em!important; margin:0 0 2em!important; position:relative; -webkit-border-radius:0px; border-radius:0px; background:#ffffff; background-color: transparent !important; border: 0px; background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ffffff)); background:-webkit-linear-gradient(#ffffff,#ffffff); background:-moz-linear-gradient(center top,#ffffff 0,#ffffff 100%); background:-moz-gradient(center top,#ffffff 0,#ffffff 100%); color:#000000 !important; text-shadow:0 1px 0 #fff; list-style:none outside!important;*zoom:1;width:auto; -webkit-box-shadow:inset 0 -2px 6px rgba(0,0,0,.05),inset 0 -2px 30px rgba(0,0,0,.015),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 -2px 6px rgba(0,0,0,.05),inset 0 -2px 30px rgba(0,0,0,.015),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3) } .main_color .avia_cart, .main_color form, .main_color .avia_cart, .main_color form, .main_color tr:nth-child(odd) { background-color: white !important; background-image: url("http://www.mylittlestorybox.com/wp-content/uploads/2014/12/pastel-pink-background-temp.jpg"); } .cloud-zoom-big { border:4px solid #ccc; overflow:scroll !important; } .four.units.single-product-main-image { overflow: visible !important; } ul.products li.product a img { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); display: block !important; height: auto !important; margin: 0 0 8px !important; transition: all 0.2s ease-in-out 0s !important; width: 320px !important; } .mousetrap { z-index: 99999999 !important; position: absolute; width: 387px; height: 540px; left: 0px; top: 0px; cursor: move; } . single-product #av_section_1 { height: auto !important; } .title_container { display: none !important; } .single-product-main-image.alpha { z-index: 5000; overflow: visible !important; } .single-product-main-image { overflow: visible; } #footer .widgettitle { color: #ffffff !important; } .single-product .template-shop, .alternate_color, #header_main .container, .main_menu ul:first-child > li a { background-image: url(https://www.mylittlestorybox.com/wp-content/uploads/2014/12/pastel-pink-background-temp.jpg); }Help is appreciated as always.
Best Regards,In reply to: Logo Does Not Display Properly in Chrome
Hey!
Try to replace the code with this:
.logo a, .logo a img { width: 961px; height: 110px; } .header-scrolled .logo a, .header-scrolled .logo a img { width: auto; height: auto; }Best regards,
IsmaelIn reply to: Special Heading over Colour Section Image
Hi Coronacom!
Add this to a codeblock element in the page.
<style type = "text/css"> #av_section_1 .av-special-heading { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important; float: left !important; width: auto !important; } </style>Cheers!
ElliottIn reply to: Help with Tables on Mobile
Hey Ryan!
Thank you for using Enfold.
You can enable the scrollbar when part of the table content is hidden. Add this on Quick CSS:
table { overflow: auto; display: block; }Best regards,
IsmaelHola Josue…
La web http://www.diegoestrada.es funciona mal con la ultima actualizacion de Enfold 3.0.8
Cuando la ves desde un telefono móvil el menu vertical solapa las imagenes….Además este video que queremos insertar no funciona.
Un saludo
Te adjunto todas las personalizaciones que me habeis enviado para el campo Quick css
————————————-
#top .avia-gallery .avia-gallery-thumb a {
height: 255px;
}
#top #menu-item-search {
display: none;
}.image-overlay { background: transparent; }
.image-overlay { display: none !important; }html {
background-color: transparent;
}#advanced_menu_toggle{
display: none !important;
}@media only screen and (max-width: 767px) {
.responsive .logo img {
height: auto !important;
top: 30px;
}
}@media only screen and (max-width: 800px) {
.responsive #top #main .sidebar.smartphones_sidebar_active {
position: absolute;
}main.template-page.content.nine.units {
margin-top: 300px;
}
}div#header_main { border-top: none!important; }
#header_meta { box-shadow: none; }#scroll-top-link {display: none; }
In reply to: responsive fluid logo
I managed to figure the first part out my self (example) by adding this,
.logo { position: relative; display: block; width: 35%; max-width: 485px; height: auto; text-align: center; } .logo a { display: inline-block; vertical-align: middle; }I have also activated letting logo and menu adapt to browser window under header options, this gives me a bit more space to work with at smaller screen sizes…. and from 989px and under I want the responsive mobile menu activated which I have selected under the mobile header options. But a problem I’m having is that the logo isn’t centered between 768 and 989 pixel screen sizes and also the header bar doesn’t keep the same fixed height after scrolling like in mobile view.
please advise. thank you.
In reply to: Make additional elements in header shrink like logo
Hi raustyle!
Add this to your custom CSS.
.header-scrolled .header, .header-scrolled .header img { max-height: 50px !important; }And you’ll want to set the width to auto probably.
Cheers!
ElliottHey peterjtonkin!
This might make your header look weird but you can try this CSS.
#wrap_all { margin: 50px auto !important; }I think if you do this you will need to turn off the sticky setting for the header so it does not scroll down the page.
As for making the header transparent you can do this.
.header_bg { background: transparent !important; }Cheers!
ElliottIn reply to: Facebook Open Graph Not Working Correctly
Hi Elliott,
I did that a couple of times but still no luck. Try adding http://www.tesafesa.nl to Facebook and you will see that it displays the shortcode:
[av_fullscreen size='extra_large' animation='slide' autoplay='false' interval='5' control_layout=''] [av_fullscreen_slide id='10'][/av_fullscreen_slide] [/av_fullscreen] [av_section color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no…Please help!
Hi Enfold team!
The website used to be having a boxed layout with body background
Secondly, the product page doesnt seem to be able to display gallery pictures and stuffs, the color scheme looks weird due to the CSS updates being overwrite I believe.
Link is as provided at the bottom.
CSS Codes used..top-pink { font-family: "ITCAvantGardeGothicW01 MedN", "Helvetica Neue", Verdana, Arial, sans-serif !important; text-align: center !important; background: #d4007a !important; color: #ffffff !important; } .main_color h2 { color: #f27edb !important; font-family: "ITCAvantGardeGothicW01 ExtN", "Helvetica Neue", Verdana, Arial, sans-serif !important; font-style: normal !important; text-rendering: optimizeLegibility !important; font-weight: normal !important; font-size: 2em !important; } .main_color p { font-family: "ITCAvantGardeGothicW01 ExtN", "Helvetica Neue", Verdana, Arial, sans-serif !important; margin: 0 0 1.5em !important; } #menu-item-140 a:hover { color: #f27edb !important; } #menu-item-51 a:hover { color: #f27edb !important; } #menu-item-95 a:hover { color: #f27edb !important; } #menu-item-62 a:hover { color: #f27edb !important; } #menu-item-134 a:hover { color: #f27edb !important; } #menu-item-search a:hover { color: #f27edb !important; } #menu-item-171 a:hover { color: #f27edb !important; } .slogan { font-weight: normal !important; font-size: 2.2em !important; line-height: 1.4em !important; text-align: center !important; font-family: "ITCAvantGardeGothicW01 ExtN", "Helvetica Neue", Verdana, Arial, sans-serif !important; display: block; -webkit-margin-before: 1em !important; -webkit-margin-after: 1em !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; } #av-overlay-wrap { background: url("http://www.womanizer.com.sg/wp-content/uploads/2014/11/pink-background.jpg") !important; } #menu-item-search a { color: #f27edb !important; } #menu-item-140 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } #menu-item-51 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; #menu-item-95 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } #menu-item-62 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } #menu-item-134 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } #menu-item-171 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } #menu-item-95 a { font-family: "ITCAvantGardeGothicW01 BookN", Helvetica, Arial, sans-serif !important; font-size: 16px; font-weight: 100 !important; -webkit-font-smoothing: antialiased !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } .main_color .avia_cart, .main_color form, .main_color tr:nth-child(odd) { background-color: white; } #top .woocommerce-message{ padding:1em 1em 1em 3.5em!important; margin:0 0 2em!important; position:relative; -webkit-border-radius:0px; border-radius:0px; background:#ffffff; background-color: transparent !important; border: 0px; background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ffffff)); background:-webkit-linear-gradient(#ffffff,#ffffff); background:-moz-linear-gradient(center top,#ffffff 0,#ffffff 100%); background:-moz-gradient(center top,#ffffff 0,#ffffff 100%); color:#000000 !important; text-shadow:0 1px 0 #fff; list-style:none outside!important;*zoom:1;width:auto; -webkit-box-shadow:inset 0 -2px 6px rgba(0,0,0,.05),inset 0 -2px 30px rgba(0,0,0,.015),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 -2px 6px rgba(0,0,0,.05),inset 0 -2px 30px rgba(0,0,0,.015),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3) } #av-overlay-wrap { overflow-x: scroll !important; }Help will be greatly appreciated!
Regards,
Kayzel
