Hey, WordPress web developer :)

Check out WPMU DEV

New to the community? Start here

Reader Look and Feel

Hi,

I need someone to help me with the CSS to get a look and feel, like the one Edublogs has with its reader plugin. It includes pictures, and has much nicer look.

Thanks

Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,175 pts: Hero points 24,495 pts: Rep. points LEVEL 30
Hi Prueba,

Hope you're doing well.

I'm afraid that the Edublogs reader is a customized to adjust the needs for that site and there's no code we could share to apply on your own site.

I have poked around a bit and here's some CSS that will help you started with that and you can adjust it further for your needs:
```
/* Title */
#poststuff .msreader-post .msreader-post-content h2 {
    font-size: 15px;
}

/* Content */
#poststuff .msreader-post .msreader-post-content .msreader-post-excerpt p {
    font-size: 13px;
    font-family: Helvetica;
}

/* Hide avatar and set meta in one row */
#poststuff .msreader-post-meta .inside > img {
    display: none;
}

#poststuff .msreader-post-meta .inside .vertical-middle > a:first-of-type:after {
    content: "in";
    margin-left: 3px;
    display: inline-block;
    color: #000;
}

#poststuff .msreader-post-meta .inside .vertical-middle > br {
	display: none;
}
```
To add this code you can use our Ultimate Branding plugin and its Admin CSS module.

What I noticed during the testing is that the image is not being called and it looks like this is a bug within Reader plugin so I have reported it to our developers to check it out.

Best regards,
Predrag
Prueba
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 3 pts: Hero points 13 pts: Rep. points LEVEL 1
Thanks so much! Do you have a list of all the name ids of the sections of the reader plugin, to start changing that via CSS?
Predrag Dubajic
- Support: Earn your WPMU DEV membership
- 3,175 pts: Hero points 24,495 pts: Rep. points LEVEL 30
Hi Prueba,

I'm afraid that we don't have such list but you can easily find this by checking the HTML structure of the page with browser inspector.
Right click on any element in Reader and select Inspect, this will open up the dev tools and from there you can find the class/ID you need for that element:

Best regards,
Predrag
Prueba
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 3 pts: Hero points 13 pts: Rep. points LEVEL 1
Thanks so much!!
Prueba
- WPMU DEV Initiate: Earn your WPMU DEV membership
- 3 pts: Hero points 13 pts: Rep. points LEVEL 1
resolved

Live Chat

Hi, I’m available right now to answer any of your questions :)

Email Us Find out more