-
Search Results
-
In reply to: Logo left Slogan center and Burger Menu right
Got it:
function.php:function add_aditional_content_to_header($logo, $use_image, $headline_type, $sub, $alt, $link){ $logo .= "<div class='custom_content'>"; $logo .= "Your Gateway to High-End Homes in Europe"; $logo .= "</div>"; return $logo; } add_filter('avf_logo_final_output', 'add_aditional_content_to_header', 100, 6);CSS:
.custom_content { left: 50%; transform: translate(-50%,0); -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); position: absolute; font-size:24px; } @media only screen and (max-width: 767px) { .custom_content { left: 55%; transform: translate(-50%,0); -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); position: absolute; font-size:14px; line-height:20px; margin-top:-60px; text-align:center; } }In reply to: Trying to change Mailerlite button style
Hi,
Thanks for the clarification. This is what is currently applying to that button:
#mlb2-17812585.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { background-color: #1c3052 !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; color: #ffffff !important; cursor: pointer; font-family: 'Nunito', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 21px !important; height: auto; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; }As you can see, the !important statement is added to all the attributes, so I’m not sure if you can override them. You might want to reach out to the plugin developers for further help if you can’t get your CSS to work.
Best regards,
RikardIn reply to: Responsiveness und “&-Zeichen”
Hey leeweis,
Did you try setting different font sizes for different resolutions under Enfold->General Styling->Typography?
Best regards,
RikardIn reply to: promobox in all sidebars
Hey dmansouri1981,
Thank you for the inquiry.
You can use the Promobox shortcode in a Text or HTML widget. Example:
[av_promobox button='yes' label='Click me' icon_select='no' icon='' label_display='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' gradient_color_direction='vertical' gradient_color_1='#000000' gradient_color_2='#ffffff' gradient_color_3='' border_promo='' border_promo_width='' border_promo_color='' border_radius_promo='' box_shadow_promo='' box_shadow_promo_style='0px' box_shadow_promo_color='' link='' link_dynamic='' link_target='' title_attr='' hover_opacity='' sonar_promo_effect='' sonar_promo_color='' sonar_promo_duration='1' sonar_promo_scale='' sonar_promo_opac='0.5' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' element_template='' one_element_template='' show_locked_options_fakeArg='' av_uid='' sc_version='1.0'] Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message! [/av_promobox]Best regards,
IsmaelIn reply to: Enfold health logo doesnt change to my own logo
Hi,
Thank you for the update.
Is this only happening on tablet view or smaller screens? You could set the Enfold > Main Menu > General > Menu Items For Mobile setting to the second option (Activate for Smartphones and Tablets). You can also decrease the font size of the Main Menu Links element in the Enfold > Advanced Styling panel.
Best regards,
IsmaelIn reply to: Icon Circle settings and responsive
Hi,
Is it possible to set these parameters for the three resolutions desktop, tablet and mobile?
Yes, that should be possible. Please add the following code and adjust the values as needed.
/* Styles for tablets */ @media (max-width: 1024px) { .responsive #top .avia-icon-circles-icon { height: 100px; width: 100px; line-height: 100px; font-size: 60px; margin: -50px; } } /* Styles for mobile devices */ @media (max-width: 768px) { .responsive #top .avia-icon-circles-icon { height: 80px; width: 80px; line-height: 80px; font-size: 45px; margin: -40px; } }Best regards,
IsmaelIn reply to: Icon Circle settings and responsive
Hey joguitar,
Thank you for the inquiry.
To fix the alignment, please replace the css with the following code:
.responsive #top .avia-icon-circles-icon { height: 120px; width: 120px; line-height: 120px; font-size: 75px; margin: -60px; }Best regards,
IsmaelIn reply to: Padding inside text column
Rikard, I’m sorry. I clicked on the pen+paper icon. Got the element option, then styling tab. I copied and pasted what I see below. As you can see, there is nothing that says indents. Is there any way you can go on the site and see what is going on? PLEASE!!! As 2 comments above show, I am still seeing the same thing!
Text BlockX
ContentStylingAdvanced
Text Block Styling
Text Alignment
Select the text alignment.Default
Textblock Content Styling
Select if the content of the textblock shall be displayed in 1 block or float in columns.Single Block
Font Sizes
ColorsGreetings,
I needed to enlarge the icons of this widget and I found this css that worked..avia-icon-circles-icon { height: 120px !important; width: 120px !important; line-height: 120px !important; font-size: 075px !important; }In this way, however I have two problems:
– the icons are not centered on the circle
– remain the same size by changing the screen size (desktop, mobile)How can this problem be solved?
is there a section where you can find the css commands to adjust the widget parameters?
Thank you
Hi,
#3 try this css:#top #header .av-main-nav > li.button.logo > a { font-size: 0; }#4
.av-main-nav ul li { list-style-type: none; }Best regards,
MikeIn reply to: Bar below header and before main menu
Hi,
Let’s try adding a custom class “custom-banner” to the div to better manage future changes, and change the font size for mobile from 22px to 12px, this will make the text on mobile closer to what you want, you can even try smaller if you find 12px still to big.
This is the new script:function custom_banner_below_the_header_and_above_the_main_menu() { ?> <script> // Create the new div element const newDiv = document.createElement('div'); // Set a class for the new div newDiv.className = 'custom-banner'; // Set the text content newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest'; // Set the style properties for screens above 768px newDiv.style.backgroundColor = 'gray'; newDiv.style.color = 'white'; newDiv.style.fontSize = '22px'; // Default font size for larger screens newDiv.style.padding = '10px'; // Add the flexbox properties newDiv.style.display = 'flex'; newDiv.style.justifyContent = 'center'; newDiv.style.order = '4'; newDiv.style.flexBasis = '100%'; // Find the element with class "main_menu" const mainMenu = document.querySelector('.main_menu'); // Insert the new div before the main_menu if (mainMenu) { mainMenu.parentNode.insertBefore(newDiv, mainMenu); } // Adjust styles based on screen width function adjustStyles() { if (window.innerWidth < 768) { newDiv.style.fontSize = '12px'; // Font size for screens below 768px } else { newDiv.style.fontSize = '22px'; // Font size for screens 768px and above } } // Initial adjustment adjustStyles(); // Adjust on window resize window.addEventListener('resize', adjustStyles); </script> <?php } add_action( 'wp_footer', 'custom_banner_below_the_header_and_above_the_main_menu', 99 );Please give this a try.
Best regards,
MikeIn reply to: Category page edits
In reply to: Category page edits
And can you get me code to increase the body copy font size? For some reason it isn’t that same as the main website body copy size.
thanks!In reply to: Category page edits
Hi,
Try this css:#top #main .sidebar_left .sidebar { border-right-style: none; } .archive h1.av-banner-description p { font-size: 80px; }Best regards,
MikeIn reply to: Bar below header and before main menu
Hi,
Thanks for your screenshot, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function banner_below_the_header_and_above_the_main_menu() { ?> <script> // Create the new div element const newDiv = document.createElement('div'); // Set the text content newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest'; // Set the style properties newDiv.style.backgroundColor = 'gray'; newDiv.style.color = 'white'; newDiv.style.fontSize = '22px'; newDiv.style.padding = '10px'; // Add the flexbox properties newDiv.style.display = 'flex'; newDiv.style.justifyContent = 'center'; newDiv.style.order = '4'; newDiv.style.flexBasis = '100%'; // Find the element with class "main_menu" const mainMenu = document.querySelector('.main_menu'); // Insert the new div before the main_menu if (mainMenu) { mainMenu.parentNode.insertBefore(newDiv, mainMenu); } </script> <?php } add_action( 'wp_footer', 'banner_below_the_header_and_above_the_main_menu', 99 );Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
See the expected results in the screenshot below.Best regards,
MikeIn reply to: Category page edits
That worked, besides it left a white border line, down the side. see link
And last thing, the font size on these category pages are small. How can I increase size? thanks!
In reply to: Custom CSS not working
tried on another site using enfold as well:
<span style=”color: red; font-size: 45px; font-weight: 900;”>test of red</span>
inline style, font weight not applied just like on the first site. Something overriding that inline formatting maybe? Still getting that bookmark anomaly but it seems to happen some of the time but not always now. Oy.
Topic: Custom CSS not working
Take a look at this page on a site I am mocking up.
I have css in general staying which seems pretty much to only effect the color. There’s some css which auto generates.
.ref2{
font-weight: bolder;
text-align: center;
color: red;
font-size: 2em;
}.ref1{
font-weight: bolder;
text-align: center;
color: black;
font-size: 2em;
}on page:
<span class=”ref2″><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>a</span>
<span class=”ref1″>a</span>what I typed in was
<span class=”ref2″>a</span>
<span class=”ref1″>a</span>What’s the “bookmark” css that defaults into the css?
and why is text align and weights not working?Very confused must be a setting or something causing this?
ON a new page it auto fills in this css again:
<span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>This is on a temporary url at siteground, will migrate when finished to a permanent url
Thanks so much, just don’t know what t make of this issue.
In reply to: Padding inside text column
I don’t see that option at all. I’m using the Default Editor. When I try to switch to the Advanced Editor, I get a blank empty page… nothing shows that was built on the page.
All I see is this:Text BlockX
ContentStylingAdvanced
Text Block Styling
Text Alignment
Select the text alignment.Default
Textblock Content Styling
Select if the content of the textblock shall be displayed in 1 block or float in columns.Single Block
Font Sizes
ColorsPlease be specific where I should be. I am new to Enfold!
Thank youIn reply to: Category page edits
In reply to: Make table font larger (match the rest of the page)
Hey amyncuih,
Thank you for the inquiry.
The content in the table inherits the Default Content Font Size, which can be adjusted in the Enfold > General Styling > Typography tab or the Enfold > Advanced Styling panel. You can also use this css code:
.avia-table { font-size: 18px; }Best regards,
IsmaelOn this page, I am using this custom code to split the menu left and right of the logo, as per code I found from an enfold Form.
However, on large resolution ( 4k ) The first menu Mega Menu drop down, shows to the far right of the screen. At high resolution, the drop down is essentially half off the screen. Is there newer and better code I should be using?Current Code below:
/* Split menu around logo
—————-*/@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:320px;
}#top #header_main > .container .main_menu .av-main-nav > li > a {
height: 166px !important;
line-height: 200px;
}#header {
height: 220px; /* Header Height */
}#header .main_menu {
width: 100%;
left: 48%;
transform: translateX(-50%);
}.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
padding-top:55px;}
#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 250px;
}
}#top #wrap_all .header_color.av_header_transparency {
background: rgba(255,255,255,.8)!important;
}.header_color div {
border:none !important;
}.logo
{
padding-top:10px !important;
}@media only screen and (max-width: 1375px) {
#header_main .avia-menu-text {
font-size: 16px !important;
font-family: atten-new,sans-serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
}.av-main-nav > li > a {
padding: 0 0px;
}#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:250px;
}
}Using Masonry Gallery.
Content> Captions> Display Neither.Like I stated before, I want this title of the Portfolio Page which appears over the cover image to be White not gray. I don’t want to hisde it. Also there should be a way to attenuate the other type elements, Font, size etc.
I can not show you a link because this is local and not live yet.
In reply to: Seasonal calendar – further
Hey beyond-flora,
Try this code:function garden_progress_bars_shortcode($atts) { $atts = shortcode_atts( array( 'pre_cultivation_start' => '', 'pre_cultivation_end' => '', 'planting_start' => '', 'planting_end' => '', 'harvest_start' => '', 'harvest_end' => '', 'pre_cultivation_color' => '', 'planting_color' => '', 'harvest_color' => '', 'pre_cultivation_label' => '', 'planting_label' => '', 'harvest_label' => '', 'pre_cultivation_link' => '', 'planting_link' => '', 'harvest_link' => '', ), $atts, 'garden_progress_bars' ); $output = ' <style> .garden-progress-bars { font-family: Arial, sans-serif; max-width: 960px; margin: 0 auto; } .progress-header, .progress-header div:not(.header-offset) { display: inline-flex; width: 100%; justify-content: space-evenly; } .progress-header div:not(.header-offset) { border-left: 1px solid #eee; } .month { width: calc((100% - 160px)/12); text-align: center; } .progress-row { display: flex; align-items: center; margin-bottom: 10px; } .label-container { width: 150px; text-align: right; padding-right: 10px; } .progress-container { display: flex; width: calc(100% - 160px); align-items: center; } .progress-bar-container { flex-grow: 1; background-color: #000; height: 20px; position: relative; } .progress-bar { height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; text-align: center; } .progress-header .header-offset { width: 150px; display: inline-flex; flex-shrink: 0; } </style> <div class="garden-progress-bars"> <div class="progress-header"> <div class="header-offset"></div>'; $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; foreach ($months as $month) { $output .= "<div class='month'>$month</div>"; } $output .= '</div>'; $create_progress_bar_row = function($label, $color, $start, $end, $link) use ($months) { $start_month_index = array_search($start, $months); $end_month_index = array_search($end, $months); $width = (($end_month_index - $start_month_index + 1) / 12) * 100; $left = ($start_month_index / 12) * 100; $bar_content = "<div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'>$label</div>"; if ($link) { $bar_content = "<a href='$link' target='_blank' style='display: block; height: 100%;'>$bar_content</a>"; } return " <div class='progress-row'> <div class='label-container'>$label</div> <div class='progress-container'> <div class='progress-bar-container'> $bar_content </div> </div> </div>"; }; $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end'], $atts['pre_cultivation_link']); $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end'], $atts['planting_link']); $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end'], $atts['harvest_link']); $output .= '</div>'; return $output; } add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');and this shortcode on your page:
[garden_progress_bars pre_cultivation_start="Jan" pre_cultivation_end="Mar" pre_cultivation_color="green" pre_cultivation_label="Pre-cultivation" pre_cultivation_link="https://example.com/pre-cultivation" planting_start="Apr" planting_end="Jun" planting_color="blue" planting_label="Planting" planting_link="https://example.com/planting" harvest_start="Jul" harvest_end="Sep" harvest_color="orange" harvest_label="Harvest" harvest_link="https://example.com/harvest" ]Each bar will be a link with a new label:
Best regards,
MikeTopic: Resize H1 e H1 font
Hi,
on the site, I manually set the size of the H1 and H2.
Now, how can I reset the size of the H1 and H2 using CSS? Is it possible?Looking forward to hearing from you.
Best regards.
MSIn reply to: header problem
Hey Gianluca,
Thanks for the login, in your Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text you had a phone number link that was unclosed, causing the error.
To make your portfolio sort text larger try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.avia-fullwidth-portfolio .sort_width_container { font-size: 30px; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Please adjust the font size to suit.Best regards,
MikeIn reply to: Secondary menu wrap issues on some phones
Hi,
Thanks for that. Please try to remove the !important bit from your CSS, then add this media query:
@media only screen and (max-width: 600px) { #header_meta a { font-size: 12px; } #header_meta .sub_menu li ul { left: 0; } }Best regards,
RikardEnfold, I am working on a site currently at preucil.baslerdesign.com, probably my 15-20th site built on Enfold. I am getting pretty good at figuring things out, but I need help here.
Unfortunately, I am dealing with fairly lengthy secondary menu names: Preucil School of Music | Preucil Preschool | Music Together®
the length of these three items just does not work well on phone sizes. I reached out to your all some time back to help my with some code to increase the font size on these for phone break point:
/*—————————————-
// Increase the size of Secondary Menu text
//————————————–*/
#header_meta a, #header_meta span {
font-size:15px !important;
}This has worked fine. But, different devices are breaking the menu at different places. My iPhone 13 Max breaks after Preucil School of Music, dropping Preucil Preschool and Music Together to a second line.
Other Android Devices, a putting Preucil School of Music and Preucil Preschool on the first line and dropping just Music Together to the second line.
Given this, the behavior of the secondary menu dropdowns are wonky. My iPhone does a good job of keeping the dropdown content “on-screen” without cropping off the content at the left of the screen. My client’s iPhone is reportedly chopping off the dropdown content.
I am stumped. My first thought was that maybe they are changing text sizes through accessibility settings causing this. My other client is an Android user and is reporting the same thing.
I am wondering if breaking these secondary nav into three lines would work. The three lines would have some sort of break control where I could break each line predictably. This solution would be uglier than I would like but the reality is the “Preucil School of Music” item takes up one line at a reasonable size by itself.
And, if this can be done, it would be nice to have some sort of line-height control so that the spacing between lines is mobile friendly as each of these need to be clickable.
Any other thoughts?
Topic: Menu Sidebar Styling
Hello!
I recently purchased this theme and I would like to style the menu items only in the sidebar navigation. I can’t seem to locate the settings it in the Advanced Styling section. Where can I find the settings to change the font size, color, etc..
In reply to: Icon and text style, with 2 columns
Hi,
Thanks for the test page, so to have a different SVG icon for each item you need to use a different font-icon for each item so you can use a different code in the css for each item:
I then copied the base css from the example link and added your font-icon codes and your SVG icon URLs:[data-av_iconfont="entypo-fontello"][data-av_icon="\e89f"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/home-icon.png) !important} [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a0"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/people-icon.png) !important} [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a1"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bed-icon.png) !important} [data-av_iconfont="entypo-fontello"][data-av_icon="\e8a2"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bath-icon.png) !important}Then to make the gray backgrounds transparent I added this css:
.page-id-321 .main_color .avia-icon-list .iconlist_icon { background-color: transparent; }This is the result:
Best regards,
Mike
