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

mikevatech

Member
  • Posts

    26
  • Joined

  • Last visited

Everything posted by mikevatech

  1. Hello Dave. Thank you very much for the code AND the explanation. I was able to tweek it and make it work for different summary blocks. I had to replace the yui number with the block-yui number, otherwise it kept changing every time I made any update to the page. I was able to find the answer to that little problem right here on this forum. Thank you and thanks to Tuan who also responded and has helped me in the past. I am learning a lot from the generous volunteers who oversee this forum. Thank you all for sharing your talent and wisdom!
  2. Site URL: https://www.blueridgeresearch.com I posted this question in July but have not had a response so I am reposting as a new question in the hope that someone will be able to provide the CSS code I need to create a dark mask and a white "Learn More" button on images when hovered/tapped. The images are inside a summary-block. The code can create this action for a specific summary-block using the ID. I can modify the ID to apply to additional summary-blocks. An example of the summary-block would be the "Expertise" section on this page - https://www.blueridgeresearch.com/home-1. Please see screen shot below to see illustration of what I am looking for. My main question is for the dark mask and Learn More button, but I would also like it if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. For the purpose of this question I have enabled the link on the first image (Noise Models). I truly appreciate the talented volunteers on this forum who have helped me before. I am trying to learn CSS so I don't need to ask for help but this one is beyond me. Thank you in advance to anyone who can help with this question.
  3. Hello Tuan, I don't want to bother you, as I'm sure you are very busy helping many other people, but I hope you have not forgotten about my question. Is there any additional information you need to help me with this css code? If you give me the code for the Expertise summary block, I can modify it for the other summary blocks. To recap: A dark mask and white "Learn More" button on images when hovered/tapped. Please see screen shot above to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I have enabled the link on the first image in the Expertise Summary block - Noise Models. Thank you again.
  4. Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!
  5. Site URL: https://www.blueridgeresearch.com Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled. I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1
  6. Site URL: https://www.blueridgeresearch.com/ourteam-1 Hello, I have a Team page with images in a summary block. I would like to have text (Read More...) appear over the images when hovered over. I think the image would need to gray out a little so the text could be seen. Clicking would take the user to the URL in the image setup (currently pointing to Lightbox but that will change to a URL). Would also need to work in mobile view. Hopefully, simple CSS can accomplish this. The page is here - https://www.blueridgeresearch.com/ourteam-1. I truly appreciate it if one of you can help me. Thank you very much!
  7. This worked! So clean and simple. Thank you, Dan!
  8. Site URL: https://www.blueridgeresearch.com/micah-downing When viewed on mobile device, the images on my bio pages are not centered. The left margin (white space) is slightly larger on the left. I have tried everything to make them appear centered (or even left would look better) in the mobile view. Is there some simple CSS code that will center (or move to the left) all images in mobile view? Or, if that isn't possible, code that will center images of specific pages? Here is the URL of one of the bio pages to view - https://www.blueridgeresearch.com/micah-downing. Here is a screen shot of that page in mobile view.
  9. Tuanphan, I think I figured it out. It seems the two columns required a spacer in between them, though I'm not sure why that would matter. I added a spacer between "previous" and "next" and then the code worked with the page id changed for each page. Don't understand why that worked, but it did. Thank you very much for your help with this. Wish I had your brain!
  10. Thank you for your response, Tuanphan. I'm sorry, I don't quite understand it. The link you gave me goes to a page that shows how to find the page URL. I don't see the page URL anywhere in the code you gave me. I see only the page ID#. Please see below, your code on the left and the inspect code on the right. I highlighted the page ID# that you used in your code. I found that same number for all the other bio pages. But, only the one you gave me works. I don't understand how to duplicate your code for each bio page. I thought I just changed the page id #. Can you please explain exactly what I change to make it work for each bio page? For example, how would the code read for this page? - https://www.blueridgeresearch.com/josh-mellon
  11. Thank you so much Tuanphan. I appreciate your help. The code you gave me worked for that specific page. Great! I have additional team member pages. I took your code and changed the name and div#page number for each one. Only the one you gave me works. The others do not work. Obviously, I am either using the wrong div#page number or something else is wrong. I identified where you got the number for the first page and used that as a guide to get the numbers for the other pages. Can you please look at my code and tell me what I'm doing wrong? The URL to the page you did is - https://michael-james-4flv.squarespace.com/config/pages. Here is the code I made using yours as a guide: /* Mobile-Michael James-Previous Next */ @media screen and (max-width:640px) { div#page-60a40ec20f22b814725502e4 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Josh Mellon-Previous Next */ @media screen and (max-width:640px) { div#page-60c3b8448cc84246d83a97c8 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Alex Salton-Previous Next */ @media screen and (max-width:640px) { div#page-60c9116f3ed8ad122ceaa45c .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Matt Calton-Previous Next */ @media screen and (max-width:640px) { div#page-60c91354f97c884a95e4ac06 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Ben Manning-Previous Next */ @media screen and (max-width:640px) { div#page-60c914d2eebe08096e929d71 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Shane Limpany-Previous Next */ @media screen and (max-width:640px) { div#page-60c9363db4128246fba23851 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Shane Limpany-Previous Next */ @media screen and (max-width:640px) { div#page-60c9363db4128246fba23851 .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Jonathan Gills-Previous Next */ @media screen and (max-width:640px) { div#page-60c938d345d4ac6a9c48f52c .span-2 { width: 50% !important; float: left !important; } } /* Mobile-Blaine Harker-Previous Next */ @media screen and (max-width:640px) { div#page-60c93aa854473e6b91af3f18 .span-2 { width: 50% !important; float: left !important; } }
  12. Site URL: https://www.blueridgeresearch.com For the life of me, I can't find the edit pencil in my Burke, 7.1 Squarespace template. I can click the plus sign and add content blocks, etc., but I can't find the edit pencil. I googled it and looked on Squarespace help still don't see it. What am I missing? Can anyone out there help me? My site is www.blueridgeresearch.com Thanks very much for any help/hints.
  13. Site URL: https://www.blueridgeresearch.com Hello, I have a "previous" and "next" text box at the top of my team bio pages that stack when viewed in mobile view. I would like them to appear as two columns (on the same line) like they do in desktop and tablet view. Can someone give me simple CSS code to do this? I only want it for specific pages so I guess it would go into the specific page header, not the Custom CSS under Design. Here is the URL to one of the pages: https://www.blueridgeresearch.com/michael-james. Also, here is a screen shot of the mobile view. You can see the problem I am describing. The word "next" stacks below "previous." Thank you very much for any help you can give me.
  14. Site URL: https://www.blueridgeresearch.com When I go to Site Styles and look at fonts, I do not see an option for Heading 3. It is just not there. See screen shot below. I am using the Burke template. Heading 3 shows in the text editor when I click into a text box but if I choose it, my text shows as tiny dots. I want to change it but it isn't in my site styles. Does anyone know how to fix this? FYI, my site is locked down for maintenance so you can't really view it. Any help is appreciated.
  15. Site URL: https://www.blueridgeresearch.com My site is currently locked because I'm switching templates. I'm now using the Burke template. After switching I noticed the drop shadow behind the main navigation links and the text that lays over the banner images disappeared. I have the original css code I was using in the old template (Shift) but it no longer works. Please see attached screen shot with yellow highlighter showing where I need the drop shadow. I hope someone can help me. Thank you very much. Original css code that worked in Shift template but does not work in Burke template: .page-title, .page-desc, .main-nav { text-shadow: 2px 2px 5px black; } /* Hyphens */ p { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }
  16. Site URL: https://www.blueridgeresearch.com I have some photos in a gallery block that are labeled "under review." I don't want the public to see them yet, but they show up in search engine results. How can I hide specific photos in a gallery block from search engine results? Simple css code? Something I'm missing? Any help is appreciated. Thank you.
  17. Thank you for that suggestion. Can't I hide it with css code?
  18. Okay. I set it as a fixed header. You can see that the logo looks odd and is not needed to show.
  19. No. I don't have it set currently as a fixed header because I was waiting to see if I could get css code to hide the logo. Do you have a solution?
  20. Site URL: https://www.blueridgeresearch.com/#about-2 Is it possible to hide the logo in a fixed header as it rolls through the index page? Does anyone have css code to accomplish that? Many thanks in advance.
  21. Thanks, Derrick. As usual I was making it more complicated than it is!! Note to self - First look in site styles before you customize.
  22. Site URL: https://www.blueridgeresearch.com/#ourteam The image titles in the summary block are all showing as upper case. The titles are not actually all upper case but the summary block converts them to upper case. Does anyone know a bit of css code to make them upper and lower case? Thank you for any help you can give me.
  23. Update: I figured out how to remove the underline from the image titles using: a:link { text-decoration: none; } I'm learning!! Thank you all.
  24. Thank you Derrick. It appears that your solution AND Tuanphan's solution both worked. I just had to put the code snip higher up in my Custom CSS box. Not sure why but they both worked after I moved the code snip up. The image titles are no longer links. Thank you very much. Is there a way to remove the underline on the title? I can probably do this with html on the title itself but will have to repeat many times. I'm hoping its just a bit of code to add to the solution you already gave me. Thank you again!
  25. Thank you very much for that quick answer, Tuanphan. I appreciate it. Just what I was looking for, but it did not work for me. I pasted the css directly into my Custom CSS under Design. Here is a screen shot of your code in my Custom CSS. What am I doing wrong? Sorry to ask for more help.
×
×
  • Create New...