watts-creative

My apologies @creedon. I saw that and pasted it into my CSS earlier today, but I obviously did something wrong because it appeared not to work. However, I just posted it again and now it worked. Sorry to waste your time...but thank you!

@creedon Thanks for your reply. I read through the whole thread you posted, and while the following code got rid of the time for the Event list page, it left the commas. See screenshot. span.eventlist-meta-time { display: none !important; } Someone actually followed up with this same issue about the commas on that thread, but then the conversation got derailed by a different request. I read through the whole thing twice and couldn't find the solution for removing the commas. Again, this is just for my multi-day events on the Events listing page...I've got it working on the Event detail page. Thanks for your help!

Hey all, Following up on this. I too have a 7.1 site, and I was able to hide the times and commas for multi-day events on the event detail page but not on the event list page. Can someone help with that CSS? Page is https://www.heroeslinked.org/events-1, third event down. Thanks in advance!

@iamdavehart, you are a steely-eyed missile man! Just read through your whole post—including the Do it with CSS (please don't! do it with code!) section—and once again you explained your methodology perfectly. Do you teach? If you don't, you should. Going to read through again tomorrow, when I haven't had a couple glasses of wine, but at first glance your js solution sounds perfect. Sadly, the need I had for this that sent me questing for solutions in the first place was ultimately nixed by my client, but I plan to implement this on my personal site, so I thank you for taking the time to distract your brain!!

@iamdavehart Deployed your "Best Answer" and it worked beautifully! Again, thanks for the time you spent on it.

@iamdavehart, I am a huge proponent of the long answer when someone explains something as methodically and clearly as you have done. And your solution(s) outlined above are as elegant as your previous one! I haven't implemented any of your solutions yet, but will get back if I have issues (which will most assuredly be user input error, of course). Regarding your Final Thoughts, I concur with your FE review. As a conventional graphic designer—who cut his teeth on programs like Adobe Illustrator, which essentially uses a grid layout scheme with layers to assemble a design—I think SS's approach with FE feels more like what I'm used to. But where AI is a robust, powerful layout tool, many years in the developing, FE is in its infancy...as clumsy as a toddler sometimes, especially since I had finally gotten to a point where I felt comfortable hacking my way through much of the code (or stealing someone else's hacks!) to achieve the result I was looking for. FE solved many layout issues, but created problems for many others. In any case, this is where we are, and I appreciate SS making this approach available. Thanks again!

@iamdavehart This simple, elegant solution worked well for me prior to Fluid Engine. But now it's broken. Have you (or anyone) updated this for FE? The issue is placing the code block directly below the summary block. Previously, as you know, you clicked the + sign below the summary block and added the code block. In FE, you drag the code block to below the summary block, which doesn't work, and I'm not coder enough to figure out how to change it. Your help is very much appreciated!

@tuanphan, I've asked this elsewhere, but do you know of a way in Fluid Engine to offset the anchor link and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window. To explain what I'm trying to create: I have a page with multiple sections, and each section has its own full screen background image. In each section I have a button to link to the section below it. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability. Is it possible to stick that anchor to the beginning of the section? I can give the site and password if you wish to take a look. In any case, THANKS!

@paul2009, regarding linking to sections: do you know of a way in Fluid Engine (preferably with CSS but js is ok) to offset an anchor link within a section and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window. To explain what I'm trying to create: I have a page with multiple sections, and each section has its own full screen background image. In each section I have a button to link to the section below it. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability. Any ideas? Is it possible? I can give the site and password if you wish to take a look. In any case, THANKS!

I have similar questions and problems I'm trying to troubleshoot in Fluid Engine: Is there any way to link to a page's section[data-section-id="###"] selector? I suppose this is analogous to linking to page-section-id as one used to be able to do previous to 7.1. If not, is there a way (preferably with CSS) to force an anchor link within a section to stick absolutely to the beginning of its section, regardless of the browser window's size? That way, when you link to it, it will always scroll to the beginning of that section. I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window. To explain what I'm trying to create: I have a page with multiple sections, and each section has its own full screen background image. In the first section I have a button to link to the section below it. That section has a button to link to the section below it, and so on. I've set anchor divs in each section, but now it scrolls down to wherever the link is on the page, and I want it to scroll to the very beginning of the section. I've tried to finesse it for various screen sizes, but it doesn't look right. In any case I'd like it to ALWAYS scroll to the beginning of the section regardless, as stated before. Anyone with any ideas? I can give the site and password if someone wishes to take a look. In any case, THANKS!

I have similar questions and problems I'm trying to troubleshoot in Fluid Engine: Is there any way to link to a page's section[data-section-id="###"] selector? I suppose this is analogous to linking to page-section-id as one used to be able to do previous to 7.1. If not, is there a way (preferably with CSS) to force an anchor link within a section to stick absolutely to the beginning of its section, regardless of the browser window's size? That way, when you link to it, it will always scroll to the beginning of that section. I have tried many techniques to offset the position of the anchor link, but its position changes relative to the size of the browser window. To explain what I'm trying to create: I have a page with multiple sections, and each section has its own full screen background image. In the first section I have a button to link to the section below it. That section has a button to link to the section below it, and so on. I've set anchor divs in each section, but now it scrolls down to wherever the link is on the page, and I want it to scroll to the very beginning of the section. I've tried to finesse it for various screen sizes, but it doesn't look right. In any case I'd like it to ALWAYS scroll to the beginning of the section regardless, as stated before. Anyone with any ideas? I can give the site and password if someone wishes to take a look. In any case, THANKS!

Thanks @creedon! Worked great, although I had to change color to border-color because it was coloring the nav item preceding the line. You rock!

Seems like a useful feature for smaller businesses who, like my client, offer a limited number of bespoke kits that she puts together every month (doesn't have the bandwidth/resources for more than 8 kits). She'll just need to track it manually...and take down the item once she's reached the maximum. Anyway, thanks @paul2009.

@creedon, thanks! For some reason your entire code didn't work. However, when I added just the .header-nav-item:first-child to the beginning of what I had it worked great. I forgot to ask you to solve for mobile as well. Here's the mobile code I have now: .header-menu-nav-item:nth-of-type(7) a { display: inline-block; border-bottom: 1px solid; padding-bottom: 1em; color: #9c9a84; } Again, my website is https://www.meetinghousefabric.com/ And again, thanks!

@creedonYour code worked beautifully for my site. I used it for a while and then, as you cautioned "If you add another Folder Page and it has as many or more items then it too would pick up this CSS." That's exactly what happened and so I'm now in need of "another way to target the menu" I want to style. My site is public: https://www.meetinghousefabric.com/ and I'd like to add the divider to the first nav menu—Shop—but none of the others. I played with your ".header-nav-item header-nav-item--folder:nth-of-type(n);" suggestion, but not coder enough to get it to work. Would you have time to help? Thanks!