timjphoto
-
Posts
55 -
Joined
-
Last visited
Reputation Activity
-
timjphoto got a reaction from tuanphan in Change page background colour when hovering over image blocks
For anyone who is interested I solved this using the following CSS:
//background colour body {background: white; transition: background 0.5s ease;} body:has(#block-yui_3_17_2_1_1647613312964_40288:hover) {background: #99ccff} I had to change the block id and background colour individually which took a while, and I'm sure there is probably a simpler way but this worked for me, hope it helps someone!
-
timjphoto got a reaction from celeryboom in Some images have become blurry on mobile site.
It also might be worth me mentioning that when the device is rotated some, but not all, of the images become sharp again!
-
timjphoto got a reaction from celeryboom in Some images have become blurry on mobile site.
Hi,
I'm having some issues on my mobile site. Some images on my homepage have become blurry, they were not like this when uploaded and images that have been more recently uploaded appear fine. All images look fine on the desktop site, it's only on the mobile site. I have deleted and re-uploaded the files but I'm still having the same problem. I am using custom CSS on the site but I'm not sure why this would have started effecting images now, and only be effecting certain images.
Any help and advise on this would be greatly appreciated.
Thanks,
Tim.
www.timjobling.co.uk
-
timjphoto reacted to Ziggy in Keep footer aligned left
Yes, the page is centered with "auto" margins left and right, which means that they will be balanced and even and centered. Your previous method was fighting against this, rather than fixing it, which is why there was a few problems.
-
timjphoto reacted to Ziggy in Keep footer aligned left
This sounds rather unusual, I believe this is a something with the Wexley aligning the page to the left. To do the the page margin is set to 0px on the left. The better way to center align your pages (without changing to another template) is to target the #page rather than #canvas and "fix" the margin like this:
#page { margin: 20px auto; } Hope that helps!
-
timjphoto got a reaction from creedon in Keep Main Navigation underlined when viewing a Not Linked Page
@creedon That works perfectly, thank you very much!
-
timjphoto reacted to creedon in Keep Main Navigation underlined when viewing a Not Linked Page
@timjphoto
This is where you add in other url slugs you want to exclude from the effect.
So the bit in the code that looks like...
// '[enter url slug here between single quotes]', 'about-1', 'news', ]; ...becomes...
// '[enter url slug here between single quotes]', 'about-1', 'news', 'tim-jobling-photography', ]; I assume tim-jobling-photography is the slug for your blog.
Let us know how it goes.
-
timjphoto reacted to creedon in Keep Main Navigation underlined when viewing a Not Linked Page
@timjphoto
Add the following to Settings > Advanced > Code Injection > HEADER.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add header navigation projects link active on "project" pages to Settings > Advanced > Code Injection > FOOTER.
Let us know how it goes.
-
timjphoto reacted to tuanphan in Close gallery light box by clicking out side image.
Hi. CSS can't solve this problem
If you use a Business Plan or higher, let me know, we will try some JavaScript code
-
timjphoto reacted to paul2009 in Close gallery light box by clicking out side image.
Squarespace has a click event that allows users to navigate between images by clicking on the left or right of the lightboxed image to move backwards or forwards through the gallery. Because of this, they don't allow users to click outside the image to close the lightbox.
A workaround may be to reposition the close button so that it is not hidden by the header:
You could do this with some CSS like this, adjusting the values to meet your needs:
.collection-type-gallery #backToThumbs { top: 134px; right: 44px; } Did this help? Please give feedback by clicking an icon below ⬇️
-
timjphoto got a reaction from tuanphan in Stop social links in footer going grey on hover.
@tuanphan I'v got the code working, I still had my pervious code in there which was preventing yours from working. Many thanks again for all your help.
-
timjphoto reacted to creedon in Keep Main Navigation underlined when viewing a Not Linked Page
No the code wouldn't work for your site. In addition the code was pretty easy to implement because the pages of interest were under the /magazine area of the site. That made it easy to add the css to make the effect happen.
Your projects are at the top level of the site so a different method would be required to achieve a similar effect. Either explicitly adding each url to the code so it knows what URLs are projects. Something like...
const urls = [ '/hessia-studio', '/carter-road-skatepark', etc... ]; Alternately if your projects are always going to be at the top level and you only have a few other non-project top level pages, it may be easier to always apply the effect except when on certain pages.
const urlsExclude = [ '/news', '/about-1', etc... ]; So there are a couple of options.
Change your project URLs to be something like /projects/hessia-studio. Then it would be pretty easy to alter the above code to work for your site. It would also basic be self maintaining as long as you keep the same URL structure. You'd want to consider the effect that change may have on your search rankings. There are ways to mitigate that issue but that is another topic.
The second is basically what I described about including or excluding the effect based on specific page. That code would need to be updated every time you made a URL change or added or deleted pages.
Which method do you think would work for your needs?
The above code snippets are not to be installed. They are pseudo code.
-
timjphoto reacted to creedon in Keep Main Navigation underlined when viewing a Not Linked Page
Do you think explicitly telling the code which pages are projects or telling it what pages are not projects would work better for you? In many cases I would think the later approach would mean less contact ( having to edit it ) with the code.
There is risk of course with any changes to well established URLs within a site in relation to search engines. But as I mentioned those risks can be reduced by using SS's built-in URL redirects feature.
-
timjphoto reacted to tuanphan in Stop social links in footer going grey on hover.
Have you tried adding the code yet? I just tested the code again & It should work
If it still doesn't work, add & keep the code, we can check easier
div#socialLinks:hover .sqs-use--icon { fill: rgba(0,0,0,1) !important; } div#socialLinks a:hover .sqs-use--icon { fill: #00ffea !important; }
-
timjphoto reacted to tuanphan in Floating site navigation splitting in to two lines on mobile.
Use this new code
@media only screen and (max-width: 800px){ #header #topNav { display: block; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); width: 100% !important; right: unset !important; float: none !important; text-align: center; display: flex; justify-content: center; } }
-
timjphoto reacted to tuanphan in Floating site navigation splitting in to two lines on mobile.
Can you remove the code & add item 3? We will try checking easier
-
-
-
timjphoto got a reaction from tuanphan in Staggering Image Layouts.
Hi,
I worked it out in the end, I had my images set to ‘inline’, as soon as I changed them to ‘stacked’ the option to link the images appeared.
Thanks.
-
timjphoto got a reaction from tuanphan in Enable Clickthrough URLS on image block in Wexley
Worked it out! I had the image design set to inline instead of poster, I changed it and the link option appeared 🤦♂️
-
timjphoto got a reaction from Beyondspace in Sticky menu mobile
I seem to have solved it using this code:
@media only screen and (max-width: 800px){ #header #topNav { display: block; position: absolute; top: 80%; left: 50%; transform:translate(-50%,-50%) } } #mobileMenuLink { display: none !important; } It seems to work fine, I'm certainly no code expert so if there is a more effective way I'd love to hear.
-
timjphoto reacted to Beyondspace in Sticky menu mobile
This code hides you buttons on mobile. You can try the following one to overwrite it
@media only screen and (max-width: 800px){ #header #topNav { display: block; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you