Forum Replies Created
-
Posts
-
MULTIPLE IMAGES BACKGROUND, per Guenni example ATTEMPT:
This was based on Guenni’s
https://webers-testseite.de/multiple-background-images/s https://webers-testseite.de/multiple-background-images/Must have missed something, cuz I goofed on bottom: three-big-images css code.
However, the seal looks VERY neat.
Thanks, Guenni!
CUSTOM SVG DIVIDER ATTEMPT:
My colors aren’t attractive here, but helped me understand the concept.
Discovered (dumb) that only top gets the “creative look” — cuz that’s what you told it to do in the javascript top_divider_moves_outwards!
Perhaps the name was a clue?!?!?Also discovered, if two color sections under each other — maybe don’t set the bottom divider of the upper section…affects look of the top divider of the second color section beneath it!
My first svg divider — sort of flashed and disappeared…cuz page title bar hid it! Discovery is a wonderful thing!
Didn’t NEED that to show, just assumed it would. Now I understand!For my second color section, chose NOT to bring to front in Enfold option…seemed better effect.
The color of the effect is always the same as the color section itself, yes? I.E., it doesn’t take svg divider enfold option color?
And opacity stays same no matter tne Enfold option setting?
Just trying to understand.
Cool idea!
Thank you so much for sharing.
Question: On your https://webers-testseite.de/divider-on-sliders/
it looks marvelous. But note the divider appears to be moving. Was this accomplished with css or javascript or….?Small image within big “image” — using only Color Section and multiple images — ATTEMPT:
Guenni007, tried the section with the multiple background images — worked a treat!
Learned that if I want a border-radius on little image, seems I must do that on image two via photoshop or other processor, prior to using — no problem!
Really terrific
Small image within big image — using one column and one image within column — ATTEMPT:
Guenni007, this is my implementation of your idea, as you described…with one column and one image within column.
Works great — tried on ALL settings on Responsive Design Mode in Mozilla — and looked great on all of them!Originally wanted a small inset image (size of image stays same, so sometimes on small screen, looks LARGE…).
So, tried playing with your settings to move in from side and top a little.There are several items relating to the later answers to this question. I am giving each one a separate message. Please bear with me. Think this might be clearer for anyone who might want to read these!
Wow, Mike, that certainly is reeal close to magic!
I will play around with it more, but particularly intriguing how close your first choice is to working in every case in the responsive design mode.
Thank you so much for explaining your solution, as well as providing it.
I wanted to put, say, an author’s picture or a logo in the top of a bigger picture — useful lots of times.
I shall tuck this treasure away for future use.
Thank you so much for putting on your thinking cap…apparently yours is larger (or just more effective!) than mine!Thank you.
What I was trying to achieve was a full page picture, with a small picture in the top right. I fear I didn’t explain well!
So, the full picture is image background of color block.
The smaller image is right up at the top right corner, WITHIN the color block.
I find if I use your css, I will have to alter it for every screen size.
I hoped top:0; right: 0; in some combination, would put the image up in the right-hand corner for EVERY screen size. Maybe I believe in magic?
I have created another page at:The (poor) css I’ve tried to use is:
/*Overflow auto makes div same size as image, otherwise is skinny horizontal line only*/
.my-container{overflow:auto!important;background:aqua!important;float:right!important;border: solid blue 3px!important;padding-top:0!important;padding-bottom:0!important;position: relative!important;top:-80px!important;}But…I think what I need to do is to move the my-container to the upper right AND ALSO put the image in the upper right.
I got the image in upper right of the container, but the container is still not, say, 10 pixels from both top and right side of color block. Hoped it would stay there!
Any direction you can suggest?
Thanks for any help you can give.
Absolutely spiffy!
Worked great. Thanks so much — you achieved such a professional look.
I played around with the tranform, just for fun, and is perfectly placed.
Appreciate your help.Please close this question.
Sorry not to have applauded this answer earlier!
Wow, Guenni007, you did a lot of work and were very clear in your explanations. Have not implemented your clever suggestion…and would NEVER have figured it out on my own.Thank you both for taking the time to help me understand what needs to be done. I really appreciate it.
And, yes, you certainly can close this thread…was VERY well answered!Thank you!
We shall now dub thee “Mike the Wizard”!
Really appreciate that, just got lost in the choices.
Looks great now.
BTW, the code block is in case I wanted to make any css changes…but I hadn’t, which was why it was blank.
Thanks again for your help — and you can happily close this thread now!I turned off all my personal css, so I don’t interfere with the processing of the background of the color block.
The oddity is…I get the background you see in the savify link on my LAPTOP monitor, but get NO background on IPAD. Have no idea how I achieved this!
This seems to be MORE of a problem than just muddy background compared to the original?Here is the link of the computer screenshot:
https://img.savvyify.com/image/p7o7Here is the ALB code:
[av_section min_height='75' min_height_pc='25' min_height_px='500px' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' padding='default' custom_margin='0px' custom_margin_sync='true' av-desktop-custom_margin='' av-desktop-custom_margin_sync='true' av-medium-custom_margin='' av-medium-custom_margin_sync='true' av-small-custom_margin='' av-small-custom_margin_sync='true' av-mini-custom_margin='' av-mini-custom_margin_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://asiantradeassociation.com/wp-content/uploads/2023/05/bg-mashup.png' attachment='104' attachment_size='full' attach='scroll' position='top left' repeat='contain' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#12809b' overlay_pattern='' overlay_custom_pattern='' custom_arrow_bg='' 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='' css_position_z_index='' av-desktop-css_position_z_index='' av-medium-css_position_z_index='' av-small-css_position_z_index='' av-mini-css_position_z_index='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-liaxxulr' sc_version='1.0']
[av_blog blog_type='posts' link='category' blog_style='blog-grid' content_length='content' contents='excerpt_read_more' date_filter='date_filter' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='2' preview_mode='custom' image_size='no scaling' items='3' paginate='yes' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-liawjkpt' sc_version='1.0'][av_blog blog_type='posts' link='category' blog_style='blog-grid' content_length='content' contents='excerpt_read_more' date_filter='date_filter' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='3' preview_mode='custom' image_size='no scaling' items='3' paginate='yes' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-42zk' sc_version='1.0']
[/av_section][av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-liaxtaxv' sc_version='1.0']
<style></style>
[/av_codeblock]That’s great! I didn’t see that option. Enfold is getting so full of wonderful options, sometimes I miss out on seeing them.
Thanks for answering and solving my problem!
You can close this now.Ismael, can you tell me what, for instance, would change 3 columns in the grid to 2?
I don’t see any change with your suggestion, but think I don’t understand precisely what it’s doing.Not with fade in pic…but any suggestions on keeping both theme option preloaded and column animation would be appreciated.
Mike, have been remiss!
Thank you very much for your answer, explanation — and sample. You showed…It certainly works.But…I found it didn’t always work for me. Think it is linked to the problem I see with column animation and pre-loading in option theme.
For columns, I find they DO not animate unless pre-loading in theme options is off. I had given up on consistently “fading” my hero in — and then found the column bit. Not sure if they’re linked, but prior to that point, had gotten frustrated and stopped with my quest.I truly appreciate your assistance on this and love the effect. You solved my problem so quickly and easily. Mucho thanks!
Yes, that would be great!
Another comment…
When in ALB and see the 4 possible screen sizes for a font…it will say: default.
It
would be nice to have some sort of indicator (maybe where shows the media query information as help in text to the right side) — or as hover — of WHAT size that default IS.That way, if I think it’s wonderful, I can leave, or I can change. But right now, I am blind to the value.
Another thought. If you could indicate in which css file the media queries set the default sizes, that might help as well. And how to re-set those defaults in the child theme? Ah, dreams are good things! Love Enfold as it is…am not complaining … just dreaming.Will be thrilled to receive css, though. These are just musings of a user!
Thanks for answering!
Somehow, this just didn’t change anything.
So tried the following and got PART of it SORTA working.
I went back to
add_action(‘woocommerce_before_shop_loop_item_title’,’woocommerce_template_loop_rating’,35);I then added the following — which DOES put the stars on the line under the product title.
.star-rating{position:absolute!important;
margin-left:0!important;
top:35px!important;
margin-top:10px!important;
}However, I still can’t figure out how to use css (or whatever!) to scoot the price down, leaving the stars on a separate, nicely spaced line between the product title and the price.
Any ideas?
Marvelous, Ismael! Worked like a dream.
Thank you so much for taking the time to look at it.
Now I have another tool in my toolbox for the Awesome Enfold and its Awesome support staff!
Feel free to close this thread now.Appreciate it.
Ismael — the default logo appears to be the actual Enfold image logo.
Naturally, that is NOT what I want to “grab” to replace the WordPress Logo big W on the Login page.
I would like to grab the Enfold logo image I set on the Theme Options page — without having to hard-code it into the functions.php for the logiin pageI have already SET “my” logo on Theme Options.
That’s the logo I want.
I do NOT want the Enfold company logo.Above, you show me several ways to get the default logo — meaning the Enfold company logo, correct?
That’s not what I’m hoping to get.
The logo is already set…how does one obtain the url reference for MY set logo?
Any ideas?
I would like NOT to have to hard-code image to set it on every site that uses a little swatch of php code…but instead to GET the logo in a custom way..
Victoria…sorry I’m not clearer.
What I want to change is NOT the logo used by the theme itself.
On login page, I want to replace the W – WordPress logo at the top with the logo the theme is using.
If in theme options, I’ve put in a Lizard, I’d like to be able to programmatically grab that lizard picture.
I KNOW how to change the W WordPress logo to _A_ picture. But currently I have to manually SET the picture that is used by the theme already.
I hope there is a variable WITH that image stored.
According to the Github reference, the avf_logo is how to CREATE the Enfold logo, I guess — I want the one that’s already chosen on the Options page.
(Says: Use “avf_logo” filter to change logo.)If I can grab string with image, I don’t have to manually set it for any new site.
This would be far preferable.I have the code to change the login page — but have to manually go out and find string representing the Logo for any new site.
Can you direct me how to find that string representing the logo image, please (hope, hope)?
Presume the “getter” would be the same for any site using Enfold.
Thank you!
Great, Ismael!
I used the following css derived from yours (which I would have NEVER figured out). Looks very nice — but I tried to move the second row’s arrows down a little and can’t figure out what to tweak. I thought top: 23% might be it, but don’t see that that does much of anything.
Here is my css derived from yours:
.gr-custom.gr-custom-1 .av_textblock_section ::after {
content: ”;
position: absolute !important;
color: #fff !important;
display: block;
z-index: 99999999999999999 !important;
overflow: visible !important;
visibility: visible !important;
font-family: ‘entypo-fontello’;
left: auto!important;
top: 23%;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-top: 30px solid #e8e8e800;
border-left: 40px solid #539550;
right: 180px;
}
.gr-custom.gr-custom-2 .av_textblock_section ::after {
content: ”;
position: absolute !important;
color: #fff !important;
display: block;
z-index: 99999999999999999 !important;
overflow: visible !important;
visibility: visible !important;
font-family: ‘entypo-fontello’;
left: auto!important;
top: 23%;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-top: 30px solid #e8e8e800;
border-right: 40px solid #539550;
left: 180px!important;
}Thank you for locating that.
I tried to change the selector multiple, multiple ways and nothing seemed to “appear.”Might you have a suggestion?
It’s a neat effect.
You are brilliant, Victoria. That was IT!
Thank you so much.
Feel free to close this…and give yourself a gentle pat on the back!
