John Paul Posted July 7, 2023 Report Share Posted July 7, 2023 Hello everyone. My question today is, When I'm using Firefox inspector, inspecting the login popup screen, I want to change the height of the popup screen and change the color of H1, but just for the login screen. Inspector shows an element with the CSS I want to edit but it says it's inline...what does that mean? and how/where do I edit it? Quote Link to comment Share on other sites More sharing options...
Chris Lloyd Posted July 7, 2023 Report Share Posted July 7, 2023 https://www.hostinger.com/tutorials/website/how-to-inspect-and-change-style-using-google-chrome https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/index.html Quote Link to comment Share on other sites More sharing options...
Bill Herndon Posted July 7, 2023 Report Share Posted July 7, 2023 4 hours ago, John Paul said: ... Inspector shows an element with the CSS I want to edit but it says it's inline...what does that mean? and how/where do I edit it? Inline styles are part of the style attribute of an HTML element, and have the highest priority. Which means they're not easy to modify. In the case of the login pop-up it's a <div/> element. If the code for that <div/> isn't generated by PHP or Javascript, you could try modifying the PHP file directly. If it's generated, you would probably need a Mod to do make the change. I didn't go too deep into this, but it looks to me like that code is generated by a function in loginlib.php. The <h1/> element is easier. You would need a CSS rule in mytngstyle.css that looks something like: div.LB_content h1 { font-size: 150%; } Bill Herndon Lindell-Herndon Genealogy Quote Link to comment Share on other sites More sharing options...
John Paul Posted July 8, 2023 Author Report Share Posted July 8, 2023 Chris, thanks for the links. They're helpful. Bill, thanks for the info. I'll give it a shot and see what happens. Quote Link to comment Share on other sites More sharing options...
RickM Posted July 8, 2023 Report Share Posted July 8, 2023 (edited) Whilst I am not a great fan of using the !important property in css, in this case it is reasonably appropriate to do so.. @Bill Herndons comments are quite correct and I hope I can enhance upon them Just a very quick look would suggest using #LB_window, .LB_content { height: 550px !important; } might do the trick for you.. Obviously the actual height is your choice.. Thinking about that code IT might alter ALL Light-Box Windows.. Hmmmm I think I have just made a discovery! Edited July 8, 2023 by RickM Possibly NOT good advise! Quote Link to comment Share on other sites More sharing options...
Bill Herndon Posted July 8, 2023 Report Share Posted July 8, 2023 2 hours ago, RickM said: the !important property in css The WHAT!? property? "!important": I've never heard of this. @RickM... you've made my day! (Old dog...new trick.) :- ) Bill Herndon Lindell-Herndon Genealogy Quote Link to comment Share on other sites More sharing options...
Katryne Posted July 8, 2023 Report Share Posted July 8, 2023 When locally modifying CSS, I try first without the !important thing. And if I cannot manage to override existing css, then I add !important, preceded by a space and before the semicolon. Quote Link to comment Share on other sites More sharing options...
RickM Posted July 8, 2023 Report Share Posted July 8, 2023 10 hours ago, Bill Herndon said: The WHAT!? property? "!important": I've never heard of this. @RickM... you've made my day! (Old dog...new trick.) New Dog, Old tricks, good Sir!! It is not a property I recommend using.. I am NO CSS guru, however vast amounts of research into css has ALWAYS said the !important property is a last resort.. And it can be used in situations with inline css.. Not to be a widely used property AT ALL.. 9 hours ago, Katryne said: When locally modifying CSS, I try first without the !important thing. And if I cannot manage to override existing css, then I add !important, preceded by a space and before the semicolon. Katryne, it seems you may be using the property correctly, however I would recommend looking at 'css specificity' before using the !important property.. My first goto for css type issues and questions W3-CSS Reference I am still figuring out the basics of css. It is actually quite complicated yet once one has a reasonable understanding it is not so bad.. I may have reached 'reasonable' but that is subjective! <Smile>. Quote Link to comment Share on other sites More sharing options...
John Paul Posted July 9, 2023 Author Report Share Posted July 9, 2023 (edited) OK, thanks you guys input, I got it sorted. Here's how I got it, all in css: /* ========== Popup windows ========== */ .LB_window {background:#004786; border:2px solid #000; color:#fff;} .LB_content {background:#004786; height: 600px !important;} .LB_content a:link, a:active, div.icons a {color: #33ff33;} .LB_content a:visited {color: #ffffff;} .LB_content h1 {color: #ffffff;} Notice I changed the color in the first line, added the height in the second line, and added the next 3 lines. @Bill Herndon I looked in loginlib.php, but did not see any reference to the height or width, BUT you can add the style attribute to line 6...it's the h1 reference. Thanks a million guys! Edited July 9, 2023 by John Paul added comment to Bill Quote Link to comment Share on other sites More sharing options...
RickM Posted July 10, 2023 Report Share Posted July 10, 2023 Well done @John Paul A little sideways thinking always goes a long way! Quote Link to comment Share on other sites More sharing options...
John Paul Posted July 10, 2023 Author Report Share Posted July 10, 2023 1 hour ago, RickM said: Well done @John Paul A little sideways thinking always goes a long way! Thanks Rick. I still have few brain cells left to think outside the box sometimes! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.