Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


  • Posts

  • Joined

  • Last visited

Everything posted by Paul_in

  1. This is done, I placed twice the "social links block" in both position and then one is hidden for the screen/tablet and the other one is hidden for the phone version. Thanks for the hint tuanphan ! /*Footer - Social links order screen/phone fix*/ @media screen and (max-width: 640px){ #block-yui_3_17_2_1_1591436221045_7428 { display:none !important; }} @media screen and (min-width: 640px){ #block-yui_3_17_2_1_1614055704344_21959 { display:none !important; }}
  2. Ha yes I had not thought about that trick thanks ! I think I know the right code for that I used it for some other parts of the website. I'll try and post the result here wether I succeed or not 🙂
  3. Site URL: https://www.casegoods.in/ Hi Everyone, I've been trying to solve that on my own with answers I found on this forum but unfortunately nothing worked. I made a footer with 3 blocks and I would simply like a different block order for the Phone version. This is the screen version which is fine This is the automatic rearrangement on the phone version And this is what I would like to achieve, swapping the "About" block with the "insta + mail icon" block. Would someone have the right code for that ?
  4. @ryandejaegherHehe yes I was still trying and here is the final code I found that made it possible : /*main page phone: drawings center caption*/ @media screen and (max-width: 640px) { #block-yui_3_17_2_1_1591978977963_25330, #block-yui_3_17_2_1_1591978977963_20185, #block-yui_3_17_2_1_1591978977963_21157{ .image-caption { text-align: center !important; margin-top:0px; }}} /*main page screen: drawings center caption*/ @media screen and (min-width: 640px) { #block-yui_3_17_2_1_1591978977963_25330, #block-yui_3_17_2_1_1591978977963_20185, #block-yui_3_17_2_1_1591978977963_21157{ .image-caption { text-align: center !important; margin-top:20px; }}} I used separates codes for the Desktop and Phone version because I also used some code to resize the drawings and wanted to adjust the margin according to the screen it will be seen. In order for this to work, I had to remove the code line on text alignement in my custom caption design : /* caption design*/ .sqs-block.image-block .image-caption-wrapper p { font-size: 18px !important; letter-spacing: 0.015em !important; line-height: 1.3 !important; font-family: "Asul" !important; padding-top: 0px !important; margin-top: -8px; a {color: #05424d !important;} a:hover{color: #ffffff !important;} } So it's all "solved" but yes indeed to answer your point, I don't have a choice on the font-size with this tweak. I have to setup the font-size in my custom caption design settings and was not able to change this size for the 3 images on the main page. Ideally I would have had control over the size as well but I'm quite happy I went that far already.
  5. Site URL: https://www.casegoods.in/ Hi, Password of the website : CaseGoods_C3 I've made a custom design for all the captions of my images with this bit of code : /* caption design*/ .sqs-block.image-block .image-caption-wrapper p { font-size: 16px !important; letter-spacing: 0.02em !important; line-height: 1.3 !important; font-family: "Asul" !important; text-align: left; padding-top: 0px !important; margin-top: -5px; a {color: #05424d !important;} a:hover{color: #ffffff !important;} } I'm very happy about it but I then added 3 Images on my landing page and I would like for these 3 images only a different design for the caption, mainly to have the text-align:center and I'll probably increase the font-size as well. I tried finding out myself looking into the code of the page but was not able to figure out on my own. Any thoughts ? Attached image of the 3 captions I would like to center on the landing page.
  6. Ok I was searching of the same answer and was able to make an hover effect work so helping people who might want the same This is working for : - images that are a link - images in a summary block that are therefore a link by default - images in a blog area that are therefore a link by default And not on : - images in a gallery - images that are not a link .sqs-block-image a:hover img { filter: grayscale(100%); } /*Image in a summary: hover effect*/ .sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide a:hover img { filter: grayscale(100%); } /*Image in a main blog page : hover effect*/ .BlogList-item-image-link:hover { filter: grayscale(100%); } 🙂
  7. Hurray ! Thanks @tuanphan Working perfectly with this only : <style> /*404 Link color fix*/ .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} </style>
  8. Hi @tuanphan Thanks for following up, I tried your code but didn't work the way I was hoping, maybe I've not been clear enough in my first message so adding images. Basically I just want the automatic rearranging that is happening for the phone at 640px width and make all the block go under each other to actually happen at 1080px width. So that the final tablet version is not like the desktop version with multiple columns but for it too look like the phone version with 1 column with all the blocks rearranged under each other. And I would like this for the entire website.
  9. Site URL: https://www.casegoods.in/404 Hi everyone, password of the website : CaseGoods_C3 over the past 3 weeks, I got my hands on how to find the right ".sqs" blocks with developer tools on a browser and use it to customise a big bunch of things with the Custom CSS area. But somehow I'm not able to find the right one on the cover page I designed for the 404 error page. On this page I would like to update the hyperlink style, by default it's "active" and fade when mouse hover. I would like to give it a colour that changes on hover instead of the fading. When I'm in the custom CSS area, I'm able to see a change in the hyperlink style with my little CSS code update, but it only works there and not in the final online page no matter how many times I refresh or clear my browser cache : https://www.casegoods.in/404 I tried a lot of blocks as you can see : /*404 Link color fix*/ .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;}} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] li, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] li { a {color: #05424d !important;}} .sqs-slide-wrapper[data-slide-type="cover-page"] .alignment-center .layer-front .sqs-slide-layer-content { text-align: center; a {color: #05424d !important;} } .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;} a:hover {color: #ffffff !important;} } Not sure where I'm wrong, any thought ?
  10. @jpeterThanks again for following up, I tried a first time and wasn't able to fix the bug. I was about to suggest a different way of doing by using this script on all the other pages of the website to "force" loading a header background of my choice everywhere. More of a tweak than a clean solution. But I copied the updated code again to make sure I had not made any mistake in the process and it seems to be working perfectly now. I'm very grateful you took the time to make that customisation, it's really makes a huge difference graphically to me! Best Paul
  11. @jpeter I just noticed this whole Javascript has created another issue. If I'm on the landing page at a position where the header has the coloured background "on" and I use the menu to go to another page, this new page works as planned with a fixed menu on top with a coloured background that goes over the content (cf image 1). all good But if I'm on the landing page at a position where the header has a transparent background and I go into another page, then this page doesn't work as planned, it "inherits" the transparent background setup. (cf image 2) and I have to refresh this page to get it right again.
  12. @jpeter Sorry to push but any chance this script you made could also include making the dropdown folder background transparent on "landing-01" area (I renamed home-01 to be more consistent) and "landing-06" area and coloured background anywhere else?
  13. Ok so everything works perfectly but one tiny thing : In the phone version I don't get why, the menu is with a background colour : that colour is the colour of the SITE : BORDER color if this option is active that colour is the colour of the FOOTER : Background color When I scroll on my phone, that background colour scrolls with my page and then everything is perfect. I found this online which I think explains how to fix that issue on a banner, but mine is not a banner, it's a gallery https://www.rebeccagracedesigns.com/blog/mobile-navigation-on-header-image Any thoughts ?
  14. Thanks a ton! It looks exactly like what I need and it goes beyond it by also thinking about the second gallery / banner lower in the page and it's easy to customise the colour in the CSS after that. And you even thought about the Phone version which I was ok to give up on. That's really awesome. A couple of question because it's going a little bit beyond my knowledge, I know how to mess with the CSS but not javascript 🙂 Ok I actually managed on my own to include all this and make it work so answering my own questions for the people who might read this. Where am I supposed to copy past the JS code you wrote? in the code injection part? I put the JS script in Injection code "header", it didn't work initially because I had not started and ended with <script></script> I had some small custom CSS code shown in my first message to make the menu fixed, do I need to remove it? will it conflict with your code? Or am I supposed to keep it because it's making the menu fixed as I want it to be ? I kept this bit of CSS code to keep my menu fixed Do I need to put the logo & menu in "Header:Layout, bottom position" or "Header:Layout, top position" for your code to work as planned? I put the logo and menu in "Header : Layout top position"
  15. Right sorry : https://www.casegoods.in/ password : CaseGoods_C3
  16. Site URL: https://www.casegoods.in/ Hi everyone, password of the webitse : CaseGoods_C3 Template : Brine I would like to make a header that has these properties : - landing page, first full screen gallery page > fixed header with transparent background - landing page, rest of the page bellow this gallery > same fixed header but change automatically into a coloured background so that the logo and menu stay visible on top of the content. - any other page > same fixed header with a coloured background so that the logo & menu stay visible on top of the content. I've tried as many things I could find with videos, blogs and forums tutoriels and custom codes but not able to achieve it so far. I see 3 ways of starting trying : put logo & menu into "Header:Layout, top position" and give a colour to my header background, then I "just" have to make it fixed and to make it transparent on the landing first gallery. put logo & menu into "Header:Layout, bottom position" so it's already on transparent background, then I "just" have to make it fixed and to add a background colour everywhere else than on the gallery. Or maybe it's something totally different 🙂 https://www.joshuakissi.com/ On this website, on the landing page, the header goes from white text to black text when you scroll down, so there must be a way for my header to go from transparent background to coloured background on that same page right? Also right now I'm using custom code for to make the menu fixed, it's working but it seems to create a bug : my first gallery on the landing page is set on 100hv to always take 100% of the screen space but because of this code, it doesn't. Not sure why. I'm using a faded background colour for now but eventually will change it for another colour, no worries about that. /* Fixed Menu */ .Header { position: fixed !important; left: 0; right: 0; top: 0; z-index: 999; background-color: rgba(0,255,0,0.3)!important; } @media screen and (min-width: 1080px) { .Main--page, .Intro, .Main { padding-top: 120px; } .Intro + .Main { padding-top: 0px; } } Hoping someone will be able to find me thanks !
  17. Site URL: https://www.casegoods.in/ Good morning, password to reach the site : CaseGoods_C3 I'm trying my best to make a landing page with a relatively complex layout (with the help of spacers that would work well on all devices (screen, tablet, phone) but I'm not very happy of a few texts columns that are nice and wide on the screen version but become to narrow on the tablet version. The phone version automatically resize everything for the screen width so no issues with that version mostly. Therefore I would like to try making the tablet version exactly like the phone version with all blocks rearranged one after another to see if it's visually better. I tried messing a little bit the "mobile breakpoint" parameter in the Site Styles but it only affects the Header, not the content of the page. Attached images of the current 3 versions of the landing page. Is there a simple way to make this trial via the custom CSS ? I'm working with the Brine template.
  • Create New...