logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
SteveFeher  
#1 Posted : Monday, February 21, 2022 11:14:54 AM(UTC)
SteveFeher

Rank: Member

Groups: Developers, HelpDesk, Registered
Joined: 11/1/2018(UTC)
Posts: 29

Goal -- Update the Store Header Compact widget for my customized design.

Problem -- Widget Board layout seems inconsistent with CSS / Responsive details.

Recreate
1.) Login to admin and proceed to Dashboard > Website > Design > Widget > Boards > Store Header Compact
2.) Proceed to "Layout" options to add a new row into layout.
3.) Click the "+" button to add new column and add Store Logo Zone into column.
4.) Save and view on dev site.

I don't understand why my new "Logo" row is 100% screen width and the pre-existing "Store Menu" appears to respect the CSS width of the container. In the editor, it seems to give us the impression that these are 'nested' in the same container, but they apparently are not.

Screenshots show layout inside the zone and then the result of the page rendered.

ac_Store_Header_img1.jpg (152kb) downloaded 6 time(s).
ac_Store_Header_img2.jpg (30kb) downloaded 5 time(s).


It seems like if we make any edits/customizations to the Boards (layouts, templates, pages, etc.) then the only option is to assign unique CSS ID's to the content and dive into CSS to manage all layout/style. But that seems like a lot more work than the CMS was intended to do -- which makes me suspect that I'm missing something.

Recommendations?

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

ray22901031  
#2 Posted : Monday, February 21, 2022 12:02:09 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
Hi Steve,

Forgive me if I don't thoroughly understand your question, but it looks like you have an 8 to 4 bootstrap layout here. It should be 100% of the space available in the 8 div container, but if you don't have anything on the right-hand side, of the 4 div container, it will seem as if it's taking 100% of the screen width.

Obviously, I believe you're trying to replace the standard logo with your logo. We have found to stay within the width and height of the existing logo, and just override the existing logo in our custom theme.

We try not to, unless absolutely necessary, to tinker with any of the built-in layouts. Please remember that you are dealing with block elements, and anything you create will push anything else below. I believe to fix your dilemma, if I understand your question correctly, is to make sure that the logo and store menu div are on the same row.

This is more of a bootstrap issue than CSS.

I hope some of this helps.
-Ray
SteveFeher  
#3 Posted : Monday, February 21, 2022 12:31:50 PM(UTC)
SteveFeher

Rank: Member

Groups: Developers, HelpDesk, Registered
Joined: 11/1/2018(UTC)
Posts: 29

Hello Ray --
Well, not quite. I want to REALLY change the header -- not just update the logo.

I'll try to be more clear.
* I have an 8-4 top row, with two columns. When it renders in the HTML, there's a container DIV tag that makes the top row respect a default desktop container size. This is desired.
* Then, I added another row that's a 12 column row. When IT renders in the HTML, there's NO container tag and it necessarily expands to 100% screen width and the logo is perched all the way on the left.
* Underneath the added row (and in the same container as the 12-col row above) is another 12-col row that was originally present. This contains (by default) the store menu and is similar to the row at the top in that it respects the container size.

In the attached screenshot of the layout, I've indicated the yellow columns that respect the (1127px width?) container designation and the RED column which is expanding to 100% width.
ac_Store_Header_img3.jpg (92kb) downloaded 2 time(s).


The #1 question: How do I get the added 12-column row to respect the container designation that the other rows are using and NOT default to 100% screen width?

SteveFeher  
#4 Posted : Monday, February 21, 2022 12:36:01 PM(UTC)
SteveFeher

Rank: Member

Groups: Developers, HelpDesk, Registered
Joined: 11/1/2018(UTC)
Posts: 29

OMG.

Just realized that (of course) there's a "code view" option next to the responsive screen options..... so I can edit the source code HTML and assign the DIV container to my 12-column row.

There are days I think I should quit and just take a walk.

ray22901031  
#5 Posted : Monday, February 21, 2022 1:17:21 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
Maybe you will figure it out now that you have discovered the code view option, but your screenshot from your first post is different from your second post.

Your first post shows an 8 & 4 bootstrap column arrangement, and your last post shows a 12 bootstrap column arrangement.

On your first post, it is not 100% screen width, it is 100% width of the 8 column in that particular bootstrap grid, all you have to do is add a picture to the right-hand side of the 4 column div and you will see what I mean, the left side will shrink because there is now something occupying the right 4 column div.

Unless your entire logo, is going to occupy the entire 12 column div row, anything that you put on the left-hand side will have to be within their own div, which means you're going to have to reduce the 12 column to something smaller, or it will be a nightmare trying to align properties, especially when screen size changes.

Either way, I would love to see the finished product.

Best of luck,
-Ray

Update: Perhaps shrink was the wrong word to use, if you take the div on the right-hand side, the four column one, and apply a different background color, you will understand my perspective. Technically, there is no shrinking, not sure though if this is true when using a flex grid. Will need to try this out later when I get home.

Edited by user Monday, February 21, 2022 1:22:33 PM(UTC)  | Reason: Not specified

Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.