Hi,
Yes, that’s possible. Just add this css code along with the previous one.
#top .price, #top .price span, #top del, #top ins {
font-size: 20px;
line-height: 24px;
}
#top #wrap_all .main_color .price ins {
color: red;
}
Best regards,
Ismael
Hi again,
I tried it again and now it works. But now the header font size is small (not 20px). What can I do (in “advanced styling” I changed the “main Menu Links” to 22px and it worked befor but now not).
Regards
Hi Mike,
Thanks for that! I didn’t have layout ticked in screen options – so I’ve changed that now, thanks!
As for the site – yes I went into enfold and changed my logo to the left and menu right, but I couldn’t find where to change the font size of each menu item so that it fitted nicely. Even if I keep it centre as it is, is there a way to change the menu font and font sizes without using CSS?
And also, is there any way to set all font to be centred? Or just for specific pages/posts? And can you use bullet points with centered or not?
And in Private content just a question on one of the posts please.
Thanks so much!
Hey zeadZeven,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.avia_textblock p {
font-size: 20px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Ismael, Victoria and Rikard,
I solved the issue by hiring a freelancer. The right CSS code was
.avia-slideshow-arrows a:before {
font-size: 90px !important; }
You can close it now.
Cheers Marcel
Hi,
i’ve tried to change the H1 font size at the Theme Options (Advanced Styling, H1 edit), at the Custom CSS (Theme Options, General Styling) and now in the Customizer at Custom CSS. No effect (Cache cleared, Page reloaded, …). For example, in the Customizer I can adjust H3 but not H1.
When i use “Advanced Styling” in the Theme options, even i open “H1” it show “default” in the Font size-Box. (Although I have adjusted the size and saved).
Is it really impossible that I can change the size of H1?
best regards,
daniel
I have isolated the problem on my site. I believe it is an Enfold bug that needs fixing. (Or not, you tell me.)
To view the error, and to perhaps help me (and other Enfold users) how to work around it, please use this Post address within the Google Structured Data Testing Tool: https://dotorgwebworks.org/make-a-charity-website/
Here you will see the errors appear. They are coming from the footer.
Here is what’s happening:
When I apply an iconlist within the footer of my website (using the feature in your Layout Editor to create a widget), i.e.:
[av_iconlist position='left' iconlist_styling='' custom_title_size='15' custom_content_size='' font_color='custom' custom_title='#99cc00' custom_content='' color='custom' custom_bg='' custom_font='#ffffff' custom_border='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='' custom_class='' admin_preview_bg='']
[av_iconlist_item title='Contact Us' link='page,5625' linktarget='' linkelement='both' icon='ue814' font='boat'][/av_iconlist_item]
[/av_iconlist]
it produces an “<article class>” tag before the item. Then the Structure Data Testing Tool expects that this is part of the post or something.
So, I would like to be able to keep using the iconlist in my footer (column 1) widget, but not have it create the error message that you now are seeing.
Can this be done?
Thanks again,
I don’t follow you on this instruction…… can you break it down further for us dummies?
And how far in the future is this development for the ADA compliance?
Could they just do the smaller, easy stuff first and release an update as each thing is done, so at least our scores start creeping up the compliance ladder?
Thanks!
Hi,
Have you tried to enable the form labels and hide it using CSS by making the font size 0 will work for you temporarily.
We have to address the other issues by making changes to the core. Our development team is informed about your concern. An update will be released in one of the future version.
Best regards,
Vinay
Hello
It is worked with my personal site but can not work at the company site.
It is exactly same img and coding.
what should I have to change then.,….
to make more spacific I made color box with id. but it didn’t work as well..
Do you have any idea????
Do you think because of our company website haven’t update to latest version ?
It is cyber security website so I need permetion to update to theme.
If then, Please explain why I need to update the theme regulary FYI, Haven’t update for 2 years.
.avia-slideshow-arrows.avia-slideshow-controls {
width: 100%!important;
position:absolute!important;
top: 50%!important;
transform: translateY(-50%)!important;
width: 100%;
z-index:999;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows .prev-slide {
left: -80px;
}
.avia-slideshow-arrows.avia-slideshow-controls .next-slide {
right: -80px !important;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a {
top: 0;
width: 60px;
height: 60px;
font-size: 50px;
line-height: 62px;
background: transparent;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 100%;
position:absolute;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a:before {
line-height: 60px;
background: transparent;
}
#top .avia-slideshow-arrows a {
color: #005ca9;}
div .av_one_third {width:32%; margin-left:2%;}
-
This reply was modified 6 years, 8 months ago by
shinseul.
Hi,
Thank you for the update.
Can you set the user role to admin? We can’t access the post revisions.
I think this part is the problem.
<p style="text-align: center;"><strong><span style="color: #f05a1a;"><font size="4">I AM THE ONLY INSPECTOR IN LOUISVILLE KY THAT LIMITS THEIR WORKLOAD TO ONE INSPECTION A DAY. THIS ALLOWS ME TO TAKE THE NECESSARY TIME NEEDED TO GIVE YOU A HOME INSPECTION THAT IS SECOND TO NONE.</span> </strong></p>
The font tag is not closed properly.
<font size="4">
Best regards,
Ismael
Can we get the menu (font size, bold, link, etc) sticky when editing a text box?
thank you :-)
Additional to:
1) Image Badge
I don’t use WooCommerce, yes, I mean normal images with a badge. For example by defining an own badge image like the shape in the first image, or a pre-defined like in the second image with a different angle. When the shape of the badge, the font size and font type could be defined, it would be perfect :-)
View post on imgur.com
3) Artwork Frame
in a lightbox:
couldn’t it be possible, when the “normal” artwork in the frame can be just opened as a bigger view in a lightbox?
Just wanna know it, if I wanna change the FONTSIZE or fill it with color one day… how I can adjust the font size in the undermenus
Can I also take a picture and give it a date when it changes automaticly from a standard picture to a christmas one or something else like that?
Thx for answering :-)
regrats Arbogaz ^^
*Antwort gerne auch in Deutsch :)
Also ich würde einfach vielleicht wissen, wie man Größe oder Fensterfarben füllen kann, vor allem in den Untermenüs, um die Seite vielleicht mal nach anderen Wünschen einzustellen.
Was cool wäre, wenn man mehrere Bilder an einen Ort platzieren kann, die auch automatisch wechseln, z B zu Zeiten wie Weihnachten oder Neujahr.
Vielleicht kann man das ja einbinden oder gibt es diese Funktion mit einem Coding?
Thanks Jordan,
I want the font size and font for all buttons
It’s the google font that is already in Enfold
Charlotte :)
Hi,
Add this to quick css:
#b_frmInner{
font-size:16px!important;
}
Best regards,
Jordan Shannon
Hi,
Do you have the font-family installed?
For the font size add this to quick css:
.post-entry-51 .avia-button-wrap a{
font-size:20px!important;
}
Best regards,
Jordan Shannon
Hi.
I want to change the font size for the text in the Booking widget, scroll down
What code shall I add?

