Journalfloral
Member-
Posts
24 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Journalfloral
-
CSS Blog modified Alternate Side-by-Side Layout
Journalfloral replied to Journalfloral's topic in Customize with code
Okay, then I will have a look where I can change the overall Squarespace settings and site widths. I understand π thanks for your help so far, much appreciated! π Maybe somebody else might have an idea onhow to approach this specific ideas? @tuanphan -
CSS Blog modified Alternate Side-by-Side Layout
Journalfloral replied to Journalfloral's topic in Customize with code
Any suggestions? ππ @Ziggy -
CSS Blog modified Alternate Side-by-Side Layout
Journalfloral replied to Journalfloral's topic in Customize with code
What would you suggest in case of the site width? I don't think I changed anything from the basic setups π€ And I also read, that 1280px and 1920px are the two standard widths for web design? And does it have any drawbacks, when I decrease the width even more? Unfortunately it doesn't seem to change anything? The text of the posts, where the photo is on the right side, is still on the far left and not directly next to the photo. The date next to the first top post looks great! But according to the posts with the photo on the right side, the position of the date is off, because it's not on the right top corner of the photo (but also on the left side, bottom). And also, when you look at the third posts ("Blog Post Title Three"), you'll see, that there the position of the date is somehow a bit more left and more away from the photo, than compared to the first post? -
CSS Blog modified Alternate Side-by-Side Layout
Journalfloral replied to Journalfloral's topic in Customize with code
I used the settings you suggested, but the photos are way bigger and there is also no white space on the sides. The idea is to have smaller photos, like this (so that there is blank space on the sides, like in the example in my first post): The CSS turned the date, that's great! But it's now overlapping the photo instead of being next to it. And it should also be on the outer side of the photo, but now the date is always on the left side. And also I would like the text to be either left handed or right handed, depending on which side the photo is. But with the current setting (text left), it's always left, so when the photo is on the right side, the text is far away. See both points here explained: -
Floating / Overlapping Elements
Journalfloral replied to perry.alexis's topic in Customize with code
What do you mean with "change current section to Classic Section"? π€- 11 replies
-
- custom-css
- html
-
(and 1 more)
Tagged with:
-
Hello, my website is: https://evamauermann.com and the password: Help I would love to have my blog page overview look like this π I guess it's a modified Alternate Side-by-Side Layout, but: - the photos + texts are all centered in the middle part of the site (maybe with a padding on each side?) - and the photos are a bit "overlapping" each other - Also the date of the blog post is vertical on the side of the photo. Thanks! π @tuanphan
-
Floating / Overlapping Elements
Journalfloral replied to perry.alexis's topic in Customize with code
So I removed the last part of the code and now I only use this: /* Blog Γbersicht Γberlappen Header */ .fe-block-yui_3_17_2_1_1727349873408_1406, .fe-block-yui_3_17_2_1_1727299826731_21805 { position: relative; top: -100px;} On mobile I was now able to move the text block above the shape block π And for desktop I now need another code, to close again the gap between the coloured shape block and the following blog posts (as we already discussed above) π- 11 replies
-
- custom-css
- html
-
(and 1 more)
Tagged with:
-
Floating / Overlapping Elements
Journalfloral replied to perry.alexis's topic in Customize with code
Right now it looks on mobile like this: I would like to have it look like this: But when I go into edit mode, the coloured shape block disappears? So I can't just push the text blocks higher above the shape block.- 11 replies
-
- custom-css
- html
-
(and 1 more)
Tagged with:
-
Floating / Overlapping Elements
Journalfloral replied to perry.alexis's topic in Customize with code
This worked great on Desktop, thanks! π But on mobile it doesn't look right π And is there further the possibility to reduce the spacing between the coloured shape and the following Blog articles (please see photo below)?- 11 replies
-
- custom-css
- html
-
(and 1 more)
Tagged with:
-
Floating / Overlapping Elements
Journalfloral replied to perry.alexis's topic in Customize with code
@Ziggy @tuanphan I have the same question for my homepage: https://evamauermann.com (Password: Help) in the Blog Section. Right now it looks like this: But I would like it to look like here: So move the coloured shape block + text block upwards, that they overlap my slideshow header photo. I tried the "overlaping technique" I used on other sections, with adding a new section in between but I couldn't figure out a way because of the photo (because it's not a solid background). Thanks!- 11 replies
-
- custom-css
- html
-
(and 1 more)
Tagged with:
-
I removed the old code and used the new one. Now there are black frames/borders π And I also enabled the Gallery captions and added some text.
-
Hey, I'm also having this problem, that on one site (About --> Meet Eva) I'd like to have a banner slideshow that is full screen and also is behind the header navigation. On all other pages I have a simple gallery picture and it works perfecly, but not on this specific site. @tuanphan Homepage: https://evamauermann.com Password: Help And also I wonder if there is a possibility to change the order of the text on the card on top of the slideshow? Right now its Title -> Description. But I would like it the other way round, so that the smaller sized description is above the bigger title. I would like to get a look like this:
-
Border You mean make 3 items touch together? -> Yes, see picture above (orange). It looks like a table with three columns and one row. And with a thin border. Arrow Static arrow only or clickable arrow? If clickable, arrow - image will use same link or different link? --> see picture above (red). The arrow appears when the photo has moved to the side. The arrow should be clickable and linked to the same link as the image is at the moment. Title You can enable Gallery Section Caption then add some caption to Images, text will appear under image --> see picture above (blue). Would like to have the titels under (1. photo), above (2. photo), under (3. photo) and I would also like to be able to change font, size, etc. Thanks!
-
Adding the code to the top of the CSS box worked, thanks! π Could you also add a border like in the pictures in my first post and also some titels and those little arrows that appear when the photo hovers to the side? π
-
Hey @tuanphan thanks so much for your answer! I would like the photos move right on hover + add a border around 3 photos + titles (like in the photo) π
-
Hello, my website is https://evamauermann.com and the password: Help Normally the navigation menu font colour is white. Only on the single product pages, I've changed the navigation menu colour to black, so you can read it on the white background. For this I used a code I found here in the forum: body.collection-type-products.view-item .header-announcement-bar-wrapper * { color: black !important; } But this code seems to also effect the font colour in the navigation drop downs. These items I'd like to stay in the white font colour (see attached file 1). Is there a code to exlude those navigation drop down items? Second I have the hover effect on the navigation menu, that the font colour turns red. For this I used this code from the forum: /* MenΓΌ Hover Color */ .header-nav a:hover{color: #cc0000} /* MenΓΌ Hover Color */ .header-nav-folder-item a:hover { color: #cc0000 !important; } But same issue now with the single product pages. The hovering effect here is gone, since I changed the navigation colour to black. Someone can help? π Maybe @tuanphan π
-
Hey lovely Squarespace people! I'm setting up my new website for my photography: https://evamauermann.com (Password: Help) π On the Landing Homepage I'd like to link my portfolio with three photos, that are clickable and linked to the actual portfolio pages. Right now I already have this and it also works (see Homepage, scroll to Portfolio). BUT, I have fallen in love with a design I found on another website and I wonder if it's possible to achieve this look with CSS? π It's this website: https://www.luisaapanui.com/ and scroll down to "Our work" (also see attached files). It looks like a grid (?) with three embedded photos, that also move to the right when hovering over them. I also searched on various platforms (will myers, ghost, elfsight, etc.) if this is a plugin that I can buy, but I didn't find anything. Maybe someone can help, thanks (or knows where I can find this)! π