Post view count text/nb alignment

Support
#1

This is a test for plugin that shows count views.
https://tarekrabaa.com/ar/?p=102
My question how can i move the count number to the left of the page?
I use this custom CSS to move the number to the right of the word مشاههدة
.post-views-label {
margin-left: -63px;

But i am not able to move the whole “text + count” to the right of the page.

Would you please help.

Regards

#2

Hello There,

Thanks for writing in! Actually the post views is already on the right of the content area. It’s just that the given url has an empty sidebar.

Please add your sidebar widgets in Appearance > Widgets to make it visible when you revisit the url.

Hope this helps. Kindly let us know.

#3

Hi,
I didn’t get your point.
I am using full width post. How can i move the counter to the left of the post,
The counter has only short code i added to the end of the text in post editor.

#4

Hello There,

It must be ca page cache or something. I am seeing a fullwidth page now.
To resolve the issue, please remove this code first:

.post-views-label {
    margin-left: -63px;
}

and replace it with this:

.post-views span.post-views-count {
    float: right;
    margin-left: 10px;
}

If you need anything else, please let us know.

1 Like
#5

Excellent.
It works.

Can i align the icon [x_icon type=“eye”] and to place it to the right of the number. In other words, to have the eye first then the number of views.
Also i would like to change the color of the post views to red.

thx

#6

Hey There,

Is the post views using a shortcode also? If that is the case, please have it like this:

<div class"custom-views">
  <span class="right">[x_icon type="eye"] </span>
  <span class="right">[views] </span>
</div>

I am not so sure if that is the correct shortcode for views.

And to change the post views color to red, please us this code:

.post-views {
    color: red;
}

And if you want to include the eye icon, you may update the shortcode into this:
[x_icon type="eye" style="color: red;"]

Hope this helps. Please let us know how it goes.

1 Like
#7

It works as i want. I used this code:
<div class="custom-views"><span class="right">[x_icon type="eye" style="color:blue" "font-szie:20px";] </span> <span class="right">[post-views] </span></div>

However, I still need to have:

  1. some space between the eye icon and the number.
  2. how can i increase the size of eye icon?

thx

#8

Hi there,

Kindly add the code below after the previous suggested code:

.custom-views i {
    margin: -3px 0 12px 10px;
    font-size: 20px;
    line-height: 1.5;
    vertical-align: top;
    display: inline-block;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

1 Like
#9

excellent. It works as i want.
thx

#10

You’re welcome :slight_smile:

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.