Thanks
Charlotte
Hi,
http://www.malagaboutiquehotels.com
I want to change the font size and font in the button to:
Terminal Dosis
Font size 22 px
What code shall I add?
Thanks
Charlotte
@kahil
Element “Ribbon Heading”
it would be great, if for example the element “Ribbon Heading” has some more styling options like font, font-size etc.
View post on imgur.com
Hey Victoria, Something went wrong haha.
I fixed it and cleaned up the code:
Still have a few problems left: (http://quirktools.com/screenfly/#u=http%3A//www.medexs.nl&w=1024&h=768&a=22&s=1)
– The arrows, the menu to the left and double on ipad.
@media only screen and (max-width: 1220px) {
nav.main_menu {
display: block !important;
}
#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
a.slide-image {
display: none!important;
}
.slide-content .slide-meta {
display: none;
}
.avia-content-slider .slide-entry-title {
font-size: 20px!important;
text-transform: uppercase;
color: white !important;
height: 60px;
}
.html_elegant-blog .av-vertical-delimiter { display: none !important; }
.avia-content-slider {
font-size: 13px!important;
color: white !important;
}
#top .avia-slideshow-arrows a.prev-slide {
opacity: 1;
left: 130px;
top: -60px;
background: #139eda;
color: white;
}
#top .avia-slideshow-arrows a.next-slide {
opacity: 1;
right: 130px;
top: -60px;
background: #139eda;
color: white;
}
.avia-content-slider {
overflow: visible;
}
#top #header .av-main-nav > li {
padding-left: 30px;
padding-right: 30px;
}
#top .avia-slideshow-arrows a:before {
background-color: transparent;
}
#scrollpijl {
background-color: transparent !important;
}
#header-home {
background-color: transparent !important;
}
.av-main-nav > li > a { padding: 0 9px; }
#header.av_header_transparency { background-color: transparent; }
#top #wrap_all #footer .flex_column p{
font-size: 12px !important;
}
.breadcrumb {
font-size: 10px !important;
color: #139eda !important;
}
.breadcrumb {
font-size: 10px !important;
color: #0670b7 !important;
}
.inner_sidebar {
margin-top: 20px !important;
}
#menu-item-search{
left:80px!important;
}
.av-main-nav-wrap, .main_menu {
width: 100% !important;
margin-left: -21px !important;
}
#header .widget { width: 20%; position: relative; margin-left: auto; margin-right: auto; }
#header .widget:nth-child(1) {
left: 80%;
padding-top: 25;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}
#header .widget:nth-child(2) {
left: 50%;
padding-top: 15;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}
@media screen and (max-width: 800px) {
#header .widget:nth-child(1) {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
@media screen and (max-width: 800px) {
#header .widget:nth-child(2) {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
Hi Ismael,
The code didn’t work on my end. You can see it here:
https://www.mkbzaken.nl/over-ons/
Cache and disable file compression also didn’t help. Even when I remove all CSS and turn off the plugins, I cannot change the fontsize with the “Browser Inspector”. There is something which is overruling the fontsize.
Cheers, Marcel
-
This reply was modified 6 years, 8 months ago by
Marcel.
Hi and hello…
I am using the enfold band demi.
How can I change the undermenu font size and where can I change the settings for a better screen size?
Here is my adress: http://www.stationfx.de
Thank you
Hi,
This css code works on our end.
#top .av-large-testimonial-slider .avia-slideshow-arrows a {
font-size: 90px;
}
Screenshot: https://imgur.com/a/S1s5e9c
Please don’t forget to toggle the Enfold > Performance > File Compression settings after adding the code, or just disable that option temporarily.
Best regards,
Ismael
And dear Gitte you aren’t able to transmit the more complicated case to an easier one?
the html code is above – put it in a text-block or code block element – the rest only had to be adjusted to not specific for sliders:
.avia-double-buttons {
margin-top: 30px;
text-align: center;
position: relative;
}
#top #wrap_all .avia-double-button,
#top #wrap_all .avia-double-button {
background: #000;
background: rgba(0,0,0,0.4);
border-color: #fff;
color: #fff;
padding-bottom: 11px;
text-decoration: none;
}
#top .avia-double-button {
letter-spacing: 1px;
padding: 13px 20px;
padding-bottom: 13px;
text-transform: uppercase;
font-size: 13px;
text-align: center;
min-width: 175px;
display: inline-block;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
border: 4px solid #fff;
border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-right-width: 4px;
border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
text-decoration: none;
}
#top .avia-double-button-1 {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-right-width: 2px;
}
#top .button_or {
position: absolute;
display: block;
height: 26px;
line-height: 21px;
width: 40px;
text-align: center;
top: 50%;
left: 50%;
margin: -13px 0 0 -22px;
background: #fff;
color: #666;
border-radius: 100px;
font-size: 12px;
border: 2px solid #FFF;
font-style: italic;
font-weight: 600;
z-index: 11;
}
#top .avia-double-button-2 {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-left: none;
border-left-color: currentcolor;
}
#top #wrap_all .main_color .avia-double-button-1:hover,
#top #wrap_all .main_color .avia-double-button-1:hover {
background: rgba(0, 100, 190, 0.6);
color: #fff;
}
#top #wrap_all .main_color .avia-double-button-2:hover,
#top #wrap_all .main_color .avia-double-button-2:hover {
background-color: rgba(200,0,120,0.6);
color: #fff;
}
@media only screen and (max-width:480px) {
.responsive #top .avia-double-button {
width:50%;
min-width:50%;
margin:0
}
}
see test page
Hi, I’m trying to do two things, and I can’t seem to get them just right.
Hopefully you can help me with it.
1) Position the Title and Excerpt on the top of the Masonry.

I’m using the code below to make the background black and transparant, and move the Title and Excerpt to the top.
A) The Title looks good, but I can’t get the Excerpt higher to make it look like in the attached image.
B) When scaling the page the Except moves high or lower, or disappears when there’s just three tiles visible. Testing on mobile the Excerpt sometimes get on top of the title. Is it possible to make it stick to the title and keep it there, even on mobile?
/*----------------------------------------
// CSS - Masonry title Alignment
//--------------------------------------*/
/* Title */
#top .av-masonry-entry-title {
color: #FFF; /* Apply the !important rule if the titles color do not change*/
font-size: 26px;
font-weight:500;
text-align: left;
position: absolute;
top: 0;
z-index: 1000;
width: 90%;
padding-top: 10%;
}
/* Masonry Content */
#top .av-masonry-entry.isotope-item .entry-content {
color: #ff5200;
font-size:16px;
text-align: left;
}
/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
background: rgba(0, 0, 0, 0.7);
}
2) Give the border of the masonry tiles an orange color on mouseover (and click).
After browsing this forum I came up with the the following code, but that doesn’t seem to do anything.
Any idea on how to make it look like in the attached image?

figcaption.av-inner-masonry-content.site-border:hover {
border-color: #00b1b0;
}
-
This topic was modified 6 years, 8 months ago by
rhae.
Hello,
on relaunch.blumen-hegemann.de I have built some content boxes that link to various sites with the HTML-Element.
The html goes like this:
<div class="button-box">
<a href="floristik"><img src="https://relaunch.blumen-hegemann.de/wp-content/uploads/button-blumen.jpg" alt="Blumen" /></a>
<a href="floristik"><div class="button-text">Blumen</div></a>
</div>
The CSS:
.button-box {position: relative; width:360px; height:360px; margin-bottom: 80px; }
.button-img {width: 100%; height: 100%;object-fit: cover;opacity: 0.7; }
.button-text {position: absolute; left: 0;width: 100%; top: calc(50% - 20px); text-align: center; font-size: 58px; line-height: 1.2;letter-spacing:5px; font-weight: bold; color: #000;text-transform: uppercase; }
.button-img:hover {opacity: 0.4; }
Nothing spectacular, the button fades on hover, that’s all.
Now Enfold theme add the following before the closing :
<span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 360px; width: 370px;">
<span class="image-overlay-inside">::before></span>
</span>
The result is very strange: depending on where I hover over the box (top, middle, down), either my CSS works, or the Enfold image-overlay works, or (middle) nothing happens.
How can I turn off this animation (image-overlay)?
Thanks,
Daniel
-
This topic was modified 6 years, 8 months ago by
danielmarsch.
Hi there,
When I create/edit a page there used to be an option on the right hand side for choosing whether there was a side bar or not on the page, and I don’t see that option anymore…can you please guide me how to do that?
And I would like to change my menu/top bar to look like this https://www.kelseygrant.com/#/programscourses/. I had a play, but can’t change the font size of my menu names or get the social media icons to disappear (is that my making another space?), please can you help me with this :)
Thanks so much,
Kali
1) make a: Fullwidth Easy Slider
2) choose slide-show transition : fade
3) place an image and put html-code into : caption – caption text field:
<div>A subheading line included before the buttons</div><div class="avia-double-buttons "><a href="https://kriesi.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=Kriesi" class="avia-double-button avia-double-button-2">Purchase Now</a></div> (put it in without line-breaks !)
As you see – you can add infront of the buttons a subheading line!
4) put this to your quick css:
.avia-double-buttons {
margin-top: 30px;
text-align: center;
position: relative;
}
#top #wrap_all .avia-slide-wrap .avia-double-button,
#top #wrap_all .avia-hover-fx .avia-double-button {
background: rgba(0,0,0,0.2);
border-color: #fff;
color: #fff;
padding-bottom: 11px;
text-decoration: none;
}
#top .avia-double-button {
letter-spacing: 1px;
padding: 13px 20px;
padding-bottom: 13px;
text-transform: uppercase;
font-size: 13px;
text-align: center;
min-width: 175px;
display: inline-block;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
border: 4px solid #fff;
border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-right-width: 4px;
border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
text-decoration: none;
}
#top .avia-double-button-1 {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-right-width: 2px;
}
#top .button_or {
position: absolute;
display: block;
height: 26px;
line-height: 21px;
width: 26px;
text-align: center;
top: 50%;
left: 50%;
margin: -13px 0 0 -14px;
background: #fff;
color: #666;
border-radius: 100px;
font-size: 10px;
border: 2px solid #FFF;
font-style: italic;
font-weight: 600;
z-index: 11;
}
#top .avia-double-button-2 {
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-left: none;
border-left-color: currentcolor;
}
/** if you like to have different hover colors **/
#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-1:hover,
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-1:hover {
background: rgba(0, 100, 190, 0.6);
color: #fff;
}
#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-2:hover,
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-2:hover {
background-color: rgba(200,0,120,0.6);
color: #fff;
}
for responsive behavior – test what fits best as width value:
@media only screen and (max-width:767px) {
.responsive #top .avia-double-button {
width:50%;
min-width:50%;
margin:0
}
}
Result: https://webers-testseite.de/doublebutton/
I am trying to add 5 stars – icons with this css code. I am able to insert words, but not icons. Please improve this code.
.comment-header::after {
content: " any words here is working ";
}
The following are not working
<span class=’av-icon-char’ aria-hidden=’true’ data-av_icon=’’ data-av_iconfont=’entypo-fontello’ ></span>
[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='left' animation='' color='#ffd900' av_uid='' admin_preview_bg=''][/av_font_icon]
I would like the the left arrow next to the Back text on the page.
[av_font_icon icon='ue884' font='entypo-fontello' style='' caption='' link='page,738' linktarget='' size='40px' position='center' animation='deactivated' color='#000000' av_uid='' custom_class='' admin_preview_bg=''][/av_font_icon]Back