Custom CSS to Change Wordpress Blog Post Look

[alex_tsui]

Hi everyone,

I would like to customize the look of my Wordpress blog posts that's integrated with Magento version 1.9.2.1. The integration is done using the add-on from Fishpig.co.uk. I am quite familiar with Wordpress themes and CSS but I am new to Magento.

My blog is here: sharpersafety.com/blog
I understand that Wordpress CSS is handled differently when it's integrated with Magento.

Here's what I want to change:

• Make the featured image to display full-width on the post page. Right now it's just a small thumbnail at the side.
• Change the post title to a bigger font.
• Customize the fonts of the sub-headings and paragraph text.
• Increase the paragraph text line spacing.

Could you please kindly give me some detailed steps on how to accomplish the above without messing up the CSS of the other store pages?

Thanks and regards,

Alex

[speerio]

Hello Alex_tsui,

It's possible to change the styles. Just make your own styles in the stylesheet in Magento. For example the heading now has H2 and that is for the font size 18px. Give it the style H8 and add this style to the stylesheet with another font size. Do the same for the other styles you want to change. The image is only 150x150 px, just put in a bigger image (full width)  in your wordpress and it wil be full width.

[alex_tsui]

Hi,

Thanks for your quick reply. Is the Wordpress blog sharing the same CSS as the entire Magento site?

If I were to update the style for H2, I am afraid it will change all the H2 for the entire site. I just want to change the styles for the Wordpress blog post pages without affecting any other part of the site.

I have tried to change the styles through the Custom CSS section in the Wordpress admin but somehow it doesn't work. I think the integration to Magento has disabled the Wordpress admin.

One idea is to write some custom CSS classes that are targeting only the related parts in the blog post and then add them to the existing CSS stylesheet. However, I have no idea how to do that exactly. I would need some code examples from those who are experienced here.

Thanks.

[speerio]

alex_tsui,

Do not change the H2 style in your stylesheet. Just add the H8 in the stylesheet  and then before your blog page title change H2 to H8.

This is from the fishpig site:

CSS

The extension comes with a basic stylesheet that can be found at:

/skin/frontend/base/default/css/wordpress/styles.css

To modify this file you must first copy it to your custom theme's skin directory. If you do this, it is recommended that you copy /skin/frontend/base/default/css/wordpress/ to your custom theme rather than just the CSS file so that the images in this folder are still referenced correctly by the CSS file.