Need some help with my new look

jcoomonte · Member · Nov 3, 2014 at 3:14 pm
Copy link

Add topic to favorites
Hi all,

I was wondering if there’s any way of having my social share icons back at the begining of each post.

Also I’d like to have the image in the background of each post (once inside) removed and the text centered and occupying the whole page instead of it aligned to the left.

Would it be possible?

Thanks in advance! :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 3, 2014 at 11:09 pm
Copy link
I was wondering if there’s any way of having my social share icons back at the begining of each post.

Where exactly do you want the sharing icons? Above the title, above the metadata, below the metadata? It would be less problematic for site/post variations if it was below the metadata, right above the actual content although it wouldn’t be a problem to put it above the post title. Also, do you want the like button up there as well?

I’d like to have the image in the background of each post (once inside) removed and the text centered and occupying the whole page instead of it aligned to the left.

Give the following a try and see what you think.
```
.single #big_thumbnail {
    background: none;
    height: 120px;
}
.single #main-content {
    width: 87%;
}
```
jcoomonte · Member · Nov 4, 2014 at 12:12 am
Copy link
That’s awesome thesacredpath! Posts look now exactly how I wanted. Just one more thing, could you add to that line of codes any to center the text?

Now, about the social share icons. I’d like them just after the “posted by… leave a comment” line… the reblog and like buttons would be nice to have them right next to these.

Thanks in advance mate! :)
thesacredpath · Member · Nov 4, 2014 at 2:58 am
Copy link
Change the second rule I gave into the following to center the content within the white space.
```
.single #main-content {
    margin-left: auto;
    margin-right: auto;
    width: 55%;
}
```
jcoomonte · Member · Nov 4, 2014 at 10:35 am
Copy link
Cheers again buddy, so all that’s left now is the code for the social icons, you came up with it by any chance?… I wanted them to be just below the “posted by… leave a comment” line.

Thanks in advance! :)
thesacredpath · Member · Nov 4, 2014 at 6:27 pm
Copy link
On moving the like and reblog button, when you get a like, the gravatar of the person who liked it shows below the like button. If you get a lot of likes, then it becomes multiple rows of gravatars. Since we have to use position: absolute; to move the sharing stuff to the top of the post, they lose their relationships with the other page elements and basically float above them, so the content of the post will not automatically move down as new rows of likes appear. This means that the gravatars from the likes can overlap on the top of your content making it difficult, or perhaps impossible to read. In addition, having the like and reblog at the top causes issues when you narrow the browser window or view things on a phone or small tablet.

This will move the sharing buttons to the top of the content.
```
.main-content {
    position: relative;
    padding-top: 120px;
}
#jp-post-flair .sharedaddy.sd-sharing-enabled {
    position: absolute;
    top: 0;
}
```
jcoomonte · Member · Nov 4, 2014 at 6:34 pm
Copy link
Never mind then, we’ll keep those two icons below the text then. Thanks again thesacredpath will try it out as soon as I get home :)
jcoomonte · Member · Nov 4, 2014 at 8:52 pm
Copy link
Cheers buddy, worked like a charm :) if I ever have a doubt I’ll know where to go!

Greetings.
thesacredpath · Member · Nov 5, 2014 at 1:05 am
Copy link
You are welcome, and your site is looking awesome!
jcoomonte · Member · Nov 5, 2014 at 6:05 pm
Copy link
We’re almost done here… I got a question: is there by any chance the possibility to change the width of the posts text for the tablet and PC versions separately?. e.g. width 50% for PC and 90% for tablet.

Hope so, thanks in advance! :)

Greetings.
thesacredpath · Member · Nov 5, 2014 at 11:56 pm
Copy link
You could use two media queries which allow you to control styling based on widths, among other things. The following two media queries target single post pages as we had done earlier. You can remove the other one with the .single #main-content selector.
```
@media screen and (min-width: 1025px) {
	.single #main-content {
		width: 50%;
	}
}

@media screen and (max-width: 1024px) {
	.single #main-content {
		width: 90%;
	}
}
```

No items found.