Hi,
Please try this CSS as well:
span.comment-count {
font-size:12px !important;
}
Best regards,
Rikard
Hi
I would like to increase the size of the layer slider in the mobile view, please (I have selected the responsive setting within the slider setup). I have tried the following in the in the quick CSS but it has not worked. (I am using a child theme)
@media only screen and (max-width: 479px) {
#layerslider_10 .ls-wrapper.ls-bg-outer, #layerslider_10,
#layerslider_10 .ls-wrapper.ls-bg-wrap img {
height: 200px !important;
}
#layerslider_10 .ls-wrapper.ls-in-out img {
width: 135px !important;
height: 50px !important;
}
#layerslider_10 .ls-wrapper.ls-in-out h1 {
font-size: 14px !important;
margin-left: -60px !important;
}
}
Login details are below. I’m also having an issue with the placing of the boxes below the slider. It could be to do with the following coding but they are on top of the sliders i.e. blocking them out and I would like the slider to show.
I did insert the following before
.flex_column_table.av-equal-height-column-flextable.-flextable{
z-index:99999999999;
}
Thanks
Hi,
You can use this css code to change the style of the table caption.
.main_color table caption {
background: green;
color: #ffffff;
padding: 20px;
font-size: 2em;
font-weight: 600;
}
Best regards,
Ismael
Hi Boyan,
Please try this instead:
@media only screen and (max-width:984px) {
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
font-size: 36px;
color: #fff !important;
}
.html_av-overlay-side #top .av-burger-overlay-scroll {
background: rgba(156, 156, 156, 1) !important;
}
.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
background-color: #fff !important;
}
}
Best regards,
Rikard
Hey info224,
What exactly are you looking to reduce? The font size in the widgets only? You can try this to reduce the titles for instance:
#footer .widgettitle {
font-size:12px !important;
}
Best regards,
Rikard
Theme: Enfold
Version: 4.4.1
I have not made any changes to the site but have just noticed in Safari that the main menu is not showing (it was previously a hambuger menu).
I have the following code, which may need adjusting?
body {
font-size: 16px;
}
@media only screen and (max-width: 768px) {
.avia-layerslider {
display: none!important;
}}
@media only screen and (max-width: 1250px) {
.custom-font {
font-size: 30px !important;
}}
@media only screen and (min-width: 1250px) {
.custom-font {
font-size: 40px !important;
}}
.avia-button {
font-size: 23px !important;
}
@media screen and (max-width: 1250px) {
nav.main_menu { display: none !important; }
#advanced_menu_toggle { display: block !important; }
}
Hello,
My Widget title in the footer of the site is showing black on the home page. But all the other pages showing white in which I’d like. I’ve added the quick css below and in worked for everything but home page. I also went into advanced editing and made the color white for widget titles and that doesn’t do anything.
#footer .widgettitle {
font-size: 20px;
color: #ffffff!important;
}
Hi,
To remove the author links I added this function in your functions.php:
function remove_author_link(){
?>
<script>
(function($){
$(document).ready(function(){
$('.blog-author.minor-meta a').contents().unwrap();
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_author_link');
Please note that if you want to adjust the author font size & color, you will now need to use this css:
.blog-author.minor-meta {
color: red !important;
font-size: 14px !important;
}
naturally adjust to suit.
Best regards,
Mike
No they still don’t all work.
I removed the home icon in free trial sub menu as still doesn’t work. The vertical alignment was all wrong as attached link in the section below shows but as I wrote, I removed it now. However, that home icon still shows on Android after clearing cache even though I removed it from the menu! It can stay BUT I need to know what code you added and where that is as I can’t find that code anywhere so I can get rid of it if I want. Please let me know where you made all the changes and what they are.
Also when making desktop smaller, the Free Trial sub-menu has the wrong font when the mobile menu is used. It shows in a serif font when a desktop window is sized to be as small as possible but should remain in the site default of Open Sans font on small desktop windows too. Android is fine. Please fix this as I don’t understand why that should even be happening.
Also these errors are still there
a) ON chrome and FF, the free trial button has white text. On Edge it is grey #63727e although the background is the same on all. Can you please fix appearance of the button so I get white text on Edge?
b) the cart link is still not correct as the link is still in the wrong place. And this is obvious on Android as you can touch in the row above and on desktop in a small mobile sized window as you can see the link change when the cursor is still on the row above it. If you can fix it would be nice. Else leave as is BUT I would like to know where any changes you made or make are and what they are.
Thanks
Hi,
Sorry, I’m not sure what you mean by “customize the link to the name of the author appearing on the home”
please try explaining.
To change the font color and size of the author name, please try this css:
span.blog-author.minor-meta a {
color: red !important;
font-size: 14px !important;
}
Please adjust to suit, then clear your browser cache and check.
Best regards,
Mike
Hi OPVAB,
Thanks for giving us admin access.
I have checked Show element options for developers in Enfold > Layout Builder.
Then on the page, I used a grid row to create 3 columns then added in Custom CSS Class: custom-grid
In your Quick CSS (located in Enfold > General Styling), I added this code:
.custom-grid .flex_cell {
padding: 0 !important;
}
.custom-grid .flex_cell_inner {
position: relative;
}
.custom-grid .av_textblock_section {
background: rgba(0,0,0,0.5);
padding: 20px 20px 10px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 100;
}
.custom-grid .avia-image-container-inner, .custom-grid .avia-image-container-inner .avia_image {
width: 100%;
}
.custom-grid .av_textblock_section h3 {
font-size: 28px;
}
.custom-grid .av_textblock_section p {
display: none !important;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s linear;
-o-transition: opacity .4s linear;
transition: opacity .4s linear;
}
.custom-grid .flex_cell_inner:hover .av_textblock_section p {
display: block !important;
opacity: 1;
filter: alpha(opacity=100);
}
The only thing remaining is the animation which can be done via javascript which would take sometime to do and outside the scope of our support.
Best regards,
Nikko
Hi,
You can change the font size of these circles with this code
#top #wrap_all .pagination .current, #top .pagination a, #top #wrap_all .fullsize .template-blog .pagination a {
font-size: 15px;
}
Best regards,
Peter
Hi Rikard,
i had to add !important then it works
@media only screen and (max-width: 767px) {
p.toggler {
font-size:13px !important;
}
}
Thanks
-
This reply was modified 7 years, 7 months ago by
simonac.
Hey simon,
@media only screen and (max-width: 767px) {
p.toggler {
font-size:20px;
}
}
Best regards,
Rikard
Hi,
i need to have another fontsize for the titles of the toggler.
This is what i tried but without success.
@media only screen and (max-width: 767px) {
h3.toggler-title {
font-size: 12px!important;
}}
Regards, simon
Hi,
Glad to see that you were able to get it working, to correct the color and font size please try this css:
.header_color .main_menu ul:first-child > li.menu-item-824 > a {
color: #fff !important;
font-size: 16px !important;
}
.header_color .main_menu ul:first-child > li.menu-item-822 > a {
color: #fff !important;
font-size: 16px !important;
}
please adjust the size to suit.
To adjust the location of the menu item in the menu for different screen sizes please try the following css. Please remove the other css so this will work correctly.
ENG:
@media only screen and (max-width: 476px) {
.av-burger-overlay-active li#menu-item-822.menu-item-822 {
margin-left: -230px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
@media only screen and (min-width: 477px) and (max-width: 770px) {
.av-burger-overlay-active li#menu-item-822.menu-item-822 {
margin-left: -200px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
@media only screen and (min-width: 771px) {
.av-burger-overlay-active li#menu-item-822.menu-item-822 {
margin-left: -180px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
ITA:
@media only screen and (max-width: 476px) {
.av-burger-overlay-active li#menu-item-824.menu-item-824 {
margin-left: -230px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
@media only screen and (min-width: 477px) and (max-width: 770px) {
.av-burger-overlay-active li#menu-item-824.menu-item-824 {
margin-left: -200px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
@media only screen and (min-width: 771px) {
.av-burger-overlay-active li#menu-item-824.menu-item-824 {
margin-left: -180px !important;
display: block !important;
color: #fff !important;
animation: fadein 10s;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
}
Best regards,
Mike
Hi,
Add this to quick css:
.pagination-meta{
font-size:15px!important;
}
Best regards,
Jordan Shannon
Hey WP Turned,
The reason it’s not centered is because of the font size and the length of the text. I can see you have this code:
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all .av-mini-font-size-40{font-size:40px !important;}
.responsive #top #wrap_all .av-mini-font-size-18{font-size:18px !important;}
}
Try to replace 40px to 34px, let us know if this helps.
Best regards,
Nikko
Hi,
Thanks for giving us admin access. I checked your site and there’s nothing unusual in the css but for some reason it’s increasing.
I have added this css code in Quick CSS (located in Enfold > General Styling):
#top .av-large-testimonial-slider .avia-testimonial-content {
font-size: inherit;
}
Let us know if you need further assistance.
Best regards,
Nikko
Hi!
Yes sure – use this code in the text widget:
<ul class="noLightbox social_bookmarks">
<li class="social_bookmarks_facebook av-social-link-facebook"> [av_font_icon icon='ue8f3' font='entypo-fontello' style='' caption='' link='manually,https://www.facebook.com/precisionenergyptyltd/' linktarget='_blank' size='40px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon] </li>
<li class="social_bookmarks_linkedin av-social-link-linkedin"> [av_font_icon icon='ue8fc' font='entypo-fontello' style='' caption='' link='manually,https://www.linkedin.com/company/precision-energy-pty-ltd/' linktarget='_blank' size='40px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon] </li></ul>
and add this code to your quick css field:
#top .widget .social_bookmarks li {
float: none;
border-right: none;
display: inline-block;
}
Cheers!
Peter
Hi,
Please add this code to your child theme
add_filter( 'widget_text', 'do_shortcode' );
It’s required because the text widget does not support/execute shortcodes by default – see https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/
Then add this code to the footer text widget
[av_font_icon icon='ue8f3' font='entypo-fontello' style='' caption='' link='manually,https://www.facebook.com/precisionenergyptyltd/' linktarget='_blank' size='40px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon]
[av_font_icon icon='ue8fc' font='entypo-fontello' style='' caption='' link='manually,https://www.linkedin.com/company/precision-energy-pty-ltd/' linktarget='_blank' size='40px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon]
If you want to change the icon size replace 40px with another value.
Best regards,
Peter
Hi L-mobileGroup,
Thanks for giving us the link to your site.
I have checked it and I couldn’t find the code you posted when I tried to inspect your site.
As for 2, you can use this code instead:
@media only screen and (min-width:768px) and (max-width:1366px) {
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: block !important;
}
#top .av_mobile_menu_tablet .av-main-nav .av-burger-menu-main {
display: none !important;
}
}
For 3, use this code:
#avia-menu .hsizeheadingmenu > a:before {
display: inline-block;
font-family: 'entypo-fontello';
content: '\e808';
margin-right: 4px;
}
As for the new issue you have, can you try to disable Autoptimize plugin and check.
Let us know if this helps.
Best regards,
Nikko
I notice the text that labels the blog post pages is very small. I think this is called pagination?
Is there some custom css I can use to increase the size of the page number and for example where it says “Page 1 of 22.”?
One example I found here didn’t seem to work.
Thanks!
How do I change the magazine color to white?
I looked up the CSS – https://www.screencast.com/t/tWLsfAoKT24
Added this code to the General settings in Enfold:
.av-magazine .av-magazine-content-wrap .av-magazine-title av-magazine-title entry-title {
font-size: 14px;
line-height: 1.3em;
text-transform: none;
letter-spacing: normal;
padding: 0;
margin: 0;
color: white;
}
but it’s still dark.
Hi there everybody.
I am trying to add fontello icons with text, like here :
https://imgur.com/wzDRMzD
After adding this to the Enfold Setting>Header>Additional Elements>Phone Area/Small text
[av_font_icon icon='ue8ac' font='new' style='' caption='' link='' linktarget='' size='15px' position='left' color='#000000' av_uid='' custom_class='' admin_preview_bg=''][/av_font_icon]Gratis Versand in Deutschland! [av_font_icon icon='ue852' font='new' style='' caption='' link='' linktarget='' size='15px' position='left' color='#000000' av_uid='' custom_class='' admin_preview_bg=''][/av_font_icon] SSL verschlüsselte Verbindung[av_font_icon icon='ue84e' font='new' style='' caption='' link='' linktarget='' size='15px' position='left' color='#000000' av_uid='' custom_class='' admin_preview_bg=''][/av_font_icon] (Email address hidden if logged out)
I am getting this https://imgur.com/md3KA7D
How can I separate icons and connect them to the text? ? or   doesn’t work
Thanks
-
This topic was modified 7 years, 7 months ago by
tolik1404.
Hi
next issue:
The Button is of course supposed to be IN the box – not below.
https://maskenzauber.com/temp/promobox.jpg
Here is the code:
[av_one_third first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-ooag']
[av_image src='https://yourdomain.de/wp-content/uploads/2018/09/bild.jpg' attachment='47' attachment_size='full' align='center' styling='' hover='av-hover-grow' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='fade-in' av_uid='av-jlz81v2h' admin_preview_bg=''][/av_image]
[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jlz83zz7' admin_preview_bg='']
Hier kommt der Text hin - also der zu marcus, oder Alix oder was auch immer du willst. Du musst nur darauf achten das die texte einigermaßen gleich lang sind damit sie unten einigermaßen bündig abschliessen.
[/av_textblock]
[av_promobox button='yes' label='Link' link='manually,#' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' label_display='' icon_select='no' icon='ue800' font='entypo-fontello' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' av_uid='av-jlz85932' admin_preview_bg='']
Ich bin der ....
[/av_promobox]
[/av_one_third][av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-ooag']
[av_image src='https://yourdomain.de/wp-content/uploads/2018/09/bild.jpg' attachment='47' attachment_size='full' align='center' styling='' hover='av-hover-grow' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='fade-in' av_uid='av-jlz81v2h' admin_preview_bg=''][/av_image]
[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jlz83zz7' admin_preview_bg='']
Hier kommt der Text hin - also der zu marcus, oder Alix oder was auch immer du willst. Du musst nur darauf achten das die texte einigermaßen gleich lang sind damit sie unten einigermaßen bündig abschliessen.
[/av_textblock]
[av_promobox button='yes' label='Link' link='manually,#' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' label_display='' icon_select='no' icon='ue800' font='entypo-fontello' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' av_uid='av-jlz85932' admin_preview_bg='']
Ich bin der ....
[/av_promobox]
[/av_one_third][av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' link='' linktarget='' link_hover='' padding='0px' border='' border_color='' radius='0px' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-ooag']
[av_image src='https://yourdomain.de/wp-content/uploads/2018/09/bild.jpg' attachment='47' attachment_size='full' align='center' styling='' hover='av-hover-grow' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='fade-in' av_uid='av-jlz81v2h' admin_preview_bg=''][/av_image]
[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jlz83zz7' admin_preview_bg='']
Hier kommt der Text hin - also der zu marcus, oder Alix oder was auch immer du willst. Du musst nur darauf achten das die texte einigermaßen gleich lang sind damit sie unten einigermaßen bündig abschliessen.
[/av_textblock]
[av_promobox button='yes' label='Link' link='manually,#' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' label_display='' icon_select='no' icon='ue800' font='entypo-fontello' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' av_uid='av-jlz85932' admin_preview_bg='']
Ich bin der ....
[/av_promobox]
[/av_one_third]
maren
Thanks, however it doesn’t seem like the code that was provided is working. I’ve even tried changing it to Georgia or Times New Roman – something that’s obvious to tell if the code is working. I’d also be interested in adding css to change the size of the font.
Can you please take a look? Thanks!
Hey bauchope,
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
@media only screen and (max-width:990px){
#full_slider_1,
#full_slider_1 .av_slideshow_full.avia-slideshow,
#full_slider_1 .avia-slideshow-inner,
#full_slider_1 .avia-slideshow li,
#full_slider_1 .avia-slideshow li img {
min-height: 240px;
height: 240px !important;
}
#full_slider_1 .avia-slideshow li img {
width: 140% !important;
max-width: auto;
}
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#full_slider_1 .avia-caption-title {
font-size: 32px !important;
}
#full_slider_1 .avia-caption-content p {
font-size: 22px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Rikard,
Thanks, but I don’t see a difference. This is everything I now have in Quick CSS (made some prior requests about the mobile view)
@media only screen and (max-width:767px){
body .av-special-heading .av-special-heading-tag {
font-size: 20px;
}
@media only screen and (max-width:767px) {
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
font-size: 20px;
color: white !important;
}
@media only screen and (max-width:767px) {
#contact .flex_cell.avia-builder-el-41 {
min-height: 350px;
}
}
@media only screen and (max-width: 990px) {
.slideshow_caption {
width: 100%;
}
}
Hi Mike,
Sorry for the late response. An other project kept me busy.
Maybe I should better discribe what I am trying to achieve.
What I would like to achieve:
– remove the enfold logo in the header when the visitot views the website on pc, tablet and mobile phones and display the site identity without loosing the menu.
Additional (but not important)
where site title: – font:mistral; font-size:25px; font-color:white
and tagline: – font:arial; font-size:15px; font-color:red
See one of my previous treads: https://kriesi.at/support/topic/remove-enfold-logo-from-header/
The reason you see the menu in header when looking at the website over a mobile phone is because I remmed (temporary diabled) the code below in the function.php
add_action(‘avf_logo_final_output’, function() {
ob_start();
?>
<div class=”custom_logo”>
<H2><?php echo get_bloginfo( ‘name’, ‘display’ ); ?></H2>
<H4><?php echo get_bloginfo( ‘description’, ‘display’ ); ?></H4>
</div>
<?php
return ob_get_clean();
});
As soon as I enable the code above, then I see the sidetitle and tagline again, but is the menu gone.
Do you have any advise how to solve this?
-
This reply was modified 7 years, 7 months ago by
alteba. Reason: remove unnessecary code