Editing HTML of specific pages

    • 25 posts
    July 13, 2018 3:49 PM EDT

    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!

    • Moderator
    • 6923 posts
    July 13, 2018 4:38 PM EDT

    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.

     

    • 25 posts
    July 14, 2018 4:54 PM EDT

    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!


    This post was edited by Country at July 14, 2018 4:58 PM EDT
    • Moderator
    • 6923 posts
    July 14, 2018 8:04 PM EDT

    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. 

    • 18 posts
    July 15, 2018 12:33 AM EDT

    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.

    • Moderator
    • 6923 posts
    July 15, 2018 5:31 AM EDT

    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.


    This post was edited by socialenginestaff at July 15, 2018 5:31 AM EDT
    • 25 posts
    July 15, 2018 5:56 AM EDT

    Thank you both for the help!

    • 119 posts
    July 26, 2018 10:11 AM EDT

    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";