Issue Manipulating / Customizing Login Page Before Getting Into My Site & Theme

Well …more testing and I’ve concluded this …

….Nothing I am do with the front end will stick with the A5 plugin it appears and I know I have not yet developed a sound enough understand of the plugin to try and play with it with any confidence.

I have accept that the plugin code itself must be the level I need to tweak for achieve the results I’m attempting.

…Pointers on my next training phase would be welcomed. ..In the meanwhile …I have a look and play with the plugin code to see if that yields some success.

I look forward to the feedback.

Hi right back at you Tepelstreel,

…And …thank you for the reply.

I was concerned it would be confusing without the accompanying screenshots, but you seem to have got the gist of what it was I attempted to say anyway.

You are correct …in the WP Dashboard “Appearance” pop-up window of the vertical Dashboard menu …there is the “A5 Custom Login Page” ….and it is that page that I find the CSS “Write/Cut/Paste” option windows for CSS > and then both > “Own CSS” & “Some SVG” boxes.

I am using the “Own CSS” text box.

It is there that I am working with the changes I had made in the live “Inspect Elements” session. …It is that text box I copy, pasted changes to that “Own CSS” box and it those changes that see me falling over.

….The parts I do “Copy, Paste and Save” …it only corrects the precise element/parts of the code to which it relates of my Login Page …and not all of it …and that is logical and expected.

My question is about the manipulation of the “Inspect Element Table Columns” (I’ll call them Left and Right Column).

You will understand that as I select the part of my Login Page to highlight with “Inspect Element” …only that part of the Login Page is opened up in the “Inspect Element” box.

It is in the box “Left Column” that I float my arrow over the respective lines to then have the expanded code shown in the “Right Column”.

It is then in the “Right Column” …I make the actual customization and see it happen in real time to the actual “Login Page”.

That is great. I see the changes then and there. Once I have the customization the way I want it to appear ….it is those changes to the “Right Hand Column” I “Copy n’ Paste” to the “Own CSS” text box …the I “Save Changes”.

Effectively …I now see I cannot just make the changes to the style for the positioning of the two form pages of the login page …moreover, I have to take all the code …find the exact elements that I need to customize there …then save ALL the code to affect the changes within the Login Page …but I must do it as a total code not just an element …as the Save Changes only work for the specific element and it doesn’t change the whole “Login Page” as I want it to look. I have learnt and it appears to be modifying the original code of the Login Page and not my customized version. (The A5 tool appears to default back to the original code and not my customized version.)

Here I shall apologize for that length description above. I am a newbaby to this platform …and I have limited ability to express myself in the accepted jargon for the code and each of the elements in it more clearly than I did there do. But …I do trust my misuse of terms is made up for by the way I am trying to convey my meaning to you.

That said …you have reinforce my understanding. I feel I must expand the modified code of my customized Login Page line by line and work carefully with that. I do know what you are saying and I shall have a good go at expanding the code I find in the Left Column of the table in “Inspect Elements” …then working on each element (line by line) …make the next changes and Copy Paste into the “Own CSS” text box to make up my full & final version to “Save Changes”.

It seems I am going about this in a very difficult way doing element by element …then copy and paste the code to Own CSS as I described. …However …I don’t know of a better way with my current knowledge of this CSS coding platform via the “Inspect Element” window.

I was hoping that there was a way to open and expand the full version of my customized code in one step …and then within the full expanded total code ….find and work on the elements in question …in one easier fashion rather than the way I am doing it now.

(Gee I hope I’ve done a fair job of explaining myself to you.)

I look forward to your feedback on that awkward and verbose outline of what I am doing and what I wish to achieve.

I appreciate the assistance and will let you know how I get on.

I am the guy in the middle of the “Avatar/Picture” ..by the way.

Cheers,

RQDriftnet.

Hi Tepelstreel,

..What you said was sufficient pointer to head me to the solution.

The way I did it was through the use of Firebug ..but that as it turned out was completely a learing curve with Chrome DelvTools. …In the end it proved unnecessary for the solution.

I eventually played about with Inspect Element and Google Chrome > Tools > View Source and open the code.

I then copied all the code to a word doc and made my changes there.

Then I took my new CSS file (again with copy & paste) back to WP Dashboard > A5 Custom Login Page > CSS tab > Own CSS …and pasted to the text box and “Save Changes”

Perfect outcome.

Thank you for thew heads up Tepelstreel,

RQDriftnet.