-
Search Results
-
We are displaying weekly Youtube sermons in our website as videos.
We would like to also insert “cleaned up” transcripts, using the magic of ChatGPT.
We get a lovely html with print buttons, pdf buttons, style sheet — but cannot figure out how to insert this html document on our Enfold page.I have tried to use content in Accordion. Have learned that won’t work.
(Obviously, each week transcript will be different, so hoped I could use Advanced Custom Fields to store document info and then display via my custom post template.)
Right now, I am trying Textblock — in Code, not Visual.
I see the document nicely displayed on BACKEND, but on FRONTEND, I do NOT see the document displayed.
Since STYLE was included in the HTML — I moved style out to a Codeblock.
SCRIPT is also in there and I can move it out to another Codeblock.
What is your suggestion to “see” the document on the FRONTEND?
Thanks in Advance…
Below is the attempted code…
`[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-mfpdws8b' sc_version='1.0']
<style>
/* ——– Base Styles ——– */<br />
:root {<br />
–bg: #0b0c0f;<br />
–card: #11131a;<br />
–ink: #e8ecf1;<br />
–muted: #aeb7c2;<br />
–accent: #6aa2ff;<br />
–accent-ink: #0b1b3a;<br />
–rule: #1e2330;<br />
}<br />
html, body { height: 100%; }<br />
body {<br />
margin: 0;<br />
background: radial-gradient(1200px 1200px at 10% -10%, #1b2030 0%, var(–bg) 60%);<br />
color: var(–ink);<br />
font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Apple Color Emoji”, “Segoe UI Emoji”;<br />
-webkit-font-smoothing: antialiased;<br />
-moz-osx-font-smoothing: grayscale;<br />
}</p>
<p> .wrapper {<br />
max-width: 860px;<br />
margin: 48px auto 96px;<br />
padding: 0 20px;<br />
}</p>
<p> .toolbar {<br />
position: sticky;<br />
top: 0;<br />
z-index: 10;<br />
backdrop-filter: blur(10px);<br />
-webkit-backdrop-filter: blur(10px);<br />
background: color-mix(in srgb, var(–bg) 80%, transparent);<br />
border-bottom: 1px solid var(–rule);<br />
}<br />
.toolbar-inner {<br />
max-width: 860px;<br />
margin: 0 auto;<br />
padding: 10px 20px;<br />
display: flex;<br />
gap: 10px;<br />
align-items: center;<br />
justify-content: flex-end;<br />
}<br />
.btn {<br />
appearance: none;<br />
border: 1px solid var(–rule);<br />
background: linear-gradient(180deg, #1a2233, var(–card));<br />
color: var(–ink);<br />
padding: 10px 14px;<br />
border-radius: 14px;<br />
cursor: pointer;<br />
font-weight: 600;<br />
transition: transform 0.05s ease, box-shadow 0.2s ease, background 0.2s ease;<br />
box-shadow: 0 6px 14px rgba(0,0,0,0.25);<br />
}<br />
.btn:hover { transform: translateY(-1px); }<br />
.btn:active { transform: translateY(0); }<br />
.btn.accent {<br />
border-color: color-mix(in srgb, var(–accent), #000 50%);<br />
background: linear-gradient(180deg, color-mix(in srgb, var(–accent) 50%, #fff 0%), var(–accent-ink));<br />
color: white;<br />
text-shadow: 0 1px 0 rgba(0,0,0,0.35);<br />
}</p>
<p> .card {<br />
background: linear-gradient(180deg, #131827, var(–card));<br />
border: 1px solid var(–rule);<br />
border-radius: 22px;<br />
padding: 28px 28px 36px;<br />
box-shadow: 0 20px 60px rgba(0,0,0,0.35);<br />
}</p>
<p> h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; }<br />
h1 {<br />
font-size: clamp(28px, 4.2vw, 44px);<br />
letter-spacing: -0.02em;<br />
margin-bottom: 12px;<br />
}<br />
.meta { color: var(–muted); margin-bottom: 28px; }</p>
<p> h2 {<br />
font-size: clamp(20px, 2.5vw, 26px);<br />
margin-top: 34px;<br />
}</p>
<p> p { margin: 12px 0; }<br />
ul { margin: 8px 0 16px 24px; }<br />
li { margin: 6px 0; }</p>
<p> blockquote {<br />
margin: 18px 0;<br />
padding: 16px 18px;<br />
border-left: 4px solid var(–accent);<br />
background: color-mix(in srgb, var(–card), #000 8%);<br />
border-radius: 10px;<br />
}<br />
blockquote p { margin: 0; }</p>
<p> hr { border: none; border-top: 1px solid var(–rule); margin: 28px 0; }</p>
<p> .note { color: var(–muted); font-size: 14px; }</p>
<p> /* Drop cap for the opening paragraph */<br />
.lead:first-letter {<br />
float: left;<br />
font-size: 3.2em;<br />
line-height: 0.9;<br />
padding-right: 10px;<br />
margin-top: 6px;<br />
font-weight: 800;<br />
color: var(–accent);<br />
text-shadow: 0 6px 16px rgba(106,162,255,0.35);<br />
}</p>
<p> /* Print styles */<br />
@media print {<br />
body { background: white; color: #111; }<br />
.toolbar { display: none !important; }<br />
.wrapper { margin: 0; max-width: 100%; }<br />
.card { box-shadow: none; border: none; border-radius: 0; padding: 0; }<br />
a { color: black; text-decoration: none; }<br />
.note { color: #444; }<br />
@page { size: A4; margin: 20mm; }<br />
h1 { font-size: 28pt; }<br />
h2 { font-size: 16pt; margin-top: 18pt; }<br />
p, li, blockquote { font-size: 11.5pt; }<br />
blockquote { background: #f6f6f6; border-left-color: #888; }<br />
}<br />
</style>
[/av_codeblock][av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='' template_class='' av_uid='av-mfpdtbrg' sc_version='1.0' admin_preview_bg='']
<div class=”toolbar” aria-label=”Document tools”>
<div class=”toolbar-inner”><button class=”btn” title=”Send to a printer”>
️ Print
</button>
<button class=”btn accent” title=”Use your browser’s Save as PDF option in the dialog”>
Download PDF
</button></div>
</div>
<div class=”wrapper”><article id=”content” class=”card”><header>
<h1>Sermon: “You Are the Light of the World”</h1>
<div class=”meta”>Text: Matthew 5:14–16</div>
</header>
<p class=”lead”>So, you might have noticed the theme. Send the Light. Thy Word is a lamp. There’s definitely a theme going here.</p>
We are continuing through the best sermon ever preached by the greatest preacher ever. We have seen Jesus giving assurances to His followers in the Beatitudes—letting them know that His followers are blessed.Last week, we began looking at the section where Jesus tells His followers that they are salt and light.
<h2>Salt</h2>
We learned a few things about salt in Jesus’ day. Salt was precious. When Jesus said, “Ye are the salt of the earth,” His disciples understood the value. Salt was so valuable it was sometimes used as payment for soldiers.Its value came from its purpose:
- Preservative – As salt, we preserve the holiness of God and His Word in the world.
- Purifier – Salt was used as a cleansing agent; so are we in the world.
- Penetrating – Salt works its way in. We are called to go into all the world with the gospel.
- Creates thirst – Salt makes people thirsty. Do we, by our lives, make people thirst for the living water that is Christ?
Jesus also warned of useless salt: “If the salt has lost its savour… it is good for nothing, but to be cast out and trodden under foot of men.” Notice, Jesus never challenged us to be salt or light. He simply said, you are.
<hr />
<h2>Light</h2>
Matthew 5:14–16 — “Ye are the light of the world. A city that is set on a hill cannot be hid. Neither do men light a candle and put it under a bushel, but on a candlestick, and it giveth light unto all that are in the house. Let your light so shine before men that they may see your good works and glorify your Father which is in heaven.”
What a title. What a privilege—that Jesus would say we are the light of the world. But what does He mean?
<h3>Jesus, the True Light</h3>
John wrote of the Light in John 1:4–9: “In Him was life, and the life was the light of men. And the light shineth in darkness, and the darkness comprehended it not… That was the true Light, which lighteth every man that cometh into the world.” Of course, John was speaking of Jesus.Jesus confirmed it Himself in John 8:12—“I am the light of the world.” Again, in John 9:5—“As long as I am in the world, I am the light of the world.” But then Jesus turned to His disciples and said, “Ye are the light of the world.”
<h3>The Nature of Our Light</h3>- It is personal – Jesus has given every believer this light. He didn’t say we might be light someday; He said we are light.
- It is His light in us – We are not the source. Jesus is. We are the lamp, the candle, the bulb through which His light shines.
- It is powerful – Even the smallest light conquers darkness. A single match in a dark cave changes everything.
Paul reminds us in 2 Corinthians 4:6 that God “commanded the light to shine out of darkness” into our hearts. Philippians 2:15 calls us to shine as lights “in the midst of a crooked and perverse nation.”
The tragedy is that much of the darkness in our world exists because Christians have hidden their light.
<h3>The Purpose of Our Light</h3>- To shine – Light is not made to be hidden under a bushel but set on a candlestick.
- To expose – Light reveals what is hidden in darkness, including sin.
- To reflect – Like the moon reflects the sun, we reflect the Son.
- To guide – Like runway lights, a lighthouse, or a warning sign, our light points others to safety and to the Father through Christ.
<h3>The Result of Our Light</h3>
Jesus says, “Let your light so shine before men that they may see your good works and glorify your Father which is in heaven.” Our light draws others to God. Our good works should point people to Him, not to ourselves. Salvation is mankind’s greatest need—and our shining light directs people to Christ.
<h2>Closing Challenge</h2>
Light always overcomes darkness, but it must shine to make a difference. Is your light shining for Jesus? Can you truly sing, “This little light of mine, I’m going to let it shine”? Or are you hiding your light under a bushel?If you are trusting in Christ, you have His light. Let it shine.
Prayer — “Lord, we thank You for Your Word this morning and the encouragement that we are the light of the world. Help us not to cover or hide the light, but to let it shine, that others may see our good works and glorify our Father in heaven. Amen.”
<p class=”note”>Tip: Use Print to send directly to a printer, or choose Save as PDF in the print dialog to download a PDF copy.</p>
</article></div>
<script>
// Optionally hide buttons when printing (extra safety for non-supporting browsers)
window.addEventListener(‘beforeprint’, () => {
document.querySelector(‘.toolbar’)?.setAttribute(‘data-hidden’, ‘true’);
});
window.addEventListener(‘afterprint’, () => {
document.querySelector(‘.toolbar’)?.removeAttribute(‘data-hidden’);
});
</script>
[/av_textblock]In reply to: javascript error – Syntax Error, unexpected $eof
In reply to: Changing Title size in timeline
Hey rixi,
Thank you for the inquiry.
The changes are being overridden by the H4 style configuration in the Advanced Styling panel. You may need to remove that configuration or add the following code to the Quick CSS field.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #wrap_all .avia-timeline-container.av-meoc0fve-0ab7d904c4d6448157070948d8d30f71 .av-milestone-title { font-size: 20px; } }Best regards,
IsmaelIn reply to: Layerslider text box right margin
Hi Ismael,
Thanks for that I must still be doing something wrong. I can move it using those controls but it changes the font sizes. As soon as I correct the fonts it snaps back to the right. Any changes to the text box shape changes the font size too and it tries to get in one line. I don’t understand the logic of how it is supposed to work. I just want a rectangle box with text in 5 lines that I can position centre top.
Many thanks
In reply to: Headlines cut off
Hey frammies,
I’m not sure which element you are using, but if that is a Special Heading element then you can set different font sizes for each screen size in the Styling tab in the element options.
Best regards,
RikardHi Team Enfold, Kriesi,
I have been using Enfold for 10 years(?). I have no idea when it came out, but it feels like forever. Having used it on three websites, two of which are still online (links below). I wanted to give some serious user feedback to you and your team since I hope it will help you to make it even better! I totally understand if there is no room for such a thing in your team. So I’m simply sending it as a “here you go, some seriously golden nuggets, do with it what you want” type of email :)
Websites:
MeshMasters.com (up2date)
RobertBerrier.com (old, and needs an update)Before I slap all the feedback points. Know that I am a (3D) artist, with limited web coding knowledge. So I don’t know what is possible or not.
—
1) Often I want to have media like an image or video, but also text fields, to the left or right, or center of a section or part of the website, but in a smaller size than the container it’s in. For example, if I have a full width color section. Within that color section, I can use a 1/4 container with the media/text in it, another 3/4 container next to it to “force” it to be at a smaller size to the left or right of that color section. Or, I want to have a 1/3 sized media/text in the center of the website, so I put two 1/5 containers to the left and right. This “works”, but it’s finicky. I often rather want the media to be at a fixed (smaller) size, no matter what is next to it. Even better would be a percentage. Eg, this media should always be 20% size compared to the browser window, or 20% of the container it’s in. The container it is in would still be its max possible size. But it will try to get close to the smaller percentage or pixel size. This can somewhat be done with using a smaller resolution image. But this is also finicky because of all the different screen resolutions, especially in our age with HD vs 4k. So, a better way to “size” down images without having to container it. Perhaps a percentage setting in the media element itself.
—
2) The ability to have (all) elements be in the center of of the page. Eg, media, containers, buttons. If they are smaller than the color section or container they are in. I often want them in the center of that color section or container. No matter what responsive size we are in. Currently I need to do this with “buffer” containers to try and align it to the setting.
I have created some CSS code with a Class ID that I can add to a color section. Then everything in that color section will be centered. But I believe this should be a default setting within a color section and containers. Eg, “align all content within this container/color section to the Left/Center/Right.
—
3) I use CSS code to not have the header be transparent. I would say this should be an option in the Enfold settings. Rather than needing to code.
#header {
background-color: #1d1d40; /* This is needed for the opacity change */
opacity: 1 !important;
}4) When text is in BOLD or STRONG. It gets an assigned color from the theme options. Not a bad idea, but it is a shared color with I believe “Primary Color – Font color for links, dropcaps and other elements” This means we users have less control over how text and it’s colors looks like. I suggest that BOLD and STRONG has a separate color option within the Theme color settings. In my opinion, links and BOLD should be seen as two different things to customize. I currently use CSS code to adjust this.
—
5) For all my websites I have a max website width setting, as set in the Enfold settings. But sometimes, I want a color section to use its own unique size. For example, you will see on MeshMasters.com that the portfolio section is a full-width color section. While the contact section at the button is a bit smaller than the website’s width settings. Having this as a setting in color sections would give people more options to make cool layouts. Currently I have this CSS code for this:
/* ========================================== */
/* === Color sections width additions === */
/* ========================================== *//* === Full width, no padding === */
#fullwidth-container-nopadding .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}/* === Full width, small padding === */
#fullwidth-container-smallpadding .container {
width: 100% !important;
min-width: 100%;
padding: 10px;
margin: 10px;
}/* === Full width, default padding === */
#fullwidth-container .container {
width: 100% !important;
min-width: 100%;
}—
5) Similar to the point above. I want my blog posts to be a smaller width. Since it makes reading large pieces of text easier. So having a separate width setting for blog posts could be interesting to add. For example, the main website is at say 85% width. But perhaps all blog posts are at 70%.
—
6) Font sizes on the main page (or landing pages) are often large. To grab attention with cool copy writing that sells. These are often smaller pieces of text. But on blog posts you have large pieces of text. And so a smaller font size makes it more readable. Since there is only one BODY or P font size for the entire website. You are stuck in choosing one for all pages. I currently made CSS code so on blog posts all font sizes are 95% or 90% smaller than the rest of the website. Perhaps this could also be a setting in the Enfold theme settings. Eg “blog posts font sizes”.
—
7) There are currently three responsive break points in pixels. I believe it’s 990px and 768px and 480px. Perhaps this is the standard in web development. But the ability to change these website wide would be great. Eg, If I change the 990px to say 800px in the enfold settings. Then on all other instances where this is used, like in color sections, containers, etc. That value is also reflected there in the UI.
—
8) When columns break down for responsiveness. They break down into a single column. Eg, a column of 3 containers, becomes a column of 1 with 3 containers below each other. Having options to control to how many columns it breaks would be great. Eg, 4 columns of containers next to each other (4×1). Could be 2 columns of 2 containers next to each other. Eg, 2×2. Instead of 1×4. More controls options for this would be AMAZING!
—
9) fyi, I used CSS code to adjust the masonry gap size (to 4 px). It’s a small thing, but perhaps a quick win to add to the Masonry settings and so to make the theme better.
—
10) another small thing. I use CSS code to remove the Gallery border.
—
11) I use CSS code to remove the Blog button hover effect. Perhaps also a quick win to add to Enfold.
/* === Hover icon disable === */
.slide-entry-wrap .image-overlay-inside:before { display: none; }/* === Hover overlay color === */
.image-overlay { background: #0f0f26; }—
12) Very similar where I remove the Featured Image effect:
.big-preview.single-big a{
pointer-events:none!important;
}—
13) And also the blog page excerpts and dates:
/* === Remove blog page excerpts === */
.blog .slide-entry-excerpt { display: none; }/* === Remove blog page dates === */
.slide-meta { display: none !important; }—
14) Tables are very difficult to adjust. There is no control over it’s color and borders. I use quite a lot of CSS code to adjust them. Perhaps this should be an entire section in the Enfold themes to control them?
I currently use code to:
– Adjust colors for: General cells, uneven cells, even cells, header cells, the borders
– Thickness of borders and its colors
– Give transparency to cells.
– And then to apply these settings to each different theme area (Logo area, main area, alternative area, footer area, socket area)—
15) the button element is missing padding and margin settings (and maybe also alignment settings?)
—
16) There are default padding settings for Color Sections. 0%, 20%, Default(?), 70% and 130%. It would be great if we can adjust these globally in the Enfold Settings. And ofcourse these changes are reflected in the Color Section padding settings. For example, Perhaps I want the default to be 60%, the large 100% and the extra large 150%
Yes, I am aware you can put in custom values in the element itself. But it’s better to align values website wide.
—
That’s it. I hope it helps and you can improve Enfold to an even better edition!
Robert Berrier
I would probably do things differently, especially when it comes to responsive layouts.
The grid box layout has several advantages, especially if you want the containers to be in different positions than in the DOM.
In this case, I would define the individual elements as special grid areas. You can choose the names of the areas freely, but some names are obvious choices.The whole thing would then possibly respond as follows (however, this can also be customized to your requirements):
(click to enlarge)
The best thing would definitely be to remove the settings that are already set from your CSS, but for testing purposes, I think it will also work if you add this CSS to the end of your quick CSS.
i would change the settings for your widget divs to:
/* and change these values */ .phone { background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/phone-icon.png); background-repeat: no-repeat; background-position: left 4px; padding-left: 30px; padding-top: 0; font-size: 24px; color: #fff; overflow: visible !important; line-height: 30px; } .headlogos { background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/bda-hcpc-logos.png); background-repeat: no-repeat; display: block; width: 269px; height: 54px; background-position: center left; Float: left; }and grid-layout settings:
#top #header #header_main .container.av-logo-container .inner-container { display: grid !important; gap: 10px; grid-auto-flow: row; grid-template-columns: 210px 1fr; grid-template-areas: "logo widget" "logo menu"; } #top #header #header_main .container.av-logo-container .logo { grid-area: logo; } #top #header #header_main .container.av-logo-container .main_menu { grid-area: menu; } #top #header #header_main .container.av-logo-container .widget { grid-area: widget; justify-self: end; } .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after { background-color: #FFF; } #top #header #header_main .container.av-logo-container .widget:before, #top #header #header_main .container.av-logo-container .widget:after { display: none; } @media only screen and (max-width: 1000px) { #top #header #header_main .container.av-logo-container .main_menu { justify-self: center } } @media only screen and (max-width: 889px) { .responsive #top #wrap_all .container { width: 95%; max-width: 95%; } #top #header #header_main .container.av-logo-container .inner-container { display: grid !important; gap: 10px; grid-auto-flow: row; grid-template-columns: 1fr 80px; justify-content: space-between; grid-template-areas: "logo menu" "widget widget"; } #top #header #header_main .container.av-logo-container .widget { justify-self: auto; } #top .topcontainer { display: flex; gap: 20px; flex-flow: row wrap; justify-content: space-between; } } @media only screen and (max-width: 605px) { #top .topcontainer { justify-content: center; } }Hello everyone,
First of all, kudos for the support and theme development.
I probably only have a minor problem.
On the test page, I:1) created a row of buttons. However, for some reason, I can’t control them properly with CSS.
2) More importantly, although I managed to limit the maximum size of the buttons, this also applies to mobile devices. A width of 100% would definitely be useful here.
The idea is that the buttons should also be a kind of text cloud, so that I have both buttons and text content.
Is there a simple solution here? Attached is the code I’ve put together, but it’s not working properly.
Many thanks.
Matthias
My Code:/* buttonrow max width of Buttons*/
#top .avia-buttonrow-wrap a {
max-width: 50% !important;
font-weight: 500!important;
}
@media only screen and (max-width: 767px) {
.avia-buttonrow-wrap a {
max-width: 100% !important;
font-weight: 500!important;
}
}/* buttonrow Font size on desktop */
#top .textcloud .avia-button
{text-align:left!important;
font-weight:500!important;
}In reply to: WCAG 2.1, Keyboard Access
by the way – there is a possiblity to have on content an attribute f.e.:
(by the way both focus-visible and focus-within do not influence the click style !)#top a.attachment:focus-visible:after { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.5); backdrop-filter: blur(3px); background-repeat: no-repeat; background-size: cover; font-size: 24px; color: #000; z-index: 5; content: attr(title); }btw: You need to be more precise with the selector. Otherwise, it will address all anchors.
or
#top a.portfolio:focus-visible:after
etc.In reply to: changing font size CSS
Hey iveyeng,
Thank you for the inquiry.
Please try to use this css code to adjust the font size of the list items:
div.entry-content-wrapper ol li, div.entry-content-wrapper ul li { font-size: 13.5px; }Let us know the result.
Best regards,
IsmaelTopic: changing font size CSS
Hello,
I need to change the font size for the unordered and ordered lists. They seem to be smaller than the body text. I used this CSS and it didn’t seem to work. All text should all be 13.5px.body p {
font-size: 13.5px !important;
}.post-content ol,
.post-content ul,
.post-content li {
font-size: 13.5px !important;
line-height: 1.6em !important;
margin: 0 0 1em 1.5em !important;
padding: 0 !important;
}Here’s the page that shows the different sizes. The lists are 13 px. I cleared the cache and it’s not updating.
Any help would be appreciated. Thanks!
In reply to: Fine tuning CF7 for Iphone – IOS
Ismael, I had a chat with Chatgpt and we came up with this code.
// Voegt een custom calender icoon aan een data veld function ava_custom_calendar_icon_script() { ?> <style> .custom-date-wrapper { position: relative; display: inline-block; width: 100%; } .custom-date-wrapper input[type="date"] { width: 100%; padding-right: 40px; /* ruimte voor het icoon */ position: relative; z-index: 2; background-color: #fff; } .custom-date-wrapper::after { content: "📅"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 20px; color: #888; z-index: 3; } </style> <script> function addCalendarIconToDateInputs(context = document) { context.querySelectorAll('input[type="date"]:not(.calendar-styled)').forEach(function (input) { if (input.closest('.custom-date-wrapper')) return; var wrapper = document.createElement('span'); wrapper.className = 'custom-date-wrapper'; input.classList.add('calendar-styled'); input.parentNode.insertBefore(wrapper, input); wrapper.appendChild(input); }); } document.addEventListener('DOMContentLoaded', function () { addCalendarIconToDateInputs(); // Contact Form 7 AJAX support document.addEventListener('wpcf7invalid', function (event) { addCalendarIconToDateInputs(event.target); }); document.addEventListener('wpcf7submit', function (event) { addCalendarIconToDateInputs(event.target); }); // Extra: hoogte instellen voor mobile if (window.matchMedia("(max-width: 768px)").matches) { document.querySelectorAll('input[type="date"]').forEach(function(input) { input.style.height = '40px'; input.style.lineHeight = '40px'; // mooi gecentreerd }); } }); </script> <?php } add_action('wp_footer', 'ava_custom_calendar_icon_script', 9999);For now the height is the same as my other fields, and I have a calendar icon on my iphone.
The width of the field doens’t seem adapable.In reply to: Show fullscreen image for 5 seconds
you can have that with text and inline svg aswell:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(2))){ // add your conditions here , for more pages : separate by commata echo '<div id="fullscreen-overlay"><div class="overlay-content"><svg title="QueensGym" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 340 85"><path fill="#fff" fill-rule="nonzero" d="M229.42 21.558c9.745 0 16.113 5.096 16.893 13.392h-6.068c-.708-4.887-4.594-7.663-10.824-7.663-7.088 0-10.988 4.076-10.988 11.477v7.358c0 7.4 3.9 11.478 10.988 11.478 9.08 0 10.987-4.944 10.987-9.09v-1.547h-9.929V41.54h15.967v6.97c0 9.004-6.683 14.82-17.025 14.82-10.501 0-17.026-6.594-17.026-17.208v-7.358c0-10.612 6.525-17.206 17.026-17.206m0-1.12c-10.79 0-18.144 6.619-18.144 18.326v7.358c0 11.707 7.354 18.327 18.144 18.327 10.972 0 18.144-6.252 18.144-15.939v-8.09H229.36v7.662h9.93v.428c0 5.152-3.065 7.97-9.87 7.97-6.435 0-9.868-3.556-9.868-10.358v-7.358c0-6.804 3.433-10.357 9.869-10.357 5.945 0 9.563 2.697 9.807 7.661h8.277c-.307-9.93-7.725-15.63-18.084-15.63m51.354 12.336-11.61 44.042h-6.04l2.91-9.942.072.297.714-2.989.413-1.404h-.075l.036-.153 7.15-29.851h6.43Zm-22.908 0 7.15 29.851.037.153h-5.866l-7.757-30.004h6.436Zm24.361-1.12h-8.767l-7.354 30.71-7.358-30.71h-8.764l8.336 32.244h7.418l-4.109 14.037h8.4l12.198-46.28Zm36.747.57c6.73 0 11.078 4.01 11.078 10.217v20.337h-5.423V44.036c0-4.193-2.663-6.697-7.126-6.697-4.03 0-6.636 2.63-6.636 6.697v18.742h-5.423V44.036c0-4.193-2.663-6.697-7.127-6.697-4.032 0-6.637 2.63-6.637 6.697v18.742h-5.423V32.774h5.423v2.815l1.806-1.394c1.26-.974 3.027-1.971 6.548-1.971 3.682 0 6.651 1.199 8.588 3.468l.824.964.854-.937c2.148-2.353 4.984-3.495 8.674-3.495m0-1.12c-5.456 0-8.214 2.45-9.5 3.862-2.146-2.516-5.457-3.862-9.44-3.862-3.924 0-5.885 1.163-7.234 2.206v-1.655h-7.663v32.243h7.663V44.036c0-3.248 1.961-5.577 5.517-5.577 4.597 0 6.008 2.76 6.008 5.577v19.862h7.662V44.036c0-3.248 1.96-5.577 5.516-5.577 4.599 0 6.006 2.76 6.006 5.577v19.862h7.663V42.44c0-7.17-5.272-11.337-12.198-11.337M70.866 31.6h7.662v20.963c0 7.174-5.09 11.832-13.608 11.832-8.52 0-13.609-4.658-13.609-11.832V31.6h7.663v20.107c0 4.045 2.39 5.639 5.946 5.639 3.556 0 5.946-1.594 5.946-5.639V31.6Zm11.941 19.433v-6.622c0-8.334 5.948-13.361 14.16-13.361 8.215 0 14.099 5.027 14.099 13.361v6.439h-20.78v.549c0 4.476 2.76 6.255 6.681 6.255 3.311 0 5.946-1.41 6.253-3.864h7.723c-.735 6.683-6.376 10.606-13.976 10.606-8.212 0-14.16-5.028-14.16-13.363m20.78-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.922 0-6.681 2.084-6.681 5.7v1.165h13.302Zm11.453 6.192v-6.622c0-8.334 5.946-13.361 14.16-13.361s14.098 5.027 14.098 13.361v6.439h-20.781v.549c0 4.476 2.759 6.255 6.683 6.255 3.31 0 5.945-1.41 6.252-3.864h7.725c-.738 6.683-6.376 10.606-13.977 10.606-8.214 0-14.16-5.028-14.16-13.363m20.779-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.923 0-6.682 2.084-6.682 5.7v1.165h13.302ZM148.007 31.6h7.663v1.655c1.346-1.04 3.618-2.206 7.54-2.206 6.925 0 12.258 4.168 12.258 11.341v21.454h-7.662v-19.86c0-2.82-1.531-5.58-6.129-5.58-3.679 0-6.007 2.33-6.007 5.58v19.86h-7.663V31.6Zm31.007 21.333h7.663c.06 2.084 1.655 4.23 6.008 4.23 4.107 0 5.821-1.535 5.821-2.944 0-1.226-.611-2.328-3.125-2.696l-6.376-.859c-4.78-.613-8.704-3.739-8.704-9.5 0-5.457 5.025-10.115 12.75-10.115 7.848 0 12.873 4.78 12.873 10.728h-7.662c-.063-2.146-2.268-3.679-5.21-3.679-2.82 0-4.72 1.348-4.72 2.882 0 1.225.858 2.267 2.759 2.512l6.741.92c6.743.918 8.827 5.456 8.827 9.44 0 5.393-4.966 10.545-13.974 10.545-7.602 0-13.547-3.986-13.67-11.464M46.283 38.71c0-11.706-7.355-18.327-18.142-18.327-10.79 0-18.146 6.62-18.146 18.328v7.356c0 11.709 7.356 18.328 18.146 18.328 4.351 0 8.214-1.105 11.155-3.187l6.987 5.885 4.245-5.325-6.575-5.71c1.473-2.696 2.33-6.068 2.33-9.99V38.71Zm-8.273 7.357c0 1.654-.185 3.125-.613 4.413l-.01-.007c-.802 2.546-2.363 4.33-4.545 5.327l.018.014c-.129.06-.272.101-.407.154l-.347.134c-.194.066-.392.129-.593.186a8.318 8.318 0 0 1-.503.128c-.177.04-.353.08-.535.114-.225.04-.461.069-.699.098-.142.017-.28.04-.428.053-.392.032-.793.053-1.207.053a14.9 14.9 0 0 1-1.21-.053c-.148-.014-.285-.036-.428-.053a13.43 13.43 0 0 1-.7-.098c-.181-.034-.356-.074-.533-.114a9.86 9.86 0 0 1-1.095-.314l-.35-.134c-.133-.053-.275-.094-.405-.154l.018-.014c-2.182-.996-3.745-2.781-4.546-5.327l-.007.007c-.431-1.288-.614-2.76-.614-4.413v-7.356c0-6.989 3.738-10.358 9.87-10.358 6.128 0 9.869 3.369 9.869 10.358v7.356Z"/></svg><br><h2 style="text-align: center; color: #FFF;">KAMPF- UND KRAFTSPORT IN</h2><h2 style="text-align: center; color: #FFF;">WIESBADEN - EXKLUSIV FÜR FRAUEN</h2></div></div>'; } });the other snippet is the same.
and :
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; /* Zentriert horizontal */ align-items: center; /* Zentriert vertikal */ top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; /* Disable interaction when hidden */ } #top .overlay-content { padding: 20px; } #top .overlay-content h2 { font-size: min(max(24px, calc(1.5rem + (72 - 24) * ((100vw - 320px) / (1500 - 320)))), 72px); min-height: 0vw; line-height: 1.5em; }see my test page : https://basis.webers-testseite.de/
In reply to: Show fullscreen image for 5 seconds
f.e. – on my test page i do only have set it for front-page and impressum:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(330,1128))){ echo '<div id="fullscreen-overlay"></div>'; } }); function timed_overlay_fullscreen_image(){ if (is_page(array(330,1128))){ ?> <script> document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.getElementById('fullscreen-overlay'); if (overlay) { overlay.classList.add('hidden'); } }, 5000); // 5000 milliseconds = 5 seconds }); </script> <?php } } add_action('wp_footer', 'timed_overlay_fullscreen_image');btw: if you like you can have page-title or different text included to that hook
replace f.e. to :
echo '<div id="fullscreen-overlay"><h1>'.get_the_title().'</h1></div>';see example page from above with get_the_title (and only 3 seconds)
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; /* Example: black background */ background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg); background-repeat: no-repeat; background-size: cover; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #fullscreen-overlay h1 { font-size: 4em; color: #FFF; margin: 0; padding: 20px; text-shadow: 2px 3px 5px #000; }Admittedly, this is a very specific replacement for the usual \e869 icon. But that is probably what is meant by a CSS (not CMS) solution. For a simpler replacement, \e80e does not look quite as complicated.
https://webers-testseite.de/popup-gallery/
but i think now these icons are svg ones – so the simple method to replace the font-icon by just doing:
#top .image-overlay .image-overlay-inside::before { content: "\E80E" !important; font-family: entypo-fontello; font-size: 42px; font-weight: 400; }In reply to: fontawesome
Hey Christian,
Where are you trying to upload fontawesome?
Typically you do not upload fontawesome, it is not compatible with the theme font manager and will not show in the ALB icons.
So you need to sign up here to get your “Kit”
Then you will get a code like this to put in your header:<script src="https://kit.fontawesome.com/244e4f20aaa.js" crossorigin="anonymous"></script>
add it to the end of your child theme functions.php file in Appearance ▸ Editor in this function:function Font_Awesome_7(){ ?> <script src="https://kit.fontawesome.com/244e4f20aaa.js" crossorigin="anonymous"></script> <?php } add_action('wp_head', 'Font_Awesome_7');be sure to change the link to yours.
Then choose your icon and make sure that you add a size to the icon code, for example<i class="fas fa-mug-hot fa-10x"></i>
and add it to your page.
See this documentation:
https://docs.fontawesome.com/Note they also have a plugin, I have not tried it, see: https://docs.fontawesome.com/web/use-with/wordpress
Best regards,
MikeIn reply to: No Logo in Header and a title instead
you can use f.e. the filter: avf_logo_final_output
using the settings on bloginfo and the page-titlefunction use_text_logo_only($logo){ $link = apply_filters( 'avf_logo_link', home_url( '/' ) ); $logo_tag = "h1"; $logo_heading = "Your Text for Logo"; $alt = get_bloginfo( 'name' ); $title = get_bloginfo( 'name' ); $page_title = get_the_title(); if(is_front_page()){ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>' .$logo_heading.'</'.$logo_tag.'></a>'; } else{ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$page_title.'"><'.$logo_tag.'>' .$logo_heading.'<span class="page-title"> - '.$page_title.'</span></'.$logo_tag.'></a>'; } return $logo; } add_filter('avf_logo_final_output','use_text_logo_only');you see that here are some conditionals
here the front-page shows only the bloginfo – all other pages both blog-info and page-titlefit it to your needs .
Some css will finish the setting then – but it will be best to see the page it belongs to.
f.e.
#top .logo.text-logo { height: auto; display: block; margin: 0 !important; position: absolute !important; top: 50%; transform: translateY(-50%); } #top .logo.text-logo h1 { margin: 0 !important; font-size: 42px; }see here example: https://basis.webers-testseite.de/
there had to be some adjustments for responsive styling – because i will change it after you have seen the page – i do not want to do that.
In reply to: Text Overlay Size
Hey jnightingale,
Thank you for the inquiry.
You can adjust the caption font size in the Styling > Image Caption panel. Please check the screenshot below:
Let us know if you need more info.
Best regards,
IsmaelIn reply to: Replacing the cookies icon with another icon
Hi,
Thank you for the update.
You can use this css code to adjust the color of the scroll up icon:
#scroll-top-link.avia_pop_class { font-size: 30px; color: #1acbbc; }Best regards,
IsmaelIn reply to: Small screens doesn’t show all pages in menu
Hi,
Thank you for the update.
You can install menu plugins like UberMenu, WP Mega Menu or QuadMenu to display a different menu, but this may not fully resolve the issue without also considering a layout change or more direct intervention on your part, such as the ones we recommended above. Another option is to reduce the height of the menu items and the surrounding padding. Please try this css code:
#top .av-main-nav ul a { height: auto; line-height: 18px; padding: 2px 15px; font-size: 12px; min-height: 18px; }Best regards,
IsmaelIn reply to: Social media icon sizes and page placement
here on that page you can achieve this by:
(the old way – because using font-icons)#top .main_menu { right: 145px; /* === A correction value for the now broader social_bookmarks === */ padding-right: 10px; } #header_main .social_bookmarks { margin: 0; height: 40px; top: 50%; transform: translateY(-50%); } #top .social_bookmarks li { width: 36px; } #top .social_bookmarks li a { width: 40px; line-height: 40px; min-height: 40px; } #top .social_bookmarks li a:before { font-size: 24px }Perhaps it needs to be adapted for your website. As a participant, I cannot see any private content, so I’m afraid I can’t offer any better advice.
NEXT: now the bookmarks are svg icons – so the css had to be different.
But i do not find an example page to do so. I had to look on one of my installatons to have that different css.#top .avia-menu.av_menu_icon_beside { border-right: none; padding-right: 10px; margin-right: 10px; } #top nav .social_bookmarks { position: relative; transform: translateY(-50%); margin: 0 !important; height: 40px !important; } #top .social_bookmarks li { width: 40px; margin-left: 3px } #top .social_bookmarks li a { width: 40px !important; line-height: 40px; border-radius: 10px !important; min-height: 40px; } #top .social_bookmarks li.avia-svg-icon img[is-svg-img="true"], #top .social_bookmarks li.avia-svg-icon svg:first-child { height: 1.5em; width: auto; margin-top: 5px; }In reply to: Column problem on mobile
Hi,
You can open a new thread here: https://kriesi.at/support/forum/enfold/#new-post
There is no option for this by default, but you can apply a custom css class to the Special Heading element (e.g “av-custom-gradient-text”), then add the following css code:
.av-custom-gradient-text { font-size: 48px; font-weight: bold; background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; color: transparent; }If you have more questions, please feel free to open another thread using the form above.
Best regards,
IsmaelIn reply to: WCAG 2.1, Keyboard Access
Dear Enfold Experts, I am not too sure what Envatojlc’s comments have to do with my original question but this has not been addressed so far anyhow, so might have slipped through.
The situation is the following:
a) WP Accessibility Plugin activated
b) small green border configured in WP Accessibility to mark where the Keyboard Tab key jumps to for all Buttons / links that can be addressed via Keyboard
c) Entering the Home Page
d) Press Tab Key once => jumps to change contrast button from Accessibility Plugin, green border, all fine. 2nd time Tab key pressed => jumps to change font size from Accessibility Plugin, green border, all fine. 3rd Time Tab pressed => jumps to top of page, no button visible, no green border, looks like a jump into nowhere, totally unclear where the cursor is.When checking this with the Firefox Inbuild Dev Tool for accessibility it states for the Header Banner: clickable elements need to be interactive and focused. So there is something in the Header generation that fails. Can you please check? And of course I would like a future feature (similar to the link color configuration in the theme) to configure the Keyboard accessible elements Coloring or Settings in the Enfold theme instead of outsourcing that to WP Accessibility.
thanks Anja
In reply to: Change the space between table lines on mobile.
Hi,
Try this CSS as well:
@media only screen and (max-width: 900px) { #colum_tabla td.avia-highlight-col { width: 110px; } #colum_tabla td { font-size: 15px; } }Best regards,
RikardIn reply to: increase size of logo and burger icon on mobile view
I think I got it. You are awesome. Please check to see if correct :
/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 1px 1px 1px #717070;}/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}#header_meta a, #header_meta span {
font-size:16px !important;
}.phone-info {
font-size: 18px;
}@media only screen and (max-width: 1023px) {
#header {
position: fixed !important;
height: 120px !important;
max-height: 120px !important;
}#top #header.av_header_transparency #header_meta {
background-color: transparent;
}#header_main {
border-bottom: none;
}#header:not(.av_header_transparency) #header_main {
box-shadow: 0 5px 5px rgba(182,182,182,0.75);
}.responsive #top .av-logo-container ,
.responsive #top .logo a,
.responsive #top .logo img,
.responsive #top .logo svg {
height: 120px !important;
max-height: 120px !important;
line-height: 120px !important;
}.responsive #top .av-main-nav .menu-item-avia-special a {
height: 120px !important;
line-height: 120px !important;
}.responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent !important;
}#top .header_bg {
background-color: transparent !important;
}#top #header:not(.av_header_transparency) .header_bg {
background-color: #FFF !important;
}.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
display: block !important;
}.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
opacity: 0;
}/*** das hier individuell anpassen je nach dem ***/
#top #header.av_header_transparency #header_meta .phone-info * {
color: #FFF !important;
}.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after {
background-color: #FFF;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before {
color: #FFF;
}
.responsive.html_header_top.html_mobile_menu_tablet #top #main {
padding-top: 120px !important;
}
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main {
padding-top: 0 !important;
}
}@media only screen and (max-width:1023px) {
#avia-menu .menu-item {
display:none
}
.av-burger-menu-main.menu-item-avia-special {
display:block
}
}@media only screen and (max-width:767px) {
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main #av_section_1 .content {
padding-top: 150px
}
}In reply to: Title not responsive
Hey koomo,
You can set different font sizes for different screen sizes in the Styling tab in the element options.
Best regards,
RikardCan you get me CSS code to adjust Caption Title “font size” and “Line Height”? I am trying to adjust all this on Mobile view, so that it fits on all phones. Suggestions? I am trying to make the blue headline line height less, and maybe make it smaller on mobile only. Here is the current html I am using for this headline: <strong style=”font-size: 140%;”>Future-Proof Your Business<br> <span style=”color: #04aef7;”>Web Design & GEO AI SEO</span>
screenshot: https://img.savvyify.com/image/IMG-748587C9C75D-1.yyQrK
In reply to: Different style in different language
Hi,
Thank you for the inquiry.
Did you add this css code? It seems to be the reason why the font size of the post title is much larger on the other site.
.html_modern-blog #top .post-entry .post-title, .html_modern-blog .avia-content-slider .slide-entry-title { font-size: 2em; text-align: left; letter-spacing: 1px; }Also, make sure that the Enfold > Blog Layout > Blog Styling and Blog Layout settings are the same on both installations.
Best regards,
IsmaelIn reply to: Iconbox Icon Smaller
