Dear All,
I've been learning some basic HTML coding so I can make simple changes on my SE website, and I'd like to make a few changes. I understand that the Admin Panel / Layout Editor allows for a degree of customisation, but being able to alter the HTML code for a few pages will allow me to do what I can't do in the Admin panel. Note that I'm not looking to change CSS at the moment (and I understand this can easily be done in the Themes section of the Admin panel).
For example, I'd like to make a few changes in the "Edit Profile" section of my site. I've done the usual F12 to bring up the HTML code (image below) and I know what changes I'd like to make...
However I don't know where to access the file to make these changes. I've been through various folders in my cPanel and opened a bunch of files, but can't seem to find where I can edit the html that is shown when I press the F12 button (as in the above image).
Anyone able to give me a bit of steer on this? Ideally I'd like to know where I can find (and edit!) the HTML code for specific pages. For example, if I want to edit the HTML code for the "Edit Profile" page, where do I go? If I want to edit the HTML code for the "Contact Us" page, where do I go? etc.
Any help is much appreciated!
You would edit the CSS in your theme manager. Using a clone of the template and not the original theme. It's not good to edit the original themes as you would then have no fallback when you need support and would have to restore the theme to original in order to rule out CSS issues. So it's best to work on a clone.
You are showing the body CSS. Just put what you want in the cloned theme.css in admin theme manager.
Otherwise, you would be editing the default tpl files for no reason as nothing you show above is for the html. It's for the CSS. Unless you mean to override the
display:none
CSS that shows but you still do that via CSS.
Hi Donna,
Thanks for your response. I'd just like to clarify the following:
So I'm looking to remove the field-privacy-selector in the image below...
However when I go to the Theme.css in the admin panel, there doesn't seem to be any mention of it.
Using Google Chrome's html editor, I can remove the field-privacy-selector by simply commenting out the code (ie. <!-- -->as shown in the image below.
So when you say, "Just put what you want in the cloned theme.css in admin theme manager.", are you suggesting I simply put this code into theme.css in the admin panel theme manager?
Thanks for your help!
In that case, you would add a display none to it instead.
So in your cloned theme, you would add to the theme.css:
div.field-privacy-selector {
display: none;
}
But, as I've not tested this other than the profile, it could also hide other areas where privacy settings show. In that case, you might want to make it page specific.
#global_page_user-edit-profile div.field-privacy-selector {
display: none;
}
As I'm no CSS expert and it's a bit late, you need to experiment with that.I've not tested other than looking at the user profile page.
I have Zephyr theme and within their Custom CSS section, I added the second set of codes and it did hide all the privacy dropdown menus. I'm guessing you could do it in the other theme's theme.css file as well; maybe just add it at the end of the file.
#global_page_user-edit-profile div.field-privacy-selector {
display: none;
}
Country, you mentioned:
However when I go to the Theme.css in the admin panel, there doesn't seem to be any mention of it.
Using Google Chrome's html editor, I can remove the field-privacy-selector by simply commenting out the code (ie. <!-- -->as shown in the image below.
You won't find it because it was dynamically created by PHP/JavaScript code. SE (and most websites?) structure/html are created dynamically by back-end server code (such as PHP, Python, Java,...). Many PHP codes and Javascript codes in various files created the html codes you are seeing. You won't find it in any single file, because it doesn't exist until it's created by the back-end codes. To change the appearance of a website, it helps to know about CSS (styling the website) and JavaScript (any interactive action).
For example, search for "profile.tpl" file. When you open it up, you will see the PHP and JavaScript that created your Edit My Profile > Personal Info page. To me, it looks nothing like html. If you are technically proficient, then you can add html in there and record the change. Make a copy of the original file first.
As we don't recommend editing the default files, it would be best to stick with the CSS edits mentioned. Editing the default files can cause issues with the site and with upgrades. We also do not support customizations so you would need to revert the changes to the default files before seeking support. However, you are free to decide to edit those files if you choose to.
Thank you both for the help!
instead of editing the theme.css you can add an INCLUDE statement in at the bottom of CSS file, If an upgrade is done, you only have to add this line in the theme.css file again. Best practice is: create a file custom.css in the cloned theme folder.
Change the 'path' to your right folder on your server where the custom.css is located
@include "/path/path/path/path/theme/custom.css";