I’m essentially looking to replicate the behavior and layout at the top of this page: https://www.unmade.com/
In other words:
- Full-width background video, stretched to fit.
- Video is darkened, shortened, looped, and without sound by default.
- Centered “Play” button launches the full video with sound and controls, pausing the background video.
- Sticky transparent header bar/primary nav over the video.
In my experiments with Color Blocks and Full Screen Sliders, neither seems to quite do this. Color Blocks come with limited functionality for background videos, so I can’t mute the sound by default (making them mostly useless), and clicking a Play button (done with a simple icon with a video link attached, centered in a content block) doesn’t pause the background video when the new video lightbox pops up, which proves to be really distracting.
Full Screen Sliders offer more control over the video behavior, but it’s not clear how I can use it as the background and position a Play button over it, to link to the full video.
Is there a way to accomplish this as it appears in the example link?
-
This topic was modified 8 years, 11 months ago by
Brosnan.
Hi Guys;
Thanks for the enfold theme and your fantastic support so far !!!
Is it possible for me to add another custom widget are to the header of my site? I am currently using a custom widget area using the function described here to display my search provided by a secondary plugin which works very well. I have the search custm widget centred in my header using css, I would like to add another custom widget area to the right to display some custom font awesome icon links and possibly shorcodes for login / logout etc. I have the enfold basket attached to the header and would like to display these links next to it.
View post on imgur.com
so I have this in my child themes functions.php . . .
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}
and css
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}
Can I add a similar function and position the content to the right of my header (next to my cart) with some custom shorcode or links.
Regards
Pete
-
This topic was modified 8 years, 11 months ago by
gtekit.
Hey mikejohnsimports,
Please refer to this thread: https://kriesi.at/support/topic/how-to-export-the-template-from-the-enfold-theme/
Hope this helps :)
Best regards,
Nikko
Hey JoshHamit,
Please add the following to quick css:
@media only screen and (max-width: 767px){
.responsive #top .logo {
width: 100%!important;
}
.responsive .logo img {
margin: 0 auto!important;
}
}
Best regards,
Jordan Shannon
We have a widget in footer Column 1 for the Facebook Likebox that had been working. After I updated the theme today, I noticed that it is no longer working. Honestly don’t know if it stopped before the update or after. However, all it shows is a rectangle now. I changed out the URL to another FB page, and it works. But it no longer works with my client’s page, even though it did previously. The client’s FB page URL is https://www.facebook.com/gilbertfurniture/ which no longer works. I replaced that with my own Facebook page URL and it works. So not sure what’s happening. Any suggestions? Thank you.
Hi,
We’d like users to be able to navigate between tabs on this page on mouse hover (desktop), instead of having to click. We’ve seen code in other posts for doing this, namely that you need to change this part of your shortcodes.js file:
tab.addClass(‘tab_counter_’+i).bind(‘mouseenter’, function()
We’re using a child theme for this site. How do we go about adding this line of code to a child theme?
Ok, I’m getting close but can’t seem to make it just one image. I’ve created a custom class for the overlay and added this –
/* custom overlay to override section bg overlay settings */
.singleIcon .av-section-color-overlay {
opacity: 1 !important;
background-image: url("http://www.terracesatsfu.com/wp-content/uploads/2017/03/logo.png");
background-repeat: no-repeat center center !important;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
As you’ll see it’s now centered and everything is being applied except it’s still tiling – I’m missing something really obvious here?
When the main menu is hovered, the dropdown for submenus cannot be seen. It is present, but so light and transparent that it cannot be seen on desktop. It is functioning correctly on mobile.
Thanks.
-
This topic was modified 8 years, 11 months ago by
ListenAudio.
Hi there,
How can we make the logo on our mobile site centered? It is centered on the desktop site. I have added a link to our site in the Private Content field.
We are also thinking of adding a phone number above the logo in the centre. How can we do this on both mobile and desktop?
Many thanks for your help.
Have a lovely weekend.
Thanks,
Josh
What css should I post in order to get it correctly working?
At the moment I have this:
#top .portfolio-preview-image .avia-gallery-thumb img {
display: none;
}
.portfolio-preview-content .avia-arrow {
display: none!important;
}
.portfolio-preview-image {
width: 35.6%;
}
.portfolio-preview-content {
padding: 75px 100px 30px;
width: 64.4%;
background: #fff!important;
line-height: 1.8em!important;
}
.portfolio_preview_container{
box-shadow: none!important;
}
#top .grid-entry.no_margin.av_one_fifth {
padding: 10px;
}
I am trying to increase the space between the feature image and the post title on the post page. When I test it using developer tools I can create the space but when i try to put that code into Quick CSS it doesn’t work. I tried:
.content .entry-content-wrapper {
padding-top: 10px;
}
and also tried:
.page-thumb
padding: 10px:
}
neither solution worked. please help, thanks!
I have an idea of how the client wants it. I just need to be able to use custom CSS for my ALB elements. I’ll test the hierarchy after I can get the mobile/desktop hide views to work. Please help me with the PHP error, it keeps crashing my website when I get it wrong and I have to back it up via bluehost. Your guide is too minimal.
Hello,
First of all congratulations for your work, enfold is really well done.
I have a multi-site installation and I need to put more than one google fonts at a time, now I put them in function.php but I can post only one. How I can insert more than one?
– I need that the background video of the section color become visible on mobile devices.
With another premium plugin in my possession it works, but I need to do it with enfold, it’s possible to add the default autoplay?
Thanks in advance
Hey mattb1169,
Please refer to this thread for a possible solution.
If you need further assistance please let us know.
Best regards,
Victoria
Hi, I am trying to show a color section only on mobile so when browsing from desktop it doesn’t show up. I can’t find how to do it!
Thank you!
I was getting the Layerslider warning and spent hours trying to install last night on http://www.hotsysouthtexas.com. Eventually overcame problem only to get a much longer warning as follows:
PLUGIN_PATH’ ) or define( ‘WTWP__INSTALL_PLUGIN_PATH’, ‘welcome-to-wordpress/welcome-to-wordpress.php’ ); function install_wtwp() { global $pagenow; if ( !( ‘install.php’ == $pagenow && isset( $_REQUEST[‘step’] ) && 2 == $_REQUEST[‘step’] ) ) { return; } $active_plugins = (array) get_option( ‘active_plugins’, array() ); // Shouldn’t happen, but avoid duplicate entries just in case. if ( !empty( $active_plugins ) && false !== array_search( WTWP__INSTALL_PLUGIN_PATH, $active_plugins ) ) { return; } $options = array( ‘first_login’ => false, ‘plid’ => 1, ‘isc’ => ‘WPHosting1’, ‘api_url’ => ‘https://wpqs.secureserver.net/v1/’, ‘help_url’ => ‘https://help.securepaynet.net’, ‘control_panel_url’ => ‘https://hostingmanager.secureserver.net/Login.aspx’, ‘key’ => ‘GPICvJcJdC7foKgnWwEkSal37whVub1RlHBNBvneF3SSAn8xBj5I7kU8JBfPQUlr’ ); $active_plugins[] = WTWP__INSTALL_PLUGIN_PATH; update_option( ‘active_plugins’, $active_plugins ); update_option( ‘wtwp_options’, $options ); } add_action( ‘shutdown’, ‘install_wtwp’
I gave up and contracted with an “Envato Studio Expert” to install the theme. He sent the following: “I have already installed the theme but when I activate it, there’s an error message at the top of the page. [same error I listed above] I suggest you contact the theme author to fix that issue because I have already tried everything I could (reinstalled the theme, reset the database) but the error will pop up as soon as that theme is activated (and won’t have error if I activate other themes).
No it is more like the green reviews part in this screenshot:
https://www.behance.net/gallery/16322061/Delicious-App-Landing-WordPress-Theme
I would like a section with a background image that is slanted on the top AND the bottom.
I understand that I have to use 2 sections for that on top of eachother, and that works if I would make the sections one color.
But with a background *image* I can not achieve this.
I _can_ achieve
Top: straight. Bottom: slanted. Like the header in the screenhsot.
Hi tuscan,
Please refer to this answer.
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
use this code inside Quick CSS field:
@media only screen and (max-width: 767px) {
.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before {
top: 16px;
}}
and adjust if needed.
Best regards,
Andy
Andy, What is the quick css field? Thanks for the help? Is this going to allow me to have the video at 1920×1080 and autoplay? If I use the shortcode I can make the black bars go away, but when I insert the iframe code provided by vimeo it allows autoplay but causes black bars.
Just trying to make sure you understand my problem….again…thanks for your help.
Hi,
please refer to:
and:
Hope this helps to make things clear in your case.
Best regards,
Andy
Hi!
Ofcourse!
Link : http://www.fyrverkeri.no
What I need help for are the following:
1. The top bar visible over the fullwidth sub menu at the “profesjonelt fyrverki” pages
2. Bigger font at the category sidebar on the “Produkter” pages (Woocommerce) Like Product category main (Engelsrud Classic, Engelsrud Comet and High Class Collections bigger than the sub categories)
3. Social icons in the fullwidth sub menu
Also IF possible, making the sidebar on the “product pages” black background with white font. But that needs to be responsive
Thx for getting back to me (
My website’s header logo (The logo that shows up on the top right of the page) displays fine on desktop. The logo is set from Enfold -> Theme Option -> Logo
However, when I open up the site from my phone, the logo is not there. Instead, it is replaced with a label with a grey border around it. The text of the label is whatever I type in Appearance -> customise -> site identity -> site title
All 10 of my Enfold themes upgraded perfectly except for one. I get this error message:
Fatal error: Call to undefined function avia_is_burger_menu() in /nas/content/staging/cpv/wp-content/themes/enfold/includes/helper-responsive-megamenu.php on line 107
Checking the Forum, I ran across this help – but it didn’t work for me.
https://kriesi.at/support/topic/call-to-undefined-function-avia_is_burger_menu/
I’ve tried the update via the Dashboard interface, and also again manually via FTP using a successful site’s enfold and enfold-child folders to ensure I have good success. It failed. I even tried deactivating all plugins which made no difference.
I’ve pushed my live site to staging so that I can further test.
Thanks, Victoria.
I have been running 4.0.4 since it’s release, and the updated LayerSlider contained, rather than fixing the issue, has actually managed to stop my workaround from working, too (applying the link to each layer individually, as well as the slide as a whole).
So, I’m eagerly awaiting another update in hope it will fix the issue, since I’ve had no other solution offered.
Thanks.
Hi Wazzabi,
Please refer to this thread for a possible solution.
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
probiere es einmal mit diesem Code im Quick CSS Feld:
.grid-entry.flex_column.isotope-item.all_sort.no_margin.post-entry.post-entry-78.grid-entry-overview.grid-loop-6.grid-parity-even.post-entry-last.navi_sort.av_one_sixth.default_av_fullwidth {
left: 1007px !important;
top: 0px !important;
}
Gruß,
Andy
Hi Yigit,
I am including a link below to a screenshot showing the problem on iPad.
The full width easy slider should display the video right across the width of the page, and does so on the laptop and iPhone. But on the iPad it displays the video narrower, and what looks like the fallback still image to the top left.
I hope we can find a solution ASAP.
Thanks, Richard