-
Posts
-
Hi Kriesi,
How do I get the color sections to display full-width, as in the theme demo?
Here is a page where the color sections are not displaying full-width:
http://awesomescreenshot.com/07f2s85d0c
My homepage consists of 5 color sections:Color section 1 has the following:
- Text block with the h1 in it
- 3 images with captions (each within a 1/3 column)
- Empty 1/4 column
- 1/4 column with a text block
- 1/4 column with a button
- Empty 1/4 column
Color section 2 has:
- Text block with h2, then h3
- 5 large buttons, each in a text block in a 1/5 column
Color section 3 has:
- h2
- Portfolio grid (1 row, 3 columns, Title only, set portfolio grid image size automatically, AJAX preview, not sortable, no pagination)
- Button inside text block
Color section 4 has:
- First 1/3 column: Widget area (recent posts), text block with button
- Second 1/3 column: Text block with h2, several paragraphs, 2 buttons
- Third 1/3 column: text block with h2, testimonials grid (1 testimonial in a grid, everything is filled out except for the image)
And color section 5 has:
- Empty 1/4 column
- 1/2 column with contact form (default fields, just changed some labels)
- Empty 1/4 column
When I constructed this page one color section at a time, the color sections were displaying full-width – even after I laid out the whole page. Next, I made the theme’s homepage this page. After this, the color sections were no longer displaying as full-width – even after I made the original homepage the theme’s homepage again.
Is this a bug in the theme? Is there a workaround that works every time?
(Edit: The site is using Theme Test Drive, so only I can see this theme on the site as of right now. The Enfold theme is up to date on this site.)
Thanks, David
Hey!
Your theme needs to be updated to work with the newest version of WordPress before anything else.
Best regards,
DevinHi Devin,
Sometimes the theme’s control panel tells me that I need to upgrade, but other times it tells me that the theme is current. I did just upgrade the Enfold parent theme to 2.7.1. The color sections still aren’t full width. (I’m using Enfold Child for custom CSS, but the problem persists even without my custom styles.)
Thanks,
DavidHey!
Thank you for using the theme!
I browse through the dashboard and when I clicked the Enfold Child panel, it says that I don’t have sufficient permission to access the page. Please give us full admin rights in order to debug the issue. Deactivate all plugins if possible then we’ll check it again.
Regards,
IsmaelHey!
Thank you for the login details.
I still can’t see the Enfold Child panel and everytime I tried to check the page it redirects me to the coming soon page.
Best regards,
IsmaelHey!
Thank you for the info.
I’m not sure why the original frontpage is not working but creating a new page then adding the homepage shortcodes seems to fix it. You can check it here, just change the page title: http://amusementux.com/homepage-test/
Regards,
IsmaelHi Ismael,
Thanks. However, I knew about that already (please refer to my original post). This solution seems quite unreliable to me. My Homepage Test and your Homepage Test have the same contents, right? I am able to edit either of those pages using the Avia Layout Builder, yet yours is showing the full-width color sections and mine is not. I wasn’t able to use the regular editor on your page in visual or text mode to verify the shortcodes.
My Homepage Test page was built by adding one widget or row at a time and saving each new version. Each time, I verified that the color sections were still full width. When I made the theme’s homepage my Homepage Test page last week (right before my first post) the full width color sections stopped working and haven’t worked since on that page.
So, I’m also concerned about the maintainability of this solution going forward. I’m worried that whenever I have to update a page in the future, I will have to recreate the entire page or the color sections will break. I’d also lose the ability to revert to a previous revision of a page. This is too much work, and I haven’t had this problem with any other theme I have used.
Are we trying to work around a bug in the Avia Layout Builder here? Can this bug be fixed in the next update to the layout builder or the Enfold theme?
Thanks,
DavidHey!
Thank you for using the theme.
I’m not sure if this is a bug or just a temporary hiccups on your installation because this is the first time that I have encountered this issue with the color section. Note that you can’t switch between the default editor and the advance layout builder. If you want to see the actual shortcode of the advance layout builder, edit function.php, find this code on line 16:
if(isset($avia_config['use_child_theme_functions_only'])) return;Below, add this code:
//set builder mode to debug add_action('avia_builder_mode', "builder_set_debug"); function builder_set_debug() { return "debug"; }You will be able to see the actual shortcode below the builder. Refer to this link for more info:
http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/Let us know if you’re still having the issue.
Cheers!
IsmaelHi Ismael,
Thanks. Should I make this change in the parent theme’s functions.php file? In my child theme, functions.php is mostly blank.
Tomorrow, I’ll plan on doing a diff between my Homepage Test and yours to see what, if anything, jumps out at me regarding the color sections and related width issues. I probably have made some other modifications to that page while I’ve been working on fine-tuning my custom CSS.
Thanks,
DavidHi!
Not sure if its clear but the Avia Layout Builder can *not* be used at the same time as the regular WordPress visual editor. So switching between the two will never work as a way to do any kind of page editing.
You can add the debug function to your child theme functions which will then enable the debug window. Be aware however that if you make an edit to the raw shortcodes which is incorrect it can cause the whole pages layout to have issues. This is why it isn’t turned on by default.
Cheers!
DevinHi Ismael and Devin,
I apologize in advance… long reply coming. I hope it helps. :-) I got to look at the diffs between your (Ismael’s) Homepage Test and mine:
1. The first color section has extra parameters in your version: video=” video_ratio=’16:9′.
2. The three placeholder-tall images on the homepage are aligned center in yours and left in mine.
3. The middle placeholder-tall image is animated top-to-bottom in yours and bottom-to-top in mine. I intend for just that image to be bottom-to-top.
4. Your color sections have shadow set to no-shadow. Mine are set to shadow.
5. More categories are included in the portfolio grid on mine.
6. Your homepage-widgets color section has an empty av_textblock at the top of it. (I think I saw this in my document’s layout later and removed it.)
7. The testimonial subtitles are different.
8. The title is empty on my version’s contact form because there is a custom h2 title above the form.
9. Small differences in the contact form like the to: email address and the label for Email address.
There are also these changes in the text between yours and mine, maybe because of edits I made to my document while working on the CSS:
1. There are no paragraph tags around some of your paragraphs. I’ve added some paragraphs that have their own CSS classes to mine. (I’m using the Disable WPAutoP plugin on my site.)
2. I’ve added icons above the 5 services buttons. (I have not uploaded the icon font yet, so they are not displaying.)
3. I switched the View our Portfolio button’s class from secondary-button to tertiary-button.
4. Under the Homepage – column 1 widget area, I added a textbox with a button for viewing more articles.
5-6. I added a class on the h3 for Why user experience design instead of web design?. I also split that textblock to put the button into a separate textblock.
7. I changed the testimonial widget’s header to be an h3 with its own class.
8. I added a Park/Company field to
The rest of the differences are just whitespace.
So, to sum up the shortcode diffs: I don’t see any differences that may affect the color section width other than the video parameters being added to yours.
Here are the differences in the full HTML for the two pages:
1. Their html_entry_id_ and avia_entry_id_ numbers are different.
2. Your page’s images and CSS are using Pagespeed to optimize them; mine are not – maybe because your page is currently my site’s homepage. Similarly, your version minimizes some CSS that the plugins have not externalized.
3. On yours, the Tipsy Social Icons CSS is within a <style> tag instead of a <link> tag.
4. The plugins’ scripts are imported in a different order.
5. Mine has a <link rel=’next’ …> tag.
6. Your page uses the .home class.
7. The breadcrumb trails are generated differently. Quite a bit of difference here, so please refer to the files’ HTML.
8. Mine has this between the breadcrumbs and the div id for homepage-hero:
<div class=’container_wrap container_wrap_first main_color fullsize’>
<div class=’container’>
<main class=’template-page content twelve alpha units’ role=”main” itemprop=”mainContentOfPage”>
<article class=’post-entry post-entry-type-page post-entry-354′ itemscope=”itemscope” itemtype=”http://schema.org/CreativeWork”>
<div class=”entry-content-wrapper clearfix”>
<header class=”entry-content-header”></header><div class=”entry-content” itemprop=”text”>9. The color section id’s in mine also contain classes like avia-builder-el-0, el_before_av_section, and avia-builder-el-first. These are also present in other things I built with the Avia editor, such as images.
10. There are <main> elements associated with each color section ID in yours.
11. My contact form uses a fieldset and classes like textare_label hidden textare_label_avia_message_2.
12. Yours has some obfuscated JavaScript toward the end, starting with var addComment.
I’ll continue looking into this to see if one element on the page seems to be causing the color section width to break. Firebug might show me this.
Was your version created after I upgraded to Enfold 2.7.1? Would I be able to resolve this issue by creating new documents with the latest version of Enfold?
Devin – Thanks. Right, I wasn’t going to change the raw shortcodes unless someone here instructed me to do that. I just turned on the debug mode long enough to do the diff above.
I’ve commented out the code for adding the debug mode. Feel free to turn debug mode back on if you need it for looking at this issue. Also, if you need them, I have saved files containing the shortcodes for both of our versions of Homepage Test. Could I email these to you?
Thanks,
DavidHi Ismael and Devin,
I looked at this issue more today. Summary: if I remove the first div class=”container” within div id=”main” (2 levels down), this fixes the color section width issue on any of my pages which use the Default template.
My version has the width of .container (.responsive-large .container) set at 1210px. Inside this, a .responsive_large .container .twelve.units’s width is also set at 1210px. The .avia-section color section’s width is set at 100%, but this is several more levels down from that (.template-page.content.twelve.alpha.units, article class .post-entry.post-entry-type-page.post-entry-354, .entry-content-wrapper.clearfix.avia_sortable_active, .entry-content).
Your version has the #homepage-hero, #homepage-services, etc., divs directly inside the <body> tag, so they are not within this .responsive-large .container. Therefore, only the 100% width (1899px on my display) style is set for these divs.
It seems like there is a problem with how the divs are being closed. The way I understand it (based on my previous software development experience), all of my color sections should be within div id=”main”. That makes sense semantically. However, it causes the color sections to not be full width.
Possible fix: when I remove the word “container” from div class=”” (just leave the class empty) immediately inside div id=”main” and div class=”container-wrap…”, the color sections go to full width. And the .container class inside the color section divs means that they remain 1210 pixels wide also. This works on all of my pages (which all use the default template) except for single blog posts and possibly portfolio items. (On portfolio items, I still need to add two more rows with color sections.) Of course, you or the developer would have more familiarity with your templates and would be able to determine whether or not this is the right fix.
Other fixes I tried: I also tried changing the .container width in Firebug, but I couldn’t get the grid to remain 1210px with the .container expanded to 100%. I also wasn’t sure whether changing the .container width would have unintended consequences on pages that use other templates.
How I got your (Ismael’s) page to break: On your page (in Firebug), I added div class=”container_wrap container_wrap_first main_color fullsize” and, inside that, div class=”container” immediately inside div id=”main”. Adding div class=”container” there caused the color sections to not be full width anymore. This tells me that my possible fix above may be correct.
Please try the possible fix that I mentioned above and let me know if it, or a related fix, could be in the next theme update. Or, if it’s better to fix this with CSS, please let me know the best fix.
Thanks,
DavidI’m really confused on the above breakdown. The issue with creating a new page vs the previous is either a fluke or in how the original was saved using the older settings and has since not been updated simply by not being edited.
If the new pages being created dont have the issue then the solution is to re-create the page.
Removing the container class from the layout will do just that, remove the container from the layout. It isn’t a solution unless you are trying to remove the container from everything.
It seems like a fluke to me. I just created a new page using Ismael’s shortcode approach above, and the color sections are not full width. The page is here: http://amusementux.com/about-4/ (requires kriesi-temp login to view).
I’ve uploaded some screenshots here: http://www.sendspace.com/filegroup/vCVZW1ipLb8I7S0Sv8SpaHcCPcqcz%2FuY. Files inside it include:
- About4.PNG shows how http://amusementux.com/about-3/ looks now. No full-width color section.
- About4-Firebug-Container.PNG shows how the page looks in Firebug without modifying any code.
- In About4-Firebug-outer-container.PNG, the outermost container’s class is renamed to outer-container. The color section’s background is full width.
- In About4-Firebug-NoContainer.PNG, the outermost container is removed (empty div). Same result as renaming the container.
The line of code I want changed is highlighted in all three of the Firebug screenshots above.
I am fine with removing or renaming the outermost container. Just need to know what changes to make in the template files.
What method do you mean when you say you are using the shortcode method? Creating a new page should really only be a matter of new page>switch to advanced layout editor>drag and drop content.
Shortcode method as Ismael described here: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-265672. He gave more details here: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-266304.
In short, it’s:
1. Turn on Advanced Layout Builder’s debug mode (as described here: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/).
2. Open the original page
3. The debug mode is turned on, so copy the shortcodes out of the section of the page that debug mode shows (below the rest of the page).
4. Turn off debug mode.
5. Create a new page.
6. Paste the shortcodes from step 3 there.
7. (privately) Publish and view.Hi, sorry to intrude in this topic, but I think I have the same problem in creating new pages with Colour sections and they are not full width. My site is locked down at the moment, but I can send login details if you wish to take a look.
Hi Heathcliffe,
Thanks for reporting that you’re seeing the same problem on your site. It’s a relief to find out about someone else who is experiencing this. Can you try the steps below?
1. Install the Firebug browser extension if you don’t have it.
2. Open the page where you’re seeing the problem in Firebug.
3. Look for the first div class=”container” below div id=”main”. Depending on the page’s template, it may say div class=”container (more classes after this)”. As of version 2.8, most pages will have two divs with class=”container”, one inside the other. You’ll want to change the one that is immediately inside div id=”main”.
4. Change “container” in this line to “outer-container”, or just remove it (so that it says div class=””). (See the screenshots I posted here if you’re not sure what I did: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-271618.)Does this cause your site’s color sections to go to full width?
Thanks,
DavidAnd what happens when you create a new page without trying to paste in possibly incorrect shortcodes?
I just created a test page on your site and the color section has no issue displaying at full width.
I think root of your issue, from what you are describing, is that you keep pasting in the same incorrect layout and expecting different results. Instead, re-create the page from scratch so that the correct content, wrappers and classes are generated.
Ismael,
This reply is to your post here: https://kriesi.at/support/topic/background-images-dont-show-up-inside-content-sliders-slides/#post-273691.
In the other thread, you asked:
For example, you said that, “I found a possible solution, remove the first div class=”container” inside div id=”main””. Where exactly are you doing this modification?
Please see this post for the questions you are having: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-271618. I posted screenshots there of exactly what my changes were. Yesterday, another user reported the same problem I am having.
I didn’t modify any theme files other than my child theme’s style.css. All of the Enfold files are still the same. The problem is with the original theme, not with any modifications. Please read the previous posts in this thread for more details.
David
Hi Devin,
Since this looks like a layout issue, I’ve created several more pages using your /color-section-test page as a starting point. This gives us a simpler example for identifying the cause, so thank you for creating that page.
I recreated your page at http://amusementux.com/color-section-test-with-id/ with the advanced layout builder and initially got the same results you did. Next, I added an ID on the color section for styling. The page looks different than expected because the
<div id="footer">element containing the footer widgets is inside the color section’s div. This issue doesn’t affect the color section’s width, but if you can reproduce it then a separate case should be opened for that.Next, I created http://amusementux.com/color-section-test-nested/ to see if the width problem was happening because I was putting column layouts within color sections. This page gave me the same results as /color-section-test-with-id.
Next, I created http://amusementux.com/color-section-test-all/. On this page, I began with your layout (which was still working) and put a color section around the three 1/3 columns. (I put different background colors on the color sections using the Advanced Layout Builder to verify their width.) The color sections became narrow (the original problem). So I’ve reproduced this issue on a much simpler page.
Please add a color section around your 3 1/3 columns in the top row on your page (http://amusementux.com/color-section-test/). Do you see the narrow color sections there that I saw on amusementux.com/color-section-test-all/?
Thanks,
DavidI’m not seeing an issue in any of those layouts. The color section works exactly as intended and the layout is rendering exactly as intended on each.
What exactly are you expecting to happen, that you’ve seen in the theme demo or on another installation of the theme, that is not happening there?
I’m not seeing an issue in any of those layouts. The color section works exactly as intended and the layout is rendering exactly as intended on each.
Are we looking at the same thing? The two screenshots in this .zip show what I have: http://www.sendspace.com/filegroup/zOjPKYss4c6J%2F2Dq25CzfA.
The intended behavior you are describing makes sense if the color section is inside the column. Then the color section should only be as wide as the column is.
However, here, the column is inside the color section. If we have column 1, column 2, and column 3, and these are within a color section, I haven’t given any specific instructions regarding the width of the color section. I have not told the layout builder to change this. I would expect the color section to act the way the documentation describes: “Color Sections, LayerSliders, and Masonry elements will always be full width and can not be placed next to a sidebar or inside column elements.” Saying that cutting off the color sections’ widths is “exactly as intended” contradicts the documentation.
This is fundamentally an interaction design problem with implications in the software tool, not a purely software/web development problem (speaking as someone who has worked in both IxD and dev). In other words, if I want to make a color section that is only as wide as my columns (or 3 columns wide), I need to tell the layout builder that I want that.
But this is only a possible desired outcome, not a probable one. The probable outcome (as Heathcliffe and Flikk have asked for on this forum) is a full edge-to-edge color section. The tool should always be doing that consistently. I can’t really see anyone creating a color section that isn’t truly full-width, but in case anyone wants to, the color sections should have a preference that lets users make them as wide as possible or constrained to the columns. (Feature request for the ALB.)
What exactly are you expecting to happen, that you’ve seen in the theme demo or on another installation of the theme, that is not happening there?
I am expecting the color sections in the All test page to be as wide as my browser window. They are this wide in the Nested test page and your original test page.
The theme demo’s Landing Page has full-width color sections with columns inside them: http://kriesi.at/themes/enfold/pages/landing-page/.
Drivott (in the Enfold Theme Showcase) has the kind of layout I am trying to achieve: http://drivott.com/. Their homepage consists of full-width color sections with columns inside them. And it works as I expect.
Hi!
Thank you for the info.
We’re really not sure why the color section on the pagehttp://amusementux.com/color-section-test-all/ doesn’t render properly like the ones on http://amusementux.com/color-section-test-nested/ and http://amusementux.com/color-section-test/. Did you modify anything on the theme files? If possible, please post the ftp details here and set it as a private reply. I’ll ask Kriesi and Dude to check the thread.
You can vote or post the ALB feature on the Feature Requests page.
Cheers!
Ismael
- The topic ‘Color sections aren't displaying full-width’ is closed to new replies.