Hi support team,
How can I increase the font size on mouse hover, all over the site?
is there a css code that i need to insert to the custom css that can do it?
Thanks
Tal
Hi!
Please try the following in Quick CSS under Enfold–>General Styling:
.title_container .main-title {
font-size: 28px !important;
}
Best regards,
Rikard
Hi,
I turned on the custom ID on the them and I am trying to make some customization to some classes to a specific ID, but for some reason I am doing something wrong. The ID does not acknowledge the classes. it worked in the pas. I am confused.
https://www.evernote.com/shard/s113/sh/4d9bb925-3f7a-4704-9621-4112ec9a5d50/09dc5dbb6803d6257adcd12bfb9dc930
https://www.evernote.com/shard/s113/sh/9a0ff177-d0a0-4c9e-bc61-ab6417a0e49d/72cd3b7b6045343c736869befa2ee1c8
illu-box {
background-color: #e5e5e5;
}
#top .illu-box li {
line-height: 14px;
}
#top illu-box h1 {
font-weight: bold;
color: white;
background-color: #a9ceea !important;
}
CSS:
#top .illu-box h2 {
font-weight: bold;
font-size: 36px;
c
Hi guys,
I wanted the phone number that appears in the header to be bigger and stumbled across an old post to get some code to have a bigger number including a link to call but I need to use two numbers and using the below code I get a line break which makes the top header too big.
How do I do this so both links are side by side with no line break?
<h3 style=”font-size: 18px !important; color: White !important;”>OFFICE: 12345 678 910</h3><h3 style=”font-size: 18px !important; color: White !important;”>MOBILE: 12345678910</h3>
Appreciate any advice/help.
Thanks.
I want to have some text, and then a button in the ‘extra info’ area.
I have
[av_button label='Book Your Show ' link='manually,http://link' link_target='' size='medium' icon_select='no' icon='ue800' font='entypo-fontello' color='orange' custom_bg='#444444' custom_font='#ffffff'] or call us on xxx xxx xxxx with any questions
but it puts the button on a line above the text after the button.
How can i make it so that everything is on the same line – so the text is next to the button rather than beneath it
Hey!
Please add this to the content of the widget and select to not show the widget title:
<a href="tel:+18665592527"><h3 style="font-size: 24px !important; color: #009900 !important;">(866) 559-2527</h3></a>
Best regards,
Rikard
-
This reply was modified 10 years, 9 months ago by
Rikard.
Hey!
1.) I implemented this code in your Quick CSS and it seems to work fine for me:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive #main .container_wrap:first-child {
margin-top: 156px;
}}
Don’t forget to clear browser cache, if necessary.
3.) Sorry, use this code instead:
.avia-layerslider {
border: none;
}
5.) When the menu is too long that normal behavior. However, it’s not happening for me. Can you show us screenshots of the issue? You could try to decrease menu font size for this screen size:
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
#top #header .av-main-nav > li > a {
font-size: 12px;
}}
Hope this helps.
Regards,
Andy
Hi!
Please change the code i posted in my previous post to following one
.according-new section:nth-child(1) p.toggler:hover,.according-new section:nth-child(1) p.toggler {
background: url(//xpertpoin8.com/demo/frattini/wp/restaurant/wp-content/uploads/2015/02/menu-1.jpg) no-repeat center center;
background-size: 100% auto;
}
.according-new section:nth-child(2) p.toggler:hover,.according-new section:nth-child(2) p.toggler {
background: url(https://xpertpoin8.com/demo/frattini/wp/restaurant/wp-content/uploads/2015/02/menu-3.jpg) no-repeat center center;
background-size: 100% auto;
}
.according-new p.toggler {
min-height: 98px;
text-align: center;
padding-top: 40px;
color: white;
font-size: 20px;
}
You should change the code for each toggle according to first two codes
Best regards,
Yigit
Hi jugalbandi3!
So when you resize your browser window your wanting the gallery to stick to 6 columns and then as the screen get smaller your wanting it to go to 2 columns automatically and skip the 3 column layout?
If that is correct then try commenting out lines 2517 – 2522 in /enfold/css/shortcodes.css.
@media only screen and (min-width: 767px) and (max-width: 989px) {
.responsive .av-masonry-col-flexible.av-masonry-gallery .av-masonry-entry{width:33.3%;}
.responsive .av-masonry-col-flexible.av-masonry-gallery .av-masonry-entry.av-landscape-img{width:66.6%;}
.responsive .av-masonry-col-automatic .av-masonry-entry .av-masonry-entry-title{font-size:13px;}
.responsive .av-masonry-entry .av-masonry-entry-title+.av-masonry-entry-content{display:none;}
}
Best regards,
Elliott
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.according-new p.toggler {
min-height: 98px;
background: url(https://xpertpoin8.com/demo/frattini/wp/restaurant/wp-content/uploads/2015/02/menu-1.jpg) no-repeat center center;
background-size: 100% auto;
text-align: center;
padding-top: 40px;
color: white;
font-size: 20px;
}
Best regards,
Yigit
Hi!
Please try this instead:
.blog-categories a, .minor-meta a {
font-size: 15px !important;
font-weight: bold !important;
}
I like the theme of your site by the way, I rescued a dog myself about a year ago. She’s healthy and happy now :)
Regards,
Rikard
Thanks!
Could I also please ask how to change the formatting to make the category bigger using CSS?
I tried the following but it doesn’t do anything.
.blog-categories-minor-meta {
font-size: 15px !important;
font-weight: bold !important;
}
-
This reply was modified 10 years, 9 months ago by
Mark.
Hey!
It looks like the special heading font size was a bit to big to fit on mobile, please try the following in Quick CSS:
@media only screen and (max-width: 767px) {
.av-inherit-size .av-special-heading-tag {
font-size: 0.7em !important;
}
}
Auto play is disabled on smartphones for a couple of reasons, roaming rates being one. You can set a fallback image for smartphones in the color section in the Section Background tab.
Best regards,
Rikard
Hi guys,
first thanks for the great tutorial about the integration of MailChimp!
But I’m sorry, I can’t find the code for changing the font color in the MailChimp formular.
My second question: how can I change the size of the submit button?
3. question: Is it possible to get another size of the same formular for the sidebar?
Could you help me to fix the issues?
Thanks in advanceand have a nice weekend!
Andreas
-
This topic was modified 10 years, 9 months ago by
a-l-p.
I have several types of comments formatting that I would like to do…on pages I would like to set comments formatting css differently than on a post.
ideally it would look something like this
.single comment_container {
font-size:10ps;
color: rgsb(0,0,0,0);
}
.single comment_container {
font-size:10px;
text-color: rgba(0,0,0,0);
}
.page comment_container {
font-size:10px;
text-color: rgba(45,125,40,0);
}
Somehow this is not working however…its impractical for me to format specifically for a particular page as there will be many pages and or many posts.
Any help would be most appreciated as what I have tried has not worked.
Hi!
Please add following code to Quick CSS
#header .textwidget {
font-size: 24px;
}
Regards,
Yigit
Hi alex5252!
Open up /enfold/includes/loop-index.php and around lines 101 – 109 you should see this.
//echo preview image
if(strpos($blog_style, 'big') !== false)
{
if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
}
if(!empty($before_content))
echo '<div class="big-preview '.$blog_style.'">'.$before_content.'</div>';
Try moving that code down so it displays right above line 198.
// echo the post content
You can style those sections with this CSS.
.single h2.post-title { font-size: 15px !important; }
.single .post-meta-infos span, .single .post-meta-infos time { font-size: 15px !important; }
Regards,
Elliott
Hi,
i’m trying to adjust the menu text font-size in my site.
in Chrome and iE no problems,
but in firefox the text drops down.
i tried looking for solutions, but couldn’t find any
i’d love some help,
10x, eli
/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/
/*Add your own styles here:*/
/*.iconbox .iconbox_content .iconbox_content_title {
font-size: 40px!important;
}*/
.iconbox {
opacity: 0.7;
}
/*table styling itinerary*/
td {
border-bottom-color: #ffffff!important;
border-right-color: #ffffff!important;
border-top-color: #ffffff!important;
border-left-color: #ffffff!important;
}
Try with this instead:
@media only screen and (max-width: 480px) {
.slideshow_align_caption br {
display: none;
}
.responsive #top .slideshow_caption h2 {
font-size: 20px !important;
}
.responsive #top .avia-slideshow-button{
margin-top: 0;
}
}
Cheers!
Josue
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 989px)
{
.responsive #top .sticky_placeholder{height:0px;}
.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }
.responsive #top .av-menu-mobile-active {text-align: center; }
.responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block;}
.responsive #top .av-menu-mobile-active .av-subnav-menu{display:none;}
.responsive #top #wrap_all .av-menu-mobile-active.container {width:100%; max-width: 100%;}
.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block;}
.responsive #top .av-subnav-menu > li:first-child{margin-top:-1px;}
.responsive #top .av-menu-mobile-active .av-subnav-menu li{display:block; border-top-style: solid; border-top-width: 1px; padding:0;}
.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a{border-left:none; padding:15px 15%; text-align: left;}
.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: "\25B6"; position: absolute; top: 15px; margin-left: -10px; font-family: 'entypo-fontello'; font-size: 7px;}
.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul{visibility:visible; opacity: 1; top:0; left:0; position: relative; width:100%; border:none;}
.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul{display: none;}
.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul.av-visible-sublist{display: block;}
.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul a{padding:15px 19%;}
.responsive #top .av-menu-mobile-active .av-subnav-menu li li > ul a{padding:15px 24%;}
.responsive #top .av-menu-mobile-active .av-subnav-menu li li li > ul a{padding:15px 29%;}
}
Change 989px as needed. Don’t copy the code from the mail notification but from the forum reply.
Cheers!
Josue
Hey!
Try adding this code your child theme style.css:
form.wpcf7{margin:0!important;clear:both}
.wpcf7 p br{display:none}
.wpcf7 label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.wpcf7 p{position:relative;clear:both;float:left;width:100%;font-weight: bold;}
.wpcf7 p.hidden{position:absolute;width:0;left:0;top:0}
.wpcf7 .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.wpcf7 .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.wpcf7 .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.wpcf7 .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.wpcf7 .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.wpcf7 .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .wpcf7 .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .wpcf7 input[type='text'],#top .wpcf7 input[type='email'],#top .wpcf7 select,#top .wpcf7 textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .wpcf7 select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.wpcf7 .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.wpcf7 .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.wpcf7 p input, .wpcf7 p textarea, .wpcf7 p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
div#wdm-nocapt-recapt-id { clear: both }
Also edit the CF7 Form as follows:
– Set a class of “button” to the submit button.
– To get the asterisk use the following HTML tag (just paste it after each label):
<abbr class="required" title="required">*</abbr>
Cheers!
Josue
This reply has been marked as private.
Hi Ismael,
thanks for the reply. The add_filter actually didn’t work… the Text get jumbled up with the logos under “Share this entry”…
so I created a loop-index.php copy in /includes/ on my child theme and added
echo do_shortcode(‘[av_one_third first]
[av_textblock size=\'\' font_color=\'\' color=\'\']
<h2 style=”text-align: center;”>Join our newsletter</h2>
[/av_textblock]
[av_codeblock wrapper_element=\'\' wrapper_element_attributes=\'\' deactivate_shortcode=\'aviaTBdeactivate_shortcode\' deactivate_wrapper=\'aviaTBdeactivate_wrapper\']
<script type=”text/javascript” src=”http://app.getresponse.com/view_webform.js?wid=12082303&u=2Qqs”></script>
[/av_codeblock]
[/av_one_third]‘ );
right after the do_action(‘ava_after_content’, $the_id, ‘post’); on line 229.
and it does the same thing as the add_filter, it puts it right in the middle of the Share this logos… Almost seems like a bug in the code.
I would however want it below the comments.
ideas?
Thanks Rikard, that fixed it! One more thing I noticed regarding the testimonial slider (large) that I just noticed was changed. The font size on the iPhone is now very small. How can I increase the font size for this section to match the font size of the rest of my website. I didn’t see any options to change it. Can you provide me with some quick css to change this, I need it to be 18px. Thank you!
Hey mrivanp!
Please use the following instead, line height need to be set as well:
.toggler {
color: black !important;
font-size:35px !important;
line-height:35px !important;
}
Not sure if I understand your last question but you could try adding padding to the same class as above:
padding-bottom: 20px !important;
padding-top: 20px !important;
Cheers!
Rikard
Hey parentecoaching!
Thank you for using Enfold.
You can edit the includes > loop-index.php file. Use the do_shortcode function: https://codex.wordpress.org/Function_Reference/do_shortcode
If you don’t want to edit the file directly, you can use the ava_after_content action hook. Add something like this in the function.php file:
add_filter('ava_after_content', 'ava_after_main_container_mod', 20, 1);
function ava_after_main_container_mod() {
if(is_singular('post')) {
$output = do_shortcode("[av_textblock size='' font_color='' color='']Click here to add your own text[/av_textblock]");
echo $output;
}
}
Cheers!
Ismael
Hey mdmllc!
Thank you for using Enfold.
The footer height will depend on the content inside. The current height is quite normal for a 3 widget footer on mobile device. Having said that, you have to compress the footer widgets in order to decrease the height of the footer container. You can start by decreasing the font size, widget margins etc. Use css media queries. Example:
@media only screen and (max-width: 767px) {
#footer .widget p {
font-size: 11px !important;
}
#footer .widget {
margin: 10px 0 5px 0;
}}
Regards,
Ismael
Hey EricSmeets!
Please try the following in Quick CSS under Enfold–>General Styling:
.tribe-events-list-widget-events h4.entry-title {
font-size: 15px !important;
}
Regards,
Rikard
Hi.
I have increased the font size in accordion title using .toggler {
color: black !important;
font-size:35px
}
However as you can see from my website below in private reply, the font line spacing is not increasing along with the font size. Why is this?
My second question is – how can i increase the space between the actual accordion elements so that everything is easier to read?
Thanks