Londonpeteharrison
KPCKevin Powell - Community
•Created by Londonpeteharrison on 2/3/2025 in #front-end
Best/Common Page width
There seems to be a million different suggestions for the best/most common page (content) width, what's yours?
Regards
Pete
2 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 1/30/2025 in #front-end
Change colours when required fields complete
Is there a way to change the form background and input background and input text colours once all the Required fields are complete. even though not all of the fields are completed and before the submit, all with CSS?
Regards
Pete
27 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 1/15/2025 in #front-end
Override existing CCSS
Please don't mock me, but I'm using a wordpress page builder for the development of a family history website based around photographs of the family members.
The backend uses Advanced Custom Fields for the data storage and data input.
So I have number of forms gathering details of the photographs and the family members, these are generated by ACF and I have little control over the presentation of the forms. I can add IDs and Classes to the input fields but little else.
The forms generated use CSS generated by ACF and I want to override everything to present the forms my way, and not the rather stark, utilitarian way ACF does it.
Can I override everything based on the classes I define for each input element, it's width, position, colours etc, and possibly even the order that some of the fields are shown?
I don't have control of the html produced, but can I 'inject' CSS to control that too?
Any input gratefully received
Pete
2 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 8/15/2024 in #front-end
Vertical Header
I am using a left aligned vertical header (I know it sounds cheesy but I need a lot of page height) that's width is specified with a css variable --header_width. I then set the <main> with a margin of the same. This works fine, but when the page width is reduced, the header shrinks to a mobile header of 3 bars, but the <main> still has the width it had before.
What is the best way of dealing with this, just a media query? I'm not sure if I should redefine the css variable or whether I should set the width another way, so I'm looking for recommendations.
Many thanks
2 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 5/29/2024 in #front-end
My TranslateZ not working at all in Chrome or Edge
I've been trying to translate a Javascript example from a YT video of a animated card with both rotation and translateZ effects. I thought most of the original code done in Javascript could be handled in CSS with just the mouse tracking done in javascript.
However, niether th original code's 'translateZ' or my CSS version actually do anything,
I read another post here about a solution to translateZ issues being something to do with : "backdrop-filter: blur()". Net being sure what this was, I tried commenting out some box-shadow blur css lines, but that didn't help.
I've had to upload the coide as it makes the post too long if anyone can help me narrow down the problem
5 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 4/7/2024 in #front-end
Your thought process
4 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 3/12/2024 in #front-end
Interesting JS effect
Not sure if the is the right place to ask if its possible to reproduce the effect of the blue female boxer, 3 or 4 screens in of https://www.paris2024.org/en/design/? This is created using JavaScript, but I wonder if it or something like it could be done purely with CSS?
3 replies