Using WP web scraper with WordPress

I’m trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site

https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice

Read More

I used this code snippet

<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>

Then I used custom CSS in the themes stylesheet editor

.btn.blue,
div .btn.blue {
    font-size: 16px;
    padding: 8px 16px;
}

/*** Stars ***/
.sprite-icons.star-blue-outline {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.star-blue-fill {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.star-blue-half {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
    width: 19px;
    height: 17px;
}

.sprite-icons.caret-white {
    background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
    width: 10px;
    height: 14px;
}

I’ve got a problem with my CSS in that the button “wraps”.

Tried to just get the star rating targeting the class “raty-rating-wrapper-readonly” part but then I get a whole load of vertical stars.

i.e. if i use

[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]

Screenshot

I get a whole vertical list of 5 * images?

If I use image-middle div like this

[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]

I get a weird wrap on the button.

enter image description here

Can’t figure this out, and have to admit I’m not a CSS guru. Any insight would be gratefully received.

Related posts

1 comment

  1. I’ve got a problem with my CSS in that the button “wraps”

    The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content

    The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.

    Can’t figure this out, and have to admit I’m not a CSS guru. Any
    insight would be gratefully received.

    Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.

    Unwrapped button:

    enter image description here

Comments are closed.