Classifieds - Replace Header with Custom Graphic

Hi : How to : Replace Classifieds Header with Custom Graphic?
See image here: http://screencast.com/t/hdFtlkRpc93

Please advise...

  • Adam Czajczyk

    Hello VirtualArtist,

    I hope you're well today and thank you for your question!

    The "Classifieds" header on the site is a page/post title. You can replace it with an image of your choice with an additional CSS:

    .post-type-archive-classifieds .entry-title {
    	color:transparent;
    	background:url('FULL_URL_TO_LOGO_IMAGE') top left no-repeat;
    }

    To apply it to your site please

    - replace the FULL_URL_TO_LOGO_IMAGE with an actual URL of your logo
    - add this code to the style.css file of your child theme (if you are using a child theme) or using the "Simple Custom CSS" plugin:

    https://wordpress.org/plugins/simple-custom-css/

    I hope that helps!

    Best regards,
    Adam

  • VirtualArtists

    hi Sir: Your code works great :slight_smile: Is this type of code the same for any WPMU Plugin Header? We have other WPMU Plugins that need UI improvement starting with the Headers. Our goal is to brand each plugin with our custom UI improvements, to provide a consistent branded look for different client sites. Are most visual areas of WPMU Plugins accessible to modify for custom UI branding?

    For Example - how could we apply the same code onto:
    Membership2 - Account page at URL: /account

    Great Support
    Please Advise...

  • Predrag Dubajic

    Hi VirtualArtists,

    This change would not be same for each page, it will depend on the class you can grab on.
    For example, classifieds has post-type-archive-classifieds class you can use but that is not the case with the account page.

    So in this case we can inspect the page and check page ID which we can use, for example this page has ID 19:

    So we can now use that class in order to apply the change to that page, the code will look like this:

    .page-id-19 .entry-title {
    	color:transparent;
    	background:url('FULL_URL_TO_LOGO_IMAGE') top left no-repeat;
    }

    Hope this helps :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.