Hi Rosa!
Please edit your color section and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS
#your-custom-id .content { padding-top: 10px; }
Regards,
Yigit
Hi,
in this page (private content) I need to add to specific color sections a padding-top:10px (not to all the color sections).
How can I do this?
Thanks,
Rosa
-
This topic was modified 9 years, 7 months ago by
pinkabbestia.
Can someone help???
I followed this thread and it did not work… I see a red dot when I rollover where the Yelp icon is to be but nothing there but white space and then a dot when rollover…
I added this to functions.php on my child theme:
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);
function avia_add_custom_icon($icons)
{
$icons[‘yelp’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘ue800’);
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);
function avia_add_custom_social_icon($icons)
{
$icons[‘Yelp’] = ‘yelp’;
return $icons;
}
And this to the Quick CSS:
#top #wrap_all .av-social-link-yelp:hover a {
background-color: red;
color: white;
}
#top #wrap_all .av-social-link-yelp: a {
background-color: white;
color: red;
}
Thanks in advance.
Chris
Hey matteoclava,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.home #av_section_1 .content {
padding: 0;
padding-top: 10px;
}
Best regards,
Yigit
Hey morten008,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #header .av-main-nav > li:hover > a .menu-top-adjust {
color: black;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
Yigit
Hey antoine251,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.page-id-2268 ul#menu-membres-en li#menu-item-4251 {
padding-left: 51px;
left: -51px;
top: 1px;
margin-top: -1px;
padding-top: 1px;
width: 100%;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 4px;
background: white;
}
Best regards,
Yigit
Hi!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) {
#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
border: none;
}
.logo {
float: left!important;
width: 59%!important;
}}
Regards,
Yigit
Hi fsparker16!
Please change your code to following one
#av_section_2 {
top: 0 !important;
position: fixed;
background-color: #ffffff !important;
z-index: 2000;
}
If issue remains, please post a screenshot and show it. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here. This will fix the only issue i am seeing on Firefox.
Regards,
Yigit
Hi!
I added following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (min-width: 991px) {
li#menu-item-burger {
display: none!important;
}}
.js_active.html_burger_menu #avia-menu > li {
display: block;
}
@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .html_burger_menu .av-burger-menu-main { display: block !important;
}
.js_active.html_burger_menu #avia-menu > li { display: none;
}}
#advanced_menu_toggle {
display: none !important;
}
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background: transparent;
position: absolute!important;
}}
Please review your website now
Regards,
Yigit
hi andy
login info for my WP site and the page link – and the CSS – was on my second post right at the top of this thread.
hope it helps you to reproduce the problem.
the big issue is on chrome as I mentioned.
Firefox seems ok and safari is ok.
thanks
Pete
Hi!
I changed your code to following one
.av-upcoming-events .av-upcoming-event-entry {
width: 31%;
float: left;
margin-left: 2%;
clear: none;
}
.av-upcoming-event-image {
width: 100% !important;
border-radius: 0 !important;
}
.av-upcoming-event-data {
width: 100%;
padding-top: 20px;
}
Please review your website now
Cheers!
Yigit
Hi!
Please add following code to Quick CSS
#top .avia-slideshow-arrows a {
top: 42%;
}
Best regards,
Yigit
Hey!
Please go to Enfold theme options > Header > Transparency Options and change colors as needed then add following code to Quick CSS in Enfold theme options under General Styling tab
.av_header_transparency {
background: rgba(255,255,255,0.2);
}
#top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a {
color: black;
background: #ed1846!important;
}
Best regards,
Yigit
Hi,
try this code:
.page-id-43 .html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 20px !important;
}
and adjust as needed.
Best regards,
Andy
@Josue
I’m not using an Accordian but Tabs and have implemented this fix to have all tabs closed on page load when mobile. The client wants the page to use Tabs, preferring the layout.
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
right: 0;
}}
Best regards,
Yigit
we see that the diagonal section border is for the bottom of the actual section.
So on most cases ( to mimic the diagonal effect) it is recomended that Diagonal Border Color is the background-color of the following section!
But why does it not work on last section . It would be nice to have it with footer too! So last Diagonal Border Color get the footer background-color. But on some reasons this is not accepted!
the only way now is to make another color-section after that and give the last color-section (no top border !) a custom class (in my example i call it: no-minheight
This will do the trick
.avia-section.no-minheight {
height: 0;
min-height: 0 !important;
}
#footer.container_wrap {
border-top-width: 0 !important;
}
see Result on the bottom of: Link
and – by the way for those fine lines of that logo – try to use svg instead.
http://webers-testseite.de/elegant/beispiel-seite/
just drag&drop the svg to your desktop.
The only thing you have to think of is to setup for the svg a width and height otherwise it is set to 1px/1px
Hi,
try to add an !important:
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px !important;
}
Afterwards clear browser cache and hard refresh a few times.
Best regards,
Andy
Hi,
I have looked at almost all the topics on this problem and i cant find the right solution…
I need the site title to be shown in front of my logo.
I need the logo and text to shrick when i scroll down.
The site title needs to be the same size text as the logo (48) and the site title is a link to the homepage.
I have tried using this php
add_filter(‘avf_logo_subtext’, ‘kriesi_logo_addition’);
function kriesi_logo_addition($sub) {
$sub .= get_bloginfo(‘name’);
return $sub;
}
But i cant get the text to be in front of the logo.
Best regards,
Kristoffer
Hi Rikard,
Thank you for the response. The image on mobile looks like picture 1 (see private message). The desktop version looks like picture 2. As you can understand i do not like picture 1 – :)
So let me ask, Is there a way to add a code block on a page without adding a white space around it? This was the only way that i could think of to bypass this.
Any other suggestions would be welcome, although it kinda falls outside of the scope of theme support.
Thanks,
Antonis
Hi.
I can’t seem to get my main.container to stop being movable in horizontal sideway on Ipad. Only way to make that bug to stop, is to pinch screen or double tap, and it stops being movable.
Thanks,
OPVAB
Hey!
Try adding this code to General Styling > Quick CSS:
@media only screen and (max-width: 767px) {
#top .container .av-masonry-col-flexible .av-masonry-entry {
width: 100%;
}
#top .container .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
width: 100%;
padding-bottom: 80%;
z-index: 1
}
}
.big-preview.multi-big,
.big-preview.multi-big img {
width: 100%;
padding: 0;
}
Cheers!
Josue
Im adding a video to my page usign avia layout, i dont see a way to autoplay/loop the video hosted on my WP site and hide the controls, is this possible
I’m forcing a resolution too like so

Hi guys,
I came across an issue where I am trying to use a background image in a color section. The problem is that the image gets stretched beyond the width of the screen with the paralax setting no matter what I do.
I came accross this thread: https://kriesi.at/support/topic/parallax-images-stretched-way-beyond-screen-dimensions/
I implemented the solution in the quick CSS but to no avail. The image is still stretched. I even tried to resize the image to 1500 x 640 and use the same setting when adding the image as the background. I just cannot seem to get it just right to have the width of my image take up 100% of the width of the screen.
The funny thing to me is that when I change from paralax to fixed then the 1500 x 640 image is to small for the screen and does not stretch to the end. I’m pretty sure this is some CSS thing that I am missing.
URL: http://www.buylucerne.co.za
Any help will be appreciated.
Thanks
J
Hi,
Great, glad you got it working. Please let us know if you should need any further help on the topic.
Regards,
Rikard
Unfortunately, it’s still on localhost, but I managed to figure it out like this in custom.css:
.avia-section.av-minimum-height .container .content {
vertical-align: top !important;
}
.avia-section-huge .content, .avia-section-huge .sidebar {
padding-top: 0;
padding-bottom: 0;
}
Hi Mark,
Great, glad you got it working and thanks for sharing :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard