Magento – How to change h1 font size on homepage

cssfonts

I want to change the font size of my h1 tag on the homepage. I am using Chrome inspect and it tells me the css changes are actually inside the page itself, not css. So I look at source code:

/* Theme Fonts Settings */                       

        .page-title h1,
        .page-title h2,
        .page-print h1
         {font-family: 'Open Sans';} 


        .page-title h1,
        .page-title h2,
        .page-print h1
        {  color: FFFFFF;}

I want to make it large by adding a font-size command.

How do I access this via FTP to edit it? I been looking at through all /app/design/frontend/npdiploma/default/layout/ files and /template/ files and can't find anything related to this.

Normally I just edit media/css_secure/ files but this seems embedded into the actual page.

Best Answer

James, your question is too generic and does not apply to Magento directly. You are probably using a 3rd-party theme which is hard to support in a forum like this. That said, I can tell you what Magento developers typically do to track down this kind of information.

How do I locate inline CSS in Magento?

If the CSS is truly inline somewhere, it's probably in any of 3 places:

  1. Layout XML [ reference ]
    • app/design/frontend/[package]/[theme]/layout
  2. Templates (PHTML)
    • app/design/frontend/[package]/[theme]/template
  3. System Configuration
    • System > Configuration > General > Design > HTML Head > Miscellaneous HTML
    • System > Configuration > General > Design > Footer > Miscellaneous HTML

Searching the code base

To find your code for #1 or 2, use a tool like grep (Unix) or findstr (Windows), searching over an entire folder. Here's an example for Unix systems:

grep -rn 'Theme Fonts Settings' /path/to/app/design/frontend/

And if it's in either an XML or PHTML file, this command would find it.

Alternatively, you can use an IDE/code editor tool to search for the string. Seeing that you are working over FTP, you're probably a Windows user and FTP is your deployment process, if not also your means for editing code live. If that's the case, you might not even have access to the commands I'm describing. In that case, you may have to resort to manual labor to verify files based on guesses.

Searching the database

In #3 above I gave you the 2 most common areas to check. It is also possible to search the database for placement of inline CSS in common areas. You can search the whole system configuration table on the database with a query; eg:

select * from core_config_data where value like '%Theme Fonts Settings%' \G;

Often, 3rd-party themes will use system configuration to stuff in a bunch of settings. It may be in there.

If that turns up no answers, try the static blocks table; eg:

select * from cms_block where content like '%Theme Fonts Settings%' \G;

Occasionally a theme might have specific blocks installed to serve content.

Related Topic