-
Search Results
-
Hi Mike, thanks for your input. But unfortunately the font style and especially size is the same as before… and too small on mobile. When I change the px in the code above, the spacing and alignment doesn’t fit anymore. Maybe you can have a look to the backend? Would be great. Thanks in advance!
Best,
MarionSorry for not mentioning it in my initial post, but we probably used the same, faulty code, for the menu element.
<span class=”av_font_icon avia_animate_when_visible av-icon-style-border av-no-color avia-icon-pos-center avia_start_animation avia_start_delayed_animation” style=””><span class=”av-icon-char” style=”font-size:22px;line-height:20px;width:20px;” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”></span></span> Anfrage senden
But by following your editing of the header element, and removing the first <span> tag, we managed to fix that one aswell!
Thank you!
In reply to: Enfold Theme by Kriesi Link & Add to Cart Button
Hi again,
I see you have done all. Thank you!!
Finally could you kindly assist with increasing the fontsize of the text of the ‘Buy Now’ and ‘Bid Now’ buttons to size 15.
Regards
David
Hi Mike. Thank you so much for the reply. Ironically, yes! I ran across the !important solution in another thread and tried it and it worked. BTW – LOVE the Enfold theme. Best of the best.
For others out there that might be running into similar conflicts with Mapbox and Enfold CSS, I had two issues to solve:
1. The size of the container for the search bar (Geocoder) was taller than the input field. That was solved by this code in Quick CSS:
.mapboxgl-ctrl-geocoder input[type=’text’] {
height: 40px !important;
}2. The placeholder text in the search bar that reads “Search” was being forced so far to the left the “magnifying glass” was covering it up. That was solved by this code – also added to the theme Quick CSS:
.mapboxgl-ctrl-geocoder input[type=’text’] {
font-size: 12px;
width: 100%;
border: 0;
background-color: transparent;
height: 40px;
margin: 0;
color: rgba(0, 0, 0, .5);
padding: 10px 10px 10px 30px !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}Thanks again!
Trey
In reply to: Bug: Credit Card Field on Mobile
Hi,
Please try this CSS as well:
@media only screen and (max-width: 767px) { iframe#wc-square-credit-card-account-number-hosted input { font-size: 1.1em !important; } }Best regards,
RikardHi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(4) > div > p { font-size: 9px !important; } #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(5) > div > h1 { font-size: 9px !important; } #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(6) > div > p { font-size: 18.07801px !important; width: 200.539px !important; height: 26.695px !important; } #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(6) > div { left: 59.05px !important; } #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(4) > div { left: 47.1489px !important; } #top.home #layerslider_2 > div.ls-inner > div > div:nth-child(5) > div { left: 82.454px !important; } }After applying the css, Please clear your browser cache and check.
Best regards,
MikeIn reply to: Widget Text Area in Header
Hi Mike,
In the text widget I have:
<h1 style=”color:#760008;font-size: 72pt; font-family: “Palace Script MT”, Georgia; font-weight: normal;”>The Curry Queen™</h1><br />
<h3 style=”color:#760008;font-size: 36pt;text-indent:25px;font-family: “Palace Script MT”, Georgia;font-weight: normal;”>“ Easy gourmet never tasted so good”</h3>
How do I get the font family to be Palace Script MT?
How can I get a transparent background when in transparent mode?Thanks
LyseIn reply to: apply CSS to a specific page-id
Hey ICEMAN,
Adjust your css to this:
.postid-3760 blockquote { border: none; font-style:normal; margin-top:30px; margin-left:32px; font-family:"Segoe Print", "Times New Roman", Verdana; padding-left: 48px; background:url('https://mywebsite/wp-content/uploads/2020/01/quotation-marks.png'); background-repeat: no-repeat; background-size: 3%; text-indent: 23px; } .postid-3760 blockquote cite { color: #a1a1a1; font-size: 14px; display: block; margin-top: 5px; } .postid-3760 blockquote cite:before { content: "\2014 \2009"; }Best regards,
Jordan ShannonTopic: Widget Text Area in Header
Hi
I have followed the instructions to add my text next to my image logo. I used the default code snippets to at least have something displayed, but even tht doesn’t work.I have the following code snippet setup:
// Header widget area
add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}
I have the following “header logo text” widget setup:
<table>
<tbody>
<tr>
<td style=”text-align: center;”>
<h1><span style=”color: #760008; font-size: 40px; font-family: ‘Palace Script TM’, Georgia, ‘serif’;”>The Curry Queen™</span></h1>
<h3><span style=”color: #760008; font-size: 40px; font-family: ‘Palace Script TM’, Georgia, ‘serif’;”>”Easy gourmet never tasted so good”</span></h3>
</td>
<td>
</td>
</tr>
</tbody>
</table>I have the css setup as instructed here: https://kriesi.at/documentation/enfold/example-of-widget-left-logo-left-menu-right/#toggle-id-2
Nothing displays at all.
My site is in development and I have included login credentials and URL below so you can see what I have setup, hands-on.Thank you
LyseIn reply to: Portfolio Grid Selection Styling
Hi Rikard,
No change using that CSS.
The main CSS I am using to currently alter the category buttons is the below:
#js_sort_items {
font-size: 16px;
font-family: ‘raleway’;
font-weight: bold;}#js_sort_items .text-sep {
color: white;
padding: 10px;
}.main_color #js_sort_items a {
background: #928b88;;
padding: 5px 20px;
color: white;
outline: 8px solid white;
}Is this helpful? I can provide site access if it would be of use.
Thank you,
-Alek
Hi there !
Could someone help me to apply this CSS to a specific page-id:
(you can see it in the bottom of private link below)
Thanks in advance.Iceman
blockquote { border: none; font-style:normal; margin-top:30px; margin-left:32px; font-family:"Segoe Print", "Times New Roman", Verdana; padding-left: 48px; background:url('https://mywebsite/wp-content/uploads/2020/01/quotation-marks.png'); background-repeat: no-repeat; background-size: 3%; text-indent: 23px; } blockquote cite { color: #a1a1a1; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }In reply to: Hide left sidebar on print page
Hi,
I was able to remove the lines, but I can’t add your logo because the header is hidden. Here are some good articles for the “print media” css, Print Basics, Perfect Print Stylesheet
I also removed the background image:
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media print{ .template-page.content { width: 100%; margin: 20px 0 0 0; float: none; } h1 { margin-top: 20px !important; } .main_color span { border-color: transparent !important; } .avia-icongrid-flipback { display: none !important; } p {orphans: 3;} @page { margin: 0cm } }If you would like a message on the top of your print pages, try adding this css to your print media rule:
.template-page.content:before { content: "\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well."; color: #777 !important; font-size: 1em; padding: 30px 0; text-align: center !important; }
Best regards,
MikeHi,
My homepage has a fullscreen slider, and I have two buttons that look OK on the desktop, but on mobile the title is too small and the buttons is to close with the down arrow.
Is there a solution that will give more space the Button 1 and Button 2 with the arrow? and the title more bigger than before.
For information, I’ve used this code for the web:
.slideshow_align_caption { vertical-align: bottom; } @media only screen and (max-width: 480px) { .avia-slideshow-button { margin-bottom: 40px !important; }} .homeoverlay .av-image-caption-overlay-center { vertical-align: bottom !important; margin-bottom: 10px !important; font-size: larger !important; line-height: 20px !important; }Thank you.
I have created a map using Mapbox Studio. Great. But when I place the map html in an Enfold Code block, I think the Mapbox css and the Enfold theme css are conflicting. First, the word “search” in the search bar is way too far to the left and conflicts with the magnifying glass in the field. I think what is happening is that the code is calling a style sheet that lives at a Mapbox link and calls the “text/css” stylesheet. Unfortunately I cannot edit it.
I did find that after I published the test page, I was able to look at the published code (Safari > developer tools) and discovered this batch of code is controlling the search bar area. Question, where can I place this in the “ORIGINAL CODE” below so that it “over rides” the “text/css” style? Or is there a place in Enfold that is conflicting with this? If so, what would there be a “Quick Css” code block to resolve this?
God I hope this makes sense. Thank you!
_______________________________________
Code I found in “developer mode” in Safari
_______________________________________}
.mapboxgl-ctrl-geocoder input[type=’text’] {
font-size: 12px;
width: 100%;
border: 0;
background-color: transparent;
height: 40px;
margin: 0;
color: rgba(0, 0, 0, .5);
padding: 10px 10px 10px 40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}________________________________________________________________
ORIGINAL CODE
________________________________________________________________<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add a geocoder</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: relative; top: 0; bottom: 0; width: 100%; height: 800px } </style> </head> <body> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css" /> <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 --> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiamxiZW50b24zIiwiYSI6ImNrNDk5ZHJueTAyeXgza3FsdGVzMDlhazMifQ.gc96rKCrNLrnYma9uxxOEg'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/jlbenton3/ck9fnaxcp2cyi1io5j0r32ndp', center: [-82.114, 34.91], zoom: 9.93 }); map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, mapboxgl: mapboxgl }) ); // Add zoom and rotation controls to the map. map.addControl(new mapboxgl.NavigationControl()); </script> </body> </html>In reply to: Enfold Theme by Kriesi Link & Add to Cart Button
Hi again Victoria,
Could you also please assist with customizing the ‘Buy Now’ and ‘Bid Now’ buttons. I want it to be ‘Always be on display’ and static on the homepage and not appear only when hovering over it.. Also increase its font sizes in relation to the other text. The background colour of the ‘Buy Now’ and ‘Bid Now’ buttons must be dull orange (#af5f31).
My login credentials are the same as I provided last time in the private sections.
Kind Regards
David
Hello. I’ve seen several threads on this topic, each with a different suggestion, and I’ve tried them all but none works. I just need to be able to choose the font color and size, and the burger menu background color. Any infallible suggestions?
In reply to: Problems in displaying posts
Hi Stefan,
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: 989px) { #top .av-masonry-entry .av-inner-masonry-content { padding: 5px 10px; } #top .av-masonry-entry .av-inner-masonry-content * { font-size: 14px; line-height: 20px; margin: 0; } }If you need further assistance please let us know.
Best regards,
VictoriaIn reply to: Style of Tabs (Reiter)
Hi Mike
Not tested it yet. But one question. If we want to have this on all tabs on our website, could we do it like that?#top .av-tab-section-icon { font-size: 20px !important; margin-bottom: 15px; }And it is also possible, to change the icon color of the active tab?
Hi i have tried a lot of different code but i cannot seem to figure it out. I am wanting to change my header extra info “links” to be white font when it is a transparent header and a darker font once a person scrolls.
This is the code in the quick css i was trying to change, does not seem to be doing anything
#top .av_header_transparency #header_meta a:hover a:link {
color: #fff;
}This below is changing the padding and font size of the extra info for mobile etc, not sure if this is having some effect on it.
/***Extra info above menu changes****//* Add your Mobile Styles here */
@media only screen and (max-width: 640px){
.av_phone_active_left .phone-info {
font-size: 14px;
letter-spacing: 0.05em;
padding: 3%!important;
}}/* Add your Tablet Styles here */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
.av_phone_active_left .phone-info {
font-size: 15px;
letter-spacing: 0.05em;
padding: 2%!important;
}}/* Add your Laptop Styles here */
@media only screen and (min-width: 1024px) and (max-width: 1679px) {
.av_phone_active_left .phone-info {
font-size: 16px;
letter-spacing: 0.05em;
padding: 1%!important;
}
.social_bookmarks li {
margin: 4px;
}}/* Add your Desktop Styles here */
@media only screen and (min-width: 1680px) {.av_phone_active_left .phone-info {
font-size: 17px;
letter-spacing: 0.05em;
padding: 1%!important;
}
.social_bookmarks li {
margin: 8px; important
}}Hi,
I have a problem with the responsive mode.
I’ve set this code:
[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' size='15px' position='left' color='#B0D997' link='' linktarget='' animation='' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon] Bestell-Hotline: +41 *****For the top phone info extra element on the header.
But the Phone icon is still very next to the text.
The screenshot is attached for your kind reference.
Please assist me.
Thank you
In reply to: Texto ordenar Masonry
Hey maqueijan,
Add this to quick css:
.av-sort-by-term a{ font-size:10px!important; }Adjust the font-size to what you need.
Best regards,
Jordan ShannonTopic: Post Slider
Hi Folks,
I need some help: I want to change the fonts in Post Slider and Masonry. After some trial & error I found a solution with the following code, but this works only as long as I am logged in.
—
.av-masonry-entry-title {
font-size: 16px !important;
font-family: “Open Sans” !important;
}.av-masonry-entry-content {
font-size: 16px !important;
font-family: “Open Sans” !important;
}#top #wrap_all .avia-content-slider h3.slide-entry-title {
font-size: 16px !important;
font-family: “Open Sans” !important;
}.avia-content-slider .slide-entry-excerpt {
font-size: 16px !important;
font-family: “Open Sans” !important;
}
—As soon as I log out, its back to the default. Tried it with different browsers and cleared cache. All I want is to change the fonts and its size in the post slider and masonry view.
Help is very much apprechiated :-)
Thanks in advance,
HaraldIn reply to: Label Font size in contact form
Hi,
You can try the following:
@media (min-width: 768px) and (max-width: 1024px) { #top .avia_ajax_form label { font-size: 12px !important; } }Adjust 12 to whatever you want.
Best regards,
Jordan ShannonIn reply to: User Interface
Hi,
The plugin is just an easy way to interface with the admin, otherwise you will need to know the proper hooks to use to achieve your results:
https://codex.wordpress.org/Plugin_API/Action_Reference
As for the php code to use, you would add any needed css to the functions.php on conjunction with the proper hook. For example:
add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() { echo '<style> body, td, textarea, input, select { font-family: "Lucida Grande"; font-size: 12px; } </style>'; }Best regards,
Jordan ShannonHi, how can i change the font size in contact form for a tablet display? (name, email, address, ecc..)
thank youIn reply to: Style of Tabs (Reiter)
Hey Michael,
Sorry for the late reply, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top.page-id-3274 .av-tab-section-icon,#top.page-id-24 .av-tab-section-icon { font-size: 20px !important; margin-bottom: 15px; }After applying the css, Please clear your browser cache and check.
Best regards,
MikeIn reply to: Bordered menu item next to burger menu
Hi jorisbl,
https://share.getcloudapp.com/WnuGJv5o This is the code for the font-size.
https://share.getcloudapp.com/jkulZGBo This is the code for the border on the right.
If you remove the right part, the border will be around.
Best regards,
VictoriaIn reply to: Change only mobile menu font style
Hey Santiago,
Can you try adding this CSS code?
@media only screen and (max-width:767px) { #top p { font-size: 14px; } }Just adjust the font size values, and also this only applies to paragraphs not headings.
Best regards,
NikkoIn reply to: No Options to change Heading Font Size for Mobile
Hi Guenni,
thanks for quick help and your engagement in this forum. Now I could change the settings for mobile.
I still wondering why Enfold didn’t adjust font size on mobile by default. I also wonder, why this option of special heading will display in all heading-styles, but not in standard. Kriese, please change.
thanks
ClaudiaHello,
I wonder, that Enfold didn’t adjust size of heading for mobile. I searched in the forum and found some screenshots, where in register Styling of Special Heading are the Option for Font Size and Icons for Desktop, Tablet and Mobile.For Example this:
https://postimg.cc/rKssJ5pSBut in my in my Settings of Special Heading, there isn’t this option for Font Size:
https://www.screencast.com/t/PGHlYeP9ioL9
https://www.screencast.com/t/QpDvQMnxO6IZ
I have installed actual Enfold 4.7.4. What’s the reason for this difference?thanks
Claudia
