-
Search Results
-
Using the shortcode, I added a contact button to my footer. It displays fine if I use a color (red, for example) in the color designation of the shortcode. However, when I reference a hex color that matches the color of all the other buttons on the site, it displays as white. Could you take a look at my code below and let me know if I have something configured wrong? I am trying to achieve the dark orange color that is the default “theme color.”
[av_button label='Contact' link=''/link/" color='#da4824' custom_bg='#444444' custom_font='#ffffff' size='small' position='left' icon_select='yes' icon="]
Thanks!
In reply to: Problems display different browsers
Ok , Works.
Now , I have customized the menu with the code below…
But why are the writings not as clear as in other websites? I used the same character…
Here my Site: – https://residenzeparadiso.com/contatti/ –
Here Another Site: – http://www.hotelcostaparadiso.it/it/contatti-costa-paradiso.php –
Can I have even more Thin character or do I have to change Font?
Thanks#avia2-menu.menu li,.weather {
font-size: 13px !important;
}#avia2-menu .menu-item a {
font-weight: 100;
}#header .av-main-nav > li > a {
font-size: 18px!important;
font-weight: 100;
}In reply to: Enfold is not truly responsive
Hi,
First of all really nice web site, congratulations. Amazing way of using Enfold.
Going although forward, the issue is that you have different elements and the way you setup-ed things, it does require to create some custom code
so everything to work properly on mobile.Why is that?
When you are using a fixed font size for a headline for example, you do need to assign the size of it also for mobile, so it can function properly.
That would require some custom work to be done properly and in a deep level like you ask for.Best regards,
BasilisIn reply to: givewp styling button
Hey isaaccolavecchio,
1. Try adding this css code in Quick CSS (located in Enfold > General Styling):
#top .give-btn.give-btn-modal { margin: 0; padding: 16px 20px; border-radius: 2px; border: 2px solid #333 !important; font-weight: normal; font-size: 0.92em; min-width: 142px; outline: none; background: transparent; }2. As for the glitch, try adding this in Quick CSS:
#top #give_purchase_form_wrap .give-fl-label { display: none !important; }Hope this helps :)
Best regards,
NikkoIn reply to: alternative content
Hi Mike,
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
#top .swpm-username-label label, #top .swpm-password-label label, .swpm-rember-label { color: #ccc; } .main_color input[type='submit'].swpm-login-form-submit { background-color: #ccc; color: #666; border-radius: 3px; margin-top: 10px; font-size: 14px; }If you need further assistance please let us know.
Best regards,
VictoriaHi heikonet,
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
.title_container .main-title { font-size: 14px; line-height: 1.3em; width: 76%; margin-bottom: 10px; }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Mailchimp button change
Hey poylomat,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-mailchimp-form .button { background-color:red !important; color:green !important; font-size:20px !important; }Not sure what you mean by name though?
Best regards,
RikardTopic: Mailchimp button change
Hi,
How can I change the background color, the font color, name and size of the button in the malchimp module ?
Regards,
Matthieu.In reply to: Text Format
Hey curmi01,
You can go to Enfold > Advanced Styling and set the styles and font sizes of paragraph, heading tags and other elements, if what you’re looking for isn’t available, I would suggest using Custom Css Classes: https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ combined with Quick CSS. Hope this helps.
Best regards,
NikkoCould you send me the Enfold theme operation manual?
Including how to change the css fond file, and the normal usage.I have a woocommerce product grid on my front page. Since my website is both my artists portfolio and ecommerce platform I thought I might want to either hide or change text size/style of prices on the front page woocommerce product grid.
But when people click through, I want them to go to the product page with prices.
Any short-code to eliminate the price or control the fonts separately?
Thank you.
StephanIn reply to: Problems display different browsers
Hi,
To resize your language and weather fonts, Try this code in the General Styling > Quick CSS field:#avia2-menu.menu li,.weather { font-size: 15px !important; }adjust the font size to suit. You will also need to adjust your position widths for the weather as the new font size will change it’s width.
Best regards,
MikeHi Nikko
Thank you for your kind feedback and input, but I’m afraid that it doesn’t help… The way you’re proposing will change all my subheadings to 70px.
Maybe I wasn’t clear enough in my last post, sorry! What I really need, is to be able to choose the font size in avia layout builder via dropdown. What I expect is to have more sizes to choose from the actual preset of 10 – 40 px. That means sizes between 10px and 70px (in steps of 5px).
I hope this is a bit clearer for your understanding? I guess, it must be added somewhere in the functions.php… (not in the stylesheet!)Thanx Nikko!
Regards, SchmiddyYour support forum has been very helpful. I couldn’t find a couple of answers, so I thought I would ask them here.
1) I have a Blog set to a page. Using Layout Builder I added Blog Posts. I was able to get rid of the author’s name in the settings for the Grid preview, but I would also like to get rid of the date.
2) The Read More and Author text is way too big. I would love for it to be smaller. I couldn’t find a setting for that. Any help with that would be greatly appreciated!
3) Lastly, the line-height spacing is way off. I used a style tag to set the font-size and color. It does not however allow the line-height code to take place. Here is the code I used in the Excerpt:
<b style=”font-size:15px; line-height:15px; font-weight:normal; color:#000000;”>All but line-height works</b>The site is locked until we are finished. I have put up a screen shot for you to see everything I am speaking of. You can get that by going to this link: https://acscompassion.com/ss-read-more-line-height-date.jpg
Thank you very much!
Hi Schmiddy,
Try turning on Custom Css Class for all ALB elements: https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ in the special heading’s Custom Css Class, add this: myheading save it and go to Enfold > General Styling > Quick CSS and add this css code:
.myheading .av-subheading { font-size: 70px !important; }Let us know if this helps :)
Best regards,
NikkoIn reply to: Blog – widget (categories, recent posts, and tags)
Hi,
Perhaps try adding the following:
.inner_sidebar a { color: #000 !important; font-weight: bold !important; font-size:14px!important; } .tagcloud a{ font-size:14px!important;}Now the above should work, however you have some !important declarations that already declared that you would need to clear first in order to get this to work 100%.
Best regards,
Jordan ShannonIn reply to: increase phone number size
Hey James2200,
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
.phone-info { font-size: 18px; }Best regards,
Jordan ShannonHi there,
If you visit my page gazinginward.com on a mobile device you will see that the h2 text is quite small (and in conflict with the image).
I would like to style it with the following in my style.css, but it seems to be overridden somewhere and I’m not seeing how to modify it. Can you please advise. Thanks so much./* for iPhone */ @media only screen and (max-width: 479px) { /*increase size/reposition full screen home caption*/ .responsive #top .slideshow_caption h2 { font-size: 40px !important; position: relative; top: 90px; } }In reply to: Breakpoint for navigation menu
Thank you for the reply. To clarify, I’m now using this code in the Enfold Quick CSS
‘@media only screen and (max-width:1124px) {
#avia-menu .menu-item {
display: none;
}#avia-menu .av-burger-menu-main {
display: block;
}
}@media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
width:auto !important;
float:right: !important;
}
}’The same issue is happening. Note that I do have some CSS in the style.css for the child theme. It is…
‘/* For the ALB, just hide an element using this. Remember do not us . in the ALB setting */
.hidethis { display: none !important; }/*This is a fix for the Event map being too narrow on the Event page.*/
.single-tribe_events .tribe-events-venue-map { width: 100% !important;}/* Let’s ditch the fancy ampersand */
.special_amp {
font-family: inherit;
font-style: normal;
font-size: inherit;
line-height: inherit;
font-weight: bold;
color: inherit!important;
}’So I’m not sure if there is a conflict? (I don’t think so.)
I generally try to use the style.css file for the child theme CSS. Should I be using Quick CSS instead? I seem to have occasional issues where changes work in Quick CSS, but are ignored in the Child Theme CSS.
SteveHi Mike,
Thank you for your answer. I did it well for the images but here this is for the « Easy slider ». I do not have the choice of the size and the name in this case… How can I do to delete the title ? I tried to delete the title caption in the html text but it doesn’t work as well…
[av_slide slide_type='image' id='634' video='' mobile_image='' video_ratio='' title='' link_apply='' link='lightbox' link_target='' 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_slide]
Thank you for your help.
Best regards,
Magali
Hi,
first: I am not a coder … and so I have awkwardly added
edit_post_link(__(' <div style="color: #ff0000; font-weight: bold; font-size: 11px;"> EDIT</div>'));in loop-index.php and other files, to have a red “edit” link at the bottom of each post and page, built with ALB and others not built with ALB, at the frontend.
I have somewhere found a function, to add such an “edit” link in a “function”, that I can add in the functions.php instead of adding my snippet in lots of other files, but I don’t find the source of this function anymore.
Any idea what to place in the functions.php for this edit-link please?
(P.S.: I do not use the WordPress toolbar, it is distracting me.)
Thank you.Worked like a charm!
(I changed font size to 10px and max width to 479px since it looks ok on wide views, it’s only the narrow views that were a problem.)
Many thanks for the quick response.
You guys are the best. :)Hey Julie,
Thanks for the screenshot and link. You can try to simply shrink the text. Please add the following to quick css:
@media only screen and (max-width: 767px) { .breadcrumb.breadcrumbs.avia-breadcrumbs .breadcrumb-trail{ font-size:8px!important; }}Best regards,
Jordan ShannonIn reply to: Changing the top bar
Hey johnstanley1990,
Please try adding this to your Enfold Theme Options > Header > Extra Elements > Phone Number or small info text:<ul class="contact"><li class="phone"><span class="in1"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]</a></span></li> <li class="mail"><span class="in1"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon]</a></span></li></ul>be sure to change the email address & phone number in the links.
Then add this code in the General Styling > Quick CSS field:
.in1 {display: inline-block !important; } .contact ul {list-style: none!important; list-style-type: none!important;} ul.contact li { display: inline!important;}This is the expected outcome:
Best regards,
MikeIn reply to: Search Icon on header
Hey Dan,
1- Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#top #header .av-main-nav > li#menu-item-search > a { font-size: 30px; }Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
2- You have some other modifications on header. It would be easier for us to login and replace/remove some of your existing custom CSS code. If you do not mind, could you please create a temporary admin login and post it here privately so we can look into it?
Best regards,
YigitIn reply to: Hide Top Bar When Scroll Only in Smartphone…
Hi, I Want Enabled Transparent Header on mobile Devices, I do not know if you can solve the problem!
I Left Here my CSS Code and Credentials..
Thanks#top.page-template-default.page.stretched #main .container:before {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#top.page-template-default.page.stretched #socket .container:before {
background-image: url(https://residenzeparadiso.com/wp-content/uploads/2018/01/whitebackground.png) !important;
background-repeat: repeat;
}
#top.page-id-61 .inner_sidebar {
font-style: normal!important;
}
.header_color .weather {
color: black;
}
#top .av_header_transparency #header_meta {
border-bottom: none! important;
}
.inner_sidebar {
margin-left: 30px;
}
.main_color table,
#top .main_color .avia-data-table.avia_pricing_minimal th {
background: transparent;
}
.weather {
position: relative;
float: right;
top: -10px;
right: 150px;
}
#top.page-id-53 .avia-slideshow-controls {
display:none!important;
}
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background: transparent!important;
position: absolute!important;
}
#header_meta .container {
max-height: 30px;
}
#top .av_header_transparency #header_main {
top: -50px;
}
.responsive .logo img {
max-height: 40%; top: 0px;
}
.weather {
top: -30px;
}
.responsive #header_meta .sub_menu ul {
text-align:right!important;
color:#000!important;
}
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
padding-left: 25px!important;
padding-right: 25px!important;
}
}
@media only screen and (max-width: 769px) {
.html_header_top #top #header .logo {
margin-top: 0px;
}
@media only screen and (max-width: 754px) {
.weather {
right: 115px!important;
}
}Hi Victoria,
Thanks to your precious help!
I’m not far from the original target now.There are still 2 issues that I’m not able to resolve by myself, most likely due to Enfold default framework for tables:
1 – Adjust height of the table row for .Event-Tr1 to a lower value that 70px.
I can increase the height for values above 70px with “.Event-Date td.Event-Td1 {width: 80px;}” but now below …2 – The text in table .Event-Tr2 ( with .Event-Trft5) does not inherit the color of the rest of the table specified for .Event-Date (which, in tis case, is color: var(–ColJAN);). Instead of it takes a light grey color.
Is there a way to have this color naturally inherited like the rest of the table?In order to get things clearer, I’ve made a capture of the label structure and posted it on imgur at https://imgur.com/a/LMMyg
On this image the borders have been displayed and paddings / margins added to better show the details of what belongs to what.Thanks to you, the CSS code for this label is summarised hereafter:
.avia_codeblock .Event-Cell { position: relative; margin: 8px 4px; width: 504px; border-style: solid; border-width: 2px 5px 2px 8px; border-radius: 20px; padding: 4px 4px 4px 4px; height: 140px;}
.avia_codeblock .Event-Date {width: 192px; border-right-width: 1px; border-right-style: dashed; display: inline-block;}
.Event-Date.Resa-Open {background-color: white; border-radius: 12px 0px 0px 12px;}
.avia_codeblock .Event-Date.Resa-Close {background-color: #DCDCDC; border-radius: 12px 12px 12px 12px;}.avia_codeblock_section.avia_code_block_0 table { width: 180px; margin: 5px; padding: 8px; border-spacing: 0px; border: 2px solid red; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-collapse: separate; font-family: “Gruppo-Regular”, Georgia, serif; }
.avia_codeblock_section.avia_code_block_0 tr {border: none; padding: 0px;}
.Event-Date tr.Event-Tr1 {height: 50px;} /* no effect if height > 70 px */
.Event-Date tr.Event-Tr2 {text-align: left; height: 24px;}.avia_codeblock_section.avia_code_block_0 td {border: 1px solid black; padding: 0px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.Event-Date.Resa-Open td {background: white; }
.Event-Date.Resa-Close td {background: yellow;}
.Event-Date td.Event-Td1 {width: 60px; text-align: right;}
.Event-Date td.Event-Td2 {padding: 0px 10px 0px 10px; text-align: center;}.Event-Trft1 { line-height: 40px; font-size: 53px; font-weight: bold; position: relative; bottom: -10px;}
.Event-Trft2 { font-size: 42px; padding-top: 0; position: relative; bottom: -4px;}
.Event-Trft3 { line-height: 27px; font-size: 27px; padding-top: 0; position: relative; bottom: 8px;}
.Event-Trft4 { line-height: 17px; font-size: 17px; position: relative; bottom: 14px;}
.Event-Trft5 { line-height: 24px; font-size: 24px; padding: 0px; font-weight: bold;}.Aix {background-image: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Provence-Aix_op.png”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.Antilles {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Antilles_op.png”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.OPEN:hover {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Resa-open_op.jpg”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box;}
.CLOS:hover {background: url(“https://pure-detox.fr/wp-content/uploads/2017/12/Event-Resa-close_op.jpg”); background-position: center; background-size: auto auto; background-repeat: no-repeat; background-origin: padding-box; cursor: crosshair;}@media only screen and (min-width: 551px) {
.EventLoca {width: 292px; height: 80px; position: absolute; top: auto; left: auto; border-radius: 8px; display: inline-block;}
}@media only screen and (max-width: 550px) {
.Event-Cell { width: 317px;}
.Event-Date {width: 317px; border-right-width: 0px;}
.EventLoca {width: 292px; height: 80px; position: relative; width: 100%; margin: 0 auto; border-radius: 8px; display: inline-block;}
.DateTable {margin-left: 80px;}
.Resa-Open {border-radius: 12px;}
}:root {
–ColJAN: #2f75b5;
–ColFEV: #27adc3;
–ColMAR: #3cbe96;
–ColAVR: #00e200;
–ColMAI: #b5d901;
–ColJUI: #f2be00;
–ColJUL: #ff8000;
–ColAOU: #ec1e1e;
–ColSEP: #e8346f;
–ColOCT: #b72f8c;
–ColNOV: #89258d;
–ColDEC: #3d4999; } */Thanks once more for your help / advice.
Berst regards,
StephaneIn reply to: WooCommerce cart icon to Image
Hi Zetrh,
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
.cart_dropdown { height: 60px; width: 60px; top: 30px; } .cart_dropdown_first .cart_dropdown_link { line-height: 44px; font-size: 22px; }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Dropcap vertical align
