Hey hstveilig!
Please use the “Header with Social icons and bottom navigation” then add this on your Quick CSS or custom.css:
.bottom_nav_header.social_header .logo {
position: relative;
left: 35%;
}
.bottom_nav_header.social_header .main_menu ul:first-child {
position: relative;
left: 20%;
}
#top #menu-item-search {
float: left;
}
Best regards,
Ismael
Hey!
Glad you found a solution :)
Regards,
Peter
Hi!
You can change the scroll to top arrow icons using this:
#scroll-top-link {
font-size: 50px;
}
Cheers!
Ismael
Hey aovivo!
Please do the following:
1.) Add this on your custom.css or Quick CSS:
.woocommerce-main-image.zoom {
overflow: hidden;
}
2.) Change the product title using this:
.product_title.entry-title {
font-size: 13px;
}
And the price font size with this:
#top .price span, #top del, #top ins {
font-size: 17px;
line-height: 24px;
}
3.) Change the button color with this:
.main_color .add_to_cart_button.button.product_type_simple {
background-color: red;
}
4.) Increase the bottom margin of categories using this:
.product_meta {
margin-bottom: 20px;
}
5.) Change the upsells or you may also like products using this:
#top .upsells.products h2 {
font-size: 15px;
color: red;
}
6.) It should be using the shop catalog image size which 450×450. Please regenerate the thumbnails using this plugin: http://wordpress.org/plugins/regenerate-thumbnails/
Regards,
Ismael
I think you are right.
I changed this css to edit the size of the arrow in the “scroll to top” button in the bottom left of pages.
#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont="entypo-fontello"]:before {
font-size: 15px ;
}
I would like to be able to use the icon element with the font size.
So how can I change the font size of the arrow in the “scroll to top” button without affecting anything else?
Thanks, you guys are awesome!
Hey AndrewDelaware!
Please insert this code into the quick css field
#top.avia-blank #main .container_wrap:first-child {
border: none !important;
}
#top.avia-blank .avia-shadow {
box-shadow: none !important;
}
Cheers!
Peter
Hi!
Glad you figured it out. You can hide the LayerSlider for desktop using this on Quick CSS or custom.css:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
}
Inspect the layer slider’s id then add it inside the media query.
Cheers!
Ismael
Is there a way to have other elements animate in when a user scrolls to wherever that element is?
like the icon lists and images can.
I have a special header element and I wanted that to animate in so i tried to assign a custom css class to the element and apply some css that an animated icon had.
Here is what I got, but it doesn’t work:
#top .jrm-easyas {
animation: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal none 1 avia_appear;
opacity: 1;
transform: scale(1);
}
If I apply other properties such as border and background color, they do appear, so I know the class is correct ad active.
Any ideas on how to get that animation working?
I would love to be able to animate whatever I wanted in :)
thanks!!!!
I was able to get this to function by placing the following code in the desktop media query:
#layer_slider_2 {
display: none;
}
Hi there – I’m just doing a temporary landing page – how do I remove the line at the top of this page:
http://delaware.raisr.co/home/
Many thanks!
Drew
Still not working. I tried it in the quick css and styles.css
I thought that maybe these styles were interfering so i took them out and tested, but still not working.
#top .comment_text { font-size: 28px; }
#top label { font-size: 30px; }
What else you got?
Thanks
Jonny
Hi thanks for a great theme and support!
How do I add a call to action button with a specific icon to the adv. layer slider? I’ve been able to use the html shortcode of the button (from this post) but do not see how to change the icon. Thanks!
How do I change the images that remain at the bottom, on top of about us and below WHAT OTHERS SAY ABOUT US, the first image is of a living room with a kitchen, and the second is a tablet
Hi,
i want to customize my header. Logo centered and the menu below. I use the fixed header with social icons and additional navigation.
I tried several things but can’t get it right. The menu does not adjust when i use:
div .logo { left: 28%; }
.main_menu { left: 1%; top: 75%;}
Can anyone help me get the header with the menu buttons looking nice. I would also decrease the space between the menu and the grey bar under it.
Thanks
Niels
http://www.hstbeveiliging.nl
Hi carendavis!
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
.logo img {
padding-top: 20px;
}
You can wrap it in the media queries for desktop only and mobile only so that you can have 2 different paddings for each display which are in the custom.css file already.
Best regards,
Devin
So, how do you add this feature mentioned here: https://kriesi.at/support/topic/enfold-feature-requests/
Method of adding custom icon fonts to the template builder (which allows you to add custom icons like youtube, xing etc)
I’d like to put icons in a text field in the Template Builder.
-
This topic was modified 12 years, 2 months ago by
rasa.
The included documentation and the descriptions next to the fields will give a better picture of what the settings all do than what I could describe. On any LayerSlider page go to the top right and there is a Help/Documentation tab that you can click on.
The Layers Container is what constrains the content of the container. The Responsive under is an override for the default responsive changes. I’m not sure if you can do exactly what you are looking for so it may be just a matter of some trial and error with the settings and image sizes.
As far as I know the LayerSlider plugin doesn’t let you choose how the responsive changes work onces it gets down to adjusting for tablets and mobile.
hi there,
i’m building a very basic website for a relative. made it with a nice plain white background with black text but for some odd reason they want it blue instead of white but with white text. i’ve done this ok but they don’t like how the main page heading links are quite dark grey in colour (doesn’t really work against a blue background), could i lighten these please so they are more white (although still distinct from the page that is selected)? if so how please?
the headings are:
Home
Services & Clients
Business Effectiveness
People
Practices
Processes
About Us
Contact
Blog
also, would like to lighten the other grey text in the header such as the social media links, the search button icon and the strapline at the top which says Catalyst2Change – Making Change Happen.
thank you kindly,
paul
Hello!
Loving this theme and its flexibility, thanks!!
Just wondering if you could help me – if you have a look at my site here:
http://tinyurl.com/pbzf438
…you will notice the logo in the header is not centred within the space. I added some custom css at some point to extend the size of this space, and I like the amount of space, just not the placement of the logo. Could you let me know what the css would be to adjust the top padding?
Thankyou!!
Hello,
I have two layer sliders created – one for mobile and one for desktop. I have placed them both on my homepage at wildmtyoga.net
I would like one of them to display only on mobile and one of them to display only on desktop. I am not sure how to add a class to a specific layerslider.
Thanks for any help!
Graham
Hi Yigit, I’m at the page and I see a paragraph that says “Update: Version 2.4.5 Out Now! WordPress 3.8 compatibility, bugfixes and new features! Check the changelog at the bottom of this page for more information and examples;)” And yet, nothing about “download update here”.
In the top right corner I see the message: “You have already purchased this file. You can download it here.” Am I to assume that is how I download the update?
Nothing very straightforward or intuitive about this process:/
Hey!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.news-thumb { border-style: none; padding: 0; }
.image_size_widget .news-thumb img { width: 36px; height: 36px; }
#socket.container_wrap { border-top-style: none; }
#footer { padding: 0px 0 10px 0; }
Regards,
Yigit
Point 2 is sorted many thanks.
The link to point 1 is https://kriesi.at/support/topic/same-size-boxes/ The relevant bit started on the 30th Dec at 7.11pm
Many thanks
Hello Devin,
Now the masonry gallery shows perfectly, 2 images per row, in a laptop with 16:9 resolution and in a tablet with 4:3 resolution,adjusting the width of the masonry items to 50%.
.av-masonry-entry {
width: 50% !important;
}
Thanks for your help.
Regards, Raul Ibañez.
Hey!
If you want to change the thumbnail image size with css you can use following code
#top .ngg-widget img {
max-width: 50px;
max-height: 50px;
}
Best regards,
Peter
Thanks for your help, it works.
Except that now it has plenty of space between each item submenus ?

hi there, i just switched to ENFOLD since my plug-in WooCommerce German Market seems to work best with this theme.
After changing the theme i have trouble adjusting some details, especially on the woocommerce product page.
I have attached a screen shot for better understanding (i am referring to the circled sections)
1) How can i get rid of the image side bar on product image? also the link thats activated – i just want to have the product in its original size (400×400)
2) How can i change the font sizes in the product description (Product name too big, price to small,)
3) how can i change the font color on button only (a darker color like grey or black would go better with the yellow)
4) How can i change the padding at the border of ‘product categories’ and ‘similar products’ (middle of the page) ?
5) I havent found the styling option for ‘Ähnliche produkte’ (which means ‘similar products) – does this come from woocommerce? Its a different yellow that i did set up in the styling panel.. any idea where to change that?
6) its weird that the products on the bottom (catalogue thumbs i guess) are not sharp. its the same size, quality as the main product in the upper half of the page and yet its somehow blurry. Any idea why this is happening?
This is the image size set up in woocommerce:
catalogue: 80×80
single product: 400×400 (original size)
thumbs: 120×120
i searched the forum but did not find the exact answers – thats why i decided to put this together in one topic, since its happening on one single page.
hope you can help!
thanks so much in advance
Pedro
