I placed an icon after some text
Available at [av_font_icon icon='ue924' font='entypo-fontello' style='' caption='' link='' linktarget='' size='15px' position='left' animation='deactivated' color='' av_uid='av-4edyl' custom_class='' admin_preview_bg=''][/av_font_icon]Amazon
But on my website frontside it show the icons before the word available…
All sorted… I’ve managed a little hack to get it work like I want it to. So far it is the best solution I can find that won’t alter the plugin’s files. If anyone is interested, here is what I did…..
Remember to use child-theme and you will need to be able to add your own jquery to the theme. Please check the forum for this.
Anyways..
1. Create a div just under the opening <body> tag in the header.
<div id="close-image-modal" class="close-image-modal">×</div>
2. Style the div/button as you wish in your child themes stylesheet, but remember to add the fixed positioning. (This is mine)
.close-image-modal {
display: none; /* hide initially. important */
position:fixed;
top:50px;
right:20px;
height:50px;
width:50px;
text-align:center;
line-height: 50px;
font-size:30px;
background-color: #fff;
color:#000;
z-index:2000;
border-radius: 50%;
transform: all 0.5s ease-out;
}
.close-image-modal:hover {
background-color: #76787c;
color:#fff;
}
/* hide the close button the magnific poopup creates */
button.mfp-close {
display:none !important;
opacity: 0 !important;
visibility:hidden !important;
}
3. Now add this jquery to your custom .js file.
(function($) {
$(document).ready(function() {
$("#close-image-modal").hide(); // make sure that the close button is hidden on document load
$(".avia_image").on("click", function() { // when image is clicked it needs to display the close button (if you ot using lightboxes everywhere, you will need play around with classes related.
$("#close-image-modal").show();
});
$("#close-image-modal").on("click", function() { // when custom div/button is clicked, it will trigger the actual close button and hide itself again.
$(".mfp-close").trigger("click");
$("#close-image-modal").hide();
});
});
})(jQuery);
Make sure you clear all cache and all should be good to go. This is a quick solution for me, but if anyone has a more elegant way, please do post.
Cheers.
Hi,
Which elements are you trying to adjust? The Windows 10 scaling settings will not affect the site or how the browser renders it. You have to adjust the website font or elements using css. You can also install a plugin that will allow users to manually adjust the font size.
// https://wordpress.org/plugins/zoom-widget/
Best regards,
Ismael
Hi,
Please change your css to this:
h3.av-masonry-entry-title.entry-title {
font-size: 30px !important;
color: red !important;
}
Best regards,
Mike
Hi,
how can I adjust the different font colors independently of each other.
Somehow these are always combinations in the normal settings.
But I would like to change the colors separately for the fonts listed in the file.
And –
how can i align the logo to larger in left.
If I change the size now, the distance to the slider is always increased.
So, the logo is not centered then.
Thanks.
Regards
Stefan
Hi Victoria,
thanks for the reply. I’ve changed the size options for H1 in the Advanced Styling but no effect on the Page (Cache cleared, Page reloaded, …) so i’ve tried to insert a custom css rule:
h1 {
font-size: 10px;
}
but again: no effect. (i’ve tried 10px, 18px to find the correct size).
Can i send you a login to our developer-page an you check this? Maybe I did something wrong…
best regards,
daniel
Hey Victoria,
The css I have right now is this: also because I needed the search bar in the logo header.
What can I remove to fix this?
@media only screen and (min-width: 990px) 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;
}
@media only screen and (max-width: 767px) {
.responsive #top .logo {
width: auto;
}
}
#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;
}
@media only screen and (max-width: 767px) {
.av-burger-menu-main{
left:300px!important;
}
#menu-item-search{
left:80px!important;
}
.logo img{
width:80%!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; }
@media only screen and (max-width: 767px) { #header .widget { width: 100%; position: absolute; left: 10%; top: 100px; }}
#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 Victoria,
thanks for the reply. Can you tell me, where i can find the actual dimension of “H3*? I have to know how big the font H3 is, so I can adapt H1.
At the moment there is only “default” in “Font Size”. But how big is “default”?
Best regards,
daniel
Hi Rikard,
now I need your help after all.
I changed the font size and color to white in /Advanced Styling /Main Menu Links.
But when I scroll down the links in the Sticky Menu stay white on my white background
Best regards
Bettina
-
This reply was modified 6 years, 8 months ago by
Thina.
Hi Support-Team,
for a local business https://oschwald.de/ we showcase contact info as a sticky header and this works fine for desktop users.
We inserted it via the Child Theme Header options
<span class=”av-icon-char” style=”font-weight:400;font-size:13px;margin-left:9px;” data-av_icon=”” data-av_iconfont=”entypo-fontello”> OSCHWALD * Rudolf-Blessing-Str. 7 * 79183 Waldkirch </span> <div class=”os-header”>Unser Kundenservice ist für Sie da: <span class=”av-icon-char” style=”font-weight:700;font-size:18px;margin-left:9px;” data-av_icon=”” data-av_iconfont=”entypo-fontello”> 07681 / 47448-0</span></div>
However, the content converges on smart phone viewports. https://photos.app.goo.gl/C98LKyPXsLyNEbSRA
Ideally, the phone no. crredentials should be placed under the address info. How can I fix this?
Thanks in advance for your help.
Best,
Michael
-
This topic was modified 6 years, 8 months ago by
midodrweb.
Hello,
I do have the following Problems.
1.) I created a few color sections for each side. Depend on the mobile device, the each section is displayed or not. On each section I have one H1-Heading. Problem is: SEO Tools detect duplicated H1 Headings. (They also see the not shown).
How can I manage it, to let these Sections wich are not displayed, not be detected?
2.) In my H1 Heading is following written:
Text1 <p style="font-family: Courier New; font-style:regular; font-size: 22px"> Text2</p>
SEO Tools detect Just Text1 as H1 Heading. Why?
Kind Regards,
Phil
Victoria,
thanks a lot to you!
I implented the element “masonry gallery”. It´s near to that what i want.
For editing the text size and fonts and the colors: Is the plugin “Simple Masonry Layout” good enough? And works with enfold? (I red the plugin isn´t proofed with enfold I guess..)
Or may I edit in an other way without an adittional plugin?
Cheers, Tom
(see private content for access)
-
This reply was modified 6 years, 8 months ago by
JS.
Hi urbandigital,
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
/* Header in sidebar to turn to burger on iPad 768px */
@media only screen and (max-width: 990px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img{opacity:1}
.responsive #top .av_header_transparency .logo img.alternate{display:none;}
.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
.responsive #top #main {padding-top:0 !important; margin:0;}
.responsive #top #main .container_wrap:first-child{ border-top:none; }
.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
.responsive .phone-info{float:none; width:100%; clear:both; text-align: center;}
.responsive .phone-info span{margin:0;padding:0; border:none;}
.responsive.html_header_top #header_main .social_bookmarks ,
.responsive.html_top_nav_header #top .social_bookmarks { width:auto; margin-top:-16px; }
.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
.responsive .logo a{display:table-cell; vertical-align: middle;}
.responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block; max-height: 80px;}
.responsive #header_main .container{height:auto !important; }
.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width: 1px;}
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
.responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
.responsive #header .social_bookmarks li{float:none; display: inline-block;}
.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
.responsive .logo img{margin:0;}
.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}
.responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a,
.responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a,
.responsive #top .av_header_transparency #header_main_alternate,
.responsive .av_header_transparency #header_main .social_bookmarks li a,
.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
.responsive #top .av_header_transparency #header_meta,
.responsive #top .av_header_transparency #header_meta li,
.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
.responsive.html_top_nav_header .av-logo-container{height:auto;}
.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}
/*new mobile*/
.responsive .av-burger-menu-main{display: block;}
.responsive #top #wrap_all .main_menu{top:0; height:80px; left:auto; right:0; display: block; position: absolute;}
.responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
.responsive #top .av-main-nav .menu-item{display:none;}
.responsive #top .av-main-nav .menu-item-avia-special{display:block;}
.responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
.responsive #header_main_alternate{display:none;}
.responsive #top #header .social_bookmarks{display:none;}
.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
.responsive #top .av-logo-container .avia-menu{height:100%;}
.responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
.responsive #top #main .av-logo-container .main_menu{display:block;}
.responsive #top #main .av-logo-container .social_bookmarks{display:none;}
.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
.responsive #top #main .av-logo-container .main_menu{display:block;}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
.responsive #top #wrap_all .av-logo-container {padding:0;}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a{
min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
}
.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
.responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
background:transparent;
color: inherit;
}
.responsive.html_top_nav_header .av-logo-container .inner-container{overflow: visible;}
.html_header_sidebar #header .container {
width: 90%;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hey MadRhino,
Thanks for the links, your merged css styles don’t match between the sites, one has this css:
h3 {
font-size: 55px;
line-height: 1.075em;
text-align: center;
text-transform: none !important
}
the other doesn’t.
Please try disabling your Enfold Theme Options > Performance > JS & CSS file merging and compression and check the option at the bottom of the page to Delete old CSS and JS files then save the options and reload your site and clear your browser and site cache. Then enable your JS & CSS file merging and compression again to see if your css rule is added.
Otherwise, try to add this css:
.html_elegant-blog .avia-content-slider .slide-entry-title {
text-transform: none !important;
}
Best regards,
Mike
Hey waveseven,
Please remove your code and add it like this, so that it does not affect smaller sized screens
@media only screen and (min-width: 768px) {
#top .title_container .container h1 {
text-transform: uppercase !important;
font-weight: bold;
line-height: 130px !important;
}
}
Best regards,
Victoria
Hi,
I tried different quick CC codes which didn’t work out and couldn’t find an answer how to change the Main Menu font size under
would you pls help me to change:
• main menu font size 16px
• color #ffffff on hover #e1e1e1
but in the main menu link drop boxes:
• background white
• font size default
• font col default or #454647
Thank you und best regards
Bettina
Guten Tag,
ich habe folgendes Probleme.
1.) Für meine Seite habe ich mehrere Farb-Sektionen gebaut, welche unterschiedlich angeordnet sind, je nachdem mit welchem Endgerät man die Seite betrachtet (Ich blende dann jeweils nur die eine Sektion ein). Einmal ist das Logo weiter oben, hat mehr Abstand nach links, usw.
In jeder dieser Sektionen gibt es natürlich auch das H1 Tag, welches auch dann an unterschiedlichen Positionen ist.
Nun ist das Problem, dass dadurch es das TAG generell auch mehrmals im Code gibt, welches negativ für mein Suchmaschinenranking ist.
Hat jemand eine Idee wie ich das Problem lösen kann?
2.) In meinem H1 Tag steht folgendes:
Text1 <p style="font-family: Courier New; font-style:regular; font-size: 22px"> Text2</p>
Nun wird in SEO Tools jedoch nur Text1 als H1-Tag erkannt. Wieso?
Vielen Dank
Hey buciks1,
Please try the following in Quick CSS under Enfold->General Styling:
Pages widget:
.widget_pages li a {
color:red;
font-size:14px;
}
Latest news widget:
.newsbox .news-time {
color:red;
}
.newsbox .news-headline {
font-size:14px;
}
Best regards,
Rikard
Hi, I added “Enfold latest” and “Pages” widgets on sidebar on my POSTS.
The questions are:
– how can I change color of the names of “Pages” widget
– how can I change the size of the title on “Pages” widget
– how can I change color of the dates in “Enfold lates” widget
– how can I change size of title on “Enfold lates” widget
Also I would like to ask how can I make my sidebar to be frozen? When Im scrolling my post I don’t want sidebar to be scrolled with me. Only the left side with content must be scrolled so cusmer can see all-time things on the sidebar.
Hi Stephan,
Regarding to why it wasn’t working in functions.php, it didn’t work because the necessary files for the Enfold (ALB) shortcodes to work isn’t initialized/loaded.
If you use the shortcode inside the body after the necessary files are loaded it should work, for example if I put it in this hook wp_body_open it works fine:
function output_content() {
echo do_shortcode("[av_button label='Klick mich' link='' link_target='' size='small' position='center' label_display='' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='']");
echo do_shortcode('
[caption id="attachment_6" align="alignright" width="300"]<img src="https://img-lumas-avensogmbh1.netdna-ssl.com/showimg_dre14_desktop.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]
');
}
add_action( 'wp_body_open', 'output_content', 20 );
As for the plugin, can you give us temporary admin access? so we can try to inspect further on the plugin and try to find out why it’s not working.
Best regards,
Nikko
-
This reply was modified 6 years, 9 months ago by
Nikko.
Hey transformmedia,
For adjusting font colors, you can modify it in Enfold > General Styling, either in Main Content or Alternate Content (tab).
– excerpt color (Main Content font color | Alternate Content font color)
– heading color (Main Content Heading color | Alternate Content Heading color)
– link color (Primary color)
For font size go to Enfold > Advanced Styling > either select body or p (this will modify all content sizes)
For hiding category, comment and date, add this css code in Quick CSS, located in Enfold > General Styling:
.html_modern-blog #top .post-entry .post-meta-infos {
display: none;
}
Hope it helps
Best regards,
Nikko
I am currently building this website here: http://my-transformance.de/
On this page I used the blog posts element to preview 3 blog posts – how can I change the
– font size
– font color of heading
– font color of excerpt
– font color of “Weiterlesen”-Link
– hiding category
– hiding comment + date
Thank you very much for your help!
This is my enfold-child/functions.php
<?php
/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
echo do_shortcode("[av_button label='Klick mich' link='' link_target='' size='small' position='center' label_display='' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='']");
echo do_shortcode('[caption id="attachment_6" align="alignright" width="300"]<img src="https://img-lumas-avensogmbh1.netdna-ssl.com/showimg_dre14_desktop.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]');
First shortcode isn’t processed. Second shortcode is.
Where is the difference?
Hi,
Thank you for the update.
Replace that code with the following snippet.
add_filter( 'avia_breadcrumbs_trail', 'avia_breadcrumbs_trail_mod', 50, 2 );
function avia_breadcrumbs_trail_mod( $trail, $args )
{
ob_start();
edit_post_link(__(' <span style="color: #ff0000; font-weight: bold; font-size: 11px;">EDIT</span>'));
$edit = ob_get_clean();
$trail[] = $edit;
return $trail;
}
That should append the edit link to the breadcrumb trail.
Best regards,
Ismael
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
echo do_shortcode("[av_button label='Klick mich' link='' link_target='' size='small' position='center' label_display='' icon_select='yes' icon_hover='' icon='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='']");
For example this code. It is not working in plugin context. The shortcode won’t be processed.
Thank you @ismael,
but I don’t get this to work, to add the EDIT link to the breadcrumb:
add_filter( 'avia_breadcrumbs_trail', 'avia_breadcrumbs_trail_mod', 50, 2 );
function avia_breadcrumbs_trail_mod( $trail, $args )
{
if ( is_single() )
{
echo edit_post_link(__(' <span style="color: #ff0000; font-weight: bold; font-size: 11px;">EDIT</span>'));
}
return $trail;
}
There simply appears no EDIT link:
View post on imgur.com
P.S. I am not a coder, so I don’t know how to “write” this in PHP
Hi,
Sorry for the late reply, to adjust the text size in the masonry please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
h3.av-masonry-entry-title.entry-title {
font-size: 30px !important;
}
Please adjust the font size to suit, and Then clear your browser cache and any cache plugin, and check.
Best regards,
Mike
Hi PinoSilvestre,
You’re building the products with Elementor, you’re probably using different elements to do it, are you?
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 .woocommerce-loop-product__title .price del,
#top .woocommerce-loop-product__title .price ins {
font-size: 20px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Andrea,
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 .elementor-widget-container .price * {
color: #7a7a7a;
font-size: 24px;
}
If you need further assistance please let us know.
Best regards,
Victoria