• Hello,

    I am working on this site and I am trying to find the file that is associated with updated the padding on the header of the site. Only found one description that I thought would be a match, but I suspect that I may need to update two files in order to fix the padding along the banner to make the design sync with the theme better. But I am no entirely sure.

    please help! thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 1.View the website from the frontend
    2. Right-click, inspect element (i know for sure works with safari and google chrome browswers)
    3. Make sure what you are trying to inspect is highlighting by hovering over the element or the selected source code in the inspection pane. To know for sure what is selected will look as if you clicked and dragged to highlighted, but any padding will highlight green and any margin will highlight peach. You can always right click and inspect element again while the pane is open to make sure you are selecting the right part
    4. Look at the bottom panel in the “styles” tab and find the padding/margin value of your element. To the right side it’ll say something like “style.css:5387”
    5. Right click that and select copy link. the link (something like https://www.yourwebsite.com/wp-content/themes/yourtheme/css/style.css) is where it’s pulling the css from. the number (5387 in “style.css:5387”) is the line in which makes this style output…the line is usually a ballpark range because it all depends on the width/word wrap of the viewing of the document if it actually falls on that line.
    6. Open the URL you just copied, edit the area and save over it. Cross reference you’re editing the right element because in the inspector pane, it will also say the element ID/Class that’s making these styling outputs (“#theme-header” “.container, #wrapper” or “#div.container.site.wp-wrapper” for example)
    7. If you visit your dashboard and hover over “appearances” > select “editor” you should be able to find the css file that you copied from step 5 and edit it from the dashboard directly

    DISCLAIMER: 9 times out of 10 your theme has *somewhere* in the theme options to add custom css code. try looking for that and it usually overrides and appends the .css file. If it doesn’t override then use the !important tag. This is a better option so you dont accidentally break your css file if you mess up the code as well as keeps things intact if you use a child theme and update your regular theme, you won’t loose the changes you make in the update.

    Also, you can edit values in the inspector pane’s style panel. This still update in your browser. This is a way to test that you are editing the right thing and when you edit the styling figures, it shows how you want it to show. It will go away when you refresh the page

    Thread Starter zhorrabrujerra

    (@zhorrabrujerra)

    Hi everyone, thank you.

    I know how to look up the code in Inspect, the problem that I am having is that that file that I am selecting is not updating the site.

    style.min.css is the only file I have found that has .inside-header, but even when I change the padding on that file, it does not update the header

    OK, so you should be aware that you should not make changes to any theme files, because the next time you update the theme, your changes will be lost. What you should do is add your own overriding CSS using WordPress’ custom CSS option (Appearance → Customize → Additional CSS).

    Try adding this rule:

    
    .inside-header {
       padding: 10px;
    }
    

    If that doesn’t work, then you need to make the selector a little more specific, like this:

    
    #masthead .inside-header {
       padding: 10px;
    }
    

    But you want to use the least specificity as necessary to get the job done.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can’t find CSS file or code to update header padding’ is closed to new replies.