-
AuthorPosts
-
September 30, 2020 at 11:57 am #1249618
Dear Enfold team,
I’m happy that yet another customer trusted my choice for Enfold, this will be the fourth site I will build with Enfold.
However, I am struggling with his logo placement requirements. My client desires one logo to be placed on the top left and here it comes: a corner logo on the top right and bottom left. He wants the content of the site to be ‘within this frame’ (not iframe, i mean ‘design frame’, if you understand what I mean).
How do I realize this? Please see the attached image below, the black corners indicate the position of the logo and corner images.
October 2, 2020 at 11:37 am #1250017Hey NewbieEnfold,
Could you post a link to where we can see the actual site site please? You can set the layout to boxed under Enfold->General Layout, then you can add the extra logo in a widget by following this: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Best regards,
RikardOctober 2, 2020 at 1:21 pm #1250052Hi Rikard,
http://hoeklijst.nl/ , though A. it’s password protected and B. there is not much to see yet as I only did a demo import (webshop demo).so you are saying that I can add widgets, both right top and left bottom, via the link you provided? and that in this way it will look similar to screenshot I provided? (also with a logo outside of the boxed area??)
please let me know.
best regards
Peter
October 3, 2020 at 1:50 pm #1250320Hi Peter,
Yes you can add as many widgets as you want, but you will need custom styling for all of them. We can help you out with styling, once you have added the widgets and content.
Best regards,
RikardFebruary 2, 2021 at 5:26 pm #1277175Hi Rikard, Finally the customer was able to give me content and I’ve tried to realize the site according to his wishes. But I’m quite stuck! There are several issues in this ticket, please brainstorm with me on all of them:)
! content that I add to the page doesn’t seem to appear on the page.
What have I done insofar.
>Disabled “merging and compression” for CSS and JS files from Enfold > Performance.
Boxed Layout
Disabled logo.logo { visibility: hidden !important; }
Set the desired logo as ‘logo right above, menu below left’ and added the code to the functions.php
//-------------------------------- // Header widget area //-------------------------------- add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }
Added the logo to the Widget area
And from this point onwards I’m stuck.
How do I get the widget area in the header to wrap around the right corner as is portrayed above?
How do I add a widget for the footer and wrap this around the left corner?
How do I add a border to the boxed website?February 2, 2021 at 5:32 pm #1277178Hi Rikard,
so, the content to the website seems to be resolved.
As for the border around the boxed site, I added #wrap_all
{ border: 2px solid black; }
Does this do the trick for all pages? There is some white area on the left and right top of the border, why? Also, the top border dissapears when you scroll down, whilst it should stay.
Also, I’d like the menu + widget to be above the border. (and the widget with other logo on the bottom left to be outside of the frame as well)I still need help with the other comments.
- This reply was modified 3 years, 10 months ago by the_digital_manager.
February 6, 2021 at 5:26 pm #1278311Hi the_digital_manager,
With the way, the HTML layout is, the border will not stay. The layout that you need should be custom-built, it can be difficult to do with the theme.
Best regards,
VictoriaFebruary 7, 2021 at 11:58 am #1278423hi Victoria,
could you provide me with answers to all of my questions please? I’m really stuck and quite surprised with your answer, as I placed my idea for the website september last year and Rikards reply was rather different than yours. Now I invested time in this site and you say ‘what you want isnt possible’. Would helped me a lot if I was given this info 4 months ago.> Border: so it’s not possible to give the boxed site a solid border? Any other solutions to achieve something like this? This is kinda the main element of this site its housestyle :/
> Border: just below the top, on the left and right side, the border has a gap, why?
> Extra Widget for logo in header and footer , to appear top right and bottom left: I added the code for the top header, Rikard mentioned I would get help with putting the logos in the right place. Also, how do I add and configure the logo on the bottom?Hope you can provide help soon, as we are nearly a week further and your reply insofar makes me pretty worrried, whilst a deadline is coming up
February 8, 2021 at 1:13 pm #1278643Hi,
Thanks for the update. Reading your initial request again, there’s is no specifications on how the scrolling was supposed to work, so it’s a bit hard for us to understand exactly what you had in mind. I agree with Victoria though, it will be difficult to achieve scrolling within a frame unfortunately. What you could try is to place containers in an absolute position behind the frame, so that the frame appears to be solid in all states.
Please note that we are here to provide support for problems with the Enfold theme. We are not a customisations service, although we will try to help our customers out with customisations as well. If you have a customer which is paying you for a customised website, then the responsibility is ultimately yours to deliver that.
Best regards,
RikardFebruary 8, 2021 at 1:29 pm #1278653Hi Rikard,
Thanks for your quick reply.
How would I achieve this? (place containers)
Also, what do I need to do for the customer wdigets, as you proposed, to be shown as a wrap around the corners / in top right and bottom left?February 9, 2021 at 9:12 am #1278968Hi,
Thanks for the update. It looks like you haven’t added the widgets for the boxes on the left and right in your screenshot yet, so please try to add them first. Also please add some content to them, so that we can give you styling to use after that. Once that is done, then we can try to fix, or fake, the disappearing borders when scrolling.
Also please include admin WordPress login details in private so that we can access the backend of your site, if that should be needed.
Best regards,
RikardFebruary 9, 2021 at 10:39 am #1278991Hi Rikard,
I think you might have overlooked something in my posts above, I did add it, in the top at least and as written “it overlaps and I can’t seem to get it right”.
(my other question is: how do I add a widget on the bottom, I can only find info on placing this in the header?!)see page url and admin credentials in the private content. you guys aren’t reachable by phone are you? It’s not going very smooth in these tickets :)
February 9, 2021 at 10:40 am #1278992February 9, 2021 at 10:40 am #1278993February 10, 2021 at 5:13 am #1279301Hi,
Thanks for that. Please try this CSS in order to place the widget on the right hand side of your site.
#media_image-2 { position: absolute; right: -42px; top: -17px; }
Where exactly are you looking to add the second widget?
We are not available over the phone unfortunately. If you need quicker communication, then you might consider hiring a freelance developer to do it for you. As I pointed out be before; we can help you with small changes, but we are not a customisation service.
Best regards,
RikardFebruary 10, 2021 at 11:47 am #1279370Hi Rikard,
I added the code, this is what happens:
Logo Place
I indicated the desired place, outside of the box, on its edges top right, with a red line. How do I get the logo there? :)The other logo should be on the bottom left, similar to the top right as indicated above. Would be FAB if you can explain me how to add the widget and force the logo in the right place with css.
Personal note in the comment
February 12, 2021 at 5:01 am #1279891Hi,
Thanks for the update. I don’t think that design will be possible with the boxed layout, could you change it to stretched so that we can take it from there instead please?
Best regards,
RikardFebruary 12, 2021 at 3:24 pm #1280063Hi Rikard, thanks for your early reply today :) I’ve changed it to stretched. What’s our next step?
February 14, 2021 at 1:16 pm #1280407Hi,
Thanks for that. I’ve made some adjustments to your site, please review it. Also please note that what I’ve done most likely has to be styled completely different for smaller screen sizes, as the widgets has been placed in an absolute position, in order to match your mockup.
Best regards,
RikardFebruary 15, 2021 at 11:38 am #1280495Hi,
On desktop it’s getting there, thanks for that. :)You added a 2nd header widget, but the idea is that there is a 2nd widget area in the footer, on the bottom left, which wraps around the black line, such as the case is with the one on the top right. I can’t find any documentation on how to realize that. could you help with that?
The shopping carts seems to get lost above the logo.
How can I realize this layout on mobile devices?
Best regards
February 15, 2021 at 11:54 am #1280497pS i deleted the 2nd header widget in the widget menu and deleted #wrap_all { border: 2px solid black; } as it seemed to be unncessary with your chosen approach
- This reply was modified 3 years, 10 months ago by the_digital_manager.
February 16, 2021 at 11:15 pm #1281546Hi Rikard, any updates/news from your side? We’re hoping to go live in a few weeks and this design challenge is the main bottleneck. I know that for the content etc. Enfold will be amazing. Am eager to build my first WooCommerce Site with Enfold, so I’m hoping it will all work out peachy.
February 17, 2021 at 3:48 am #1281567Hi,
So the bottom left widget should be fixed, like the top right one? Where do you want to place the cart icon? You should be able to achieve the same design, but with different CSS, using the CSS inside of media queries: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Best regards,
RikardFebruary 17, 2021 at 12:18 pm #1281665Hi, Rikard. You are correct, it should be fixed, as is with the top right one. The cart icon should be next to ‘contact’ in the menu. Can you please help me out with these placements?
Do you have any clue by the way why there is this bulky footer colour in #333333, as i’ve configured the page to contain no footer
Then I’ll dive into the w3 schools (or hire one of Enfolds freelancers if I can’t manage) for the translation of this design to mobile.
Normally I’m capable of doing 99% myself, as you might have seen with other code/CSS I added, but this is a new frontier for me and I am unable to find much help in existing/old tickets.
February 18, 2021 at 10:14 pm #1282092Hi Rikard, woohoo..
I solved the cart position via means of a plugin. Works like a charm.
I also solved the bulky footer colour, seemingly it was a colour setting.
I addedborder-bottom: 2px solid #000;
to .main_color .container { . now we have a line underneath as welladded the code below and added CSS class ‘mybox’ to the text field on https://www.hoeklijst.nl/home-2/. Is there a way to add a padding to ALL content? Is quite a hassle otherwise to give all content a css class..
`@media only screen and (max-width: 767px) {
#top .mybox {
padding: 30px;
}’I tried several pieces of code I found in other service tickets to add a padding to the custom header widget (the logo on top right), to prevent it from being cut off when you make the browser window smaller…didn’t succeed.
- https://1drv.ms/u/s!AqR2jDw4h-rJ0i1G6v_w1cxtIjB-?e=JfzUzD
Can you advice?
What I dont understand is why the box is perfect on https://www.hoeklijst.nl/home-2/ but on other pages the lines don’t go all the way up to the menu bottom line. see:
- https://1drv.ms/u/s!AqR2jDw4h-rJ0jQc3OE8EkU31VZI?e=Zq0IQX
how do I fix this?
Hope you can help me with the custom footer widget, as I can’t find any documentatoin, then we actually have a site that makes everyone happy :D
- This reply was modified 3 years, 10 months ago by the_digital_manager.
February 19, 2021 at 6:20 am #1282122Hi,
Text block elements; are you looking to add padding to all of them, on the entire site? If so, then yes, you can target all text block element without adding a class to them.
Logo cut off on smaller screens; that is exactly the problem with placing content in positions like that. You would either have to hide the logo, or show a smaller one with different CSS, or alter the container width on the screen sizes in question, in order for it not to clash with the container with the border.
Product page; is it the page in private? If so then please try using 1/2 elements, instead of the Grid Row.
Best regards,
RikardFebruary 19, 2021 at 10:20 am #1282168Hi Rikard, in most other tickets I see reactions from moderators with large sums of code/CSS that customers can add to their site. I’m really stuck with the custom footer widget, asked 3 times and your reply doesn’t offer input on how I can realize a custom widget on the bottom left of the ‘frame’, identical to the one on the top right (though you have asked me several times to clarify what I want exactly, but then don’t offer the solution) ….. why is that?
Can you please provide support with this today? we’re 10 days further and i feel that this is being ignored whilst this is a key element of the whole site’s design!
February 20, 2021 at 2:23 pm #1282469Hi,
You can try this function to add your image:
function content_before_footer(){ echo 'Your image goes here'; } add_action('ava_before_footer', 'content_before_footer');
Add a class to the image, then place the image in an absolute position using CSS.
Best regards,
RikardFebruary 22, 2021 at 8:29 pm #1282904Rikard,
‘your image goes here’.
do I need to fill in an image url, name, or (probably the css-class?)I’m not sure how I add a class to an image, as I thought I can only do this when I add the image as content to a page?
this is kinda out of my league….
February 22, 2021 at 8:32 pm #1282905 -
AuthorPosts
- You must be logged in to reply to this topic.