The Image in my P2 Theme does not align with text

  • briefgram · Member ·

    1. When I post an image, even if I justify it, it does not align with the text and it looks shoddy.

    2. Is there a way I can shift the social icons to the right?

    The blog I need help with is: (visible only to logged in users)

  • dcoleonline · Staff ·

    Hi there,

    1. When I post an image, even if I justify it, it does not align with the text and it looks shoddy.

    The theme is designed to limit images to a maximum width of 776 pixels, but it allows the paragraphs to be a bit wider.

    Changing this behavior would require Custom CSS which becomes available when upgrading the site to WordPress.com Business or Premium. If you decide to upgrade, you can visit My Site > Customize > CSS and enter 808px in the Media Width field.

    Then, enter this into the larger CSS box:

    /* Set Images In Posts to 808px */

.entry-content img {
	width: 808px;
}

    2. Is there a way I can shift the social icons to the right?

    This would require the following CSS:

    /* Align icons in Social Media Widget to the right */

.widget_wpcom_social_media_icons_widget {
    text-align: right;
}

    Alternatively, you could add your own icons in a text widget:

    https://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

    There are some examples here linked from that guide here:

    https://socialmediawidgets.wordpress.com/

    If you decide to use one of those examples, you could set the alignment of the icons from within the text widget itself.

    To do that, you will need to add some inline CSS to the HTML div tag. You don’t need an upgrade for inline CSS.

    Here’s one of the examples from the page above:

    <div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>

    Now I’ll add this to the div:

    style="text-align: right;"

    Here is the result:

    <div style="text-align: right;">
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>

    If you paste that exact code into a Text Widget, you’ll see the icons aligned to the right. Keep in mind that this is only an example, so you’ll want to load your own images from your site’s media library, and also change the part in quotes after the href to link to your social network profiles.

  • briefgram · Member ·

    Thanks, just some clarification:-

    (i) I am moving my site to self-hosted version, do I still need to upgrade anything to enhance the size of the image?

    (ii) And is there a way I can have the images touching the edges of the frame as is the case in Axios.com…check the way the images are there and confirm please?

    (iii) What if I want to change the colour of sticky post to a different colour other than the present yellowish one? Is it possible and how do i go about it?

    (iii) The header image loads into half using the ones offered by the them when the site is on Tablet or Mobile, how do I get it to load across the browser?

    (iv) If I want a sticky Header and sidebar, is it possible and how do I go about it?

    (v) Can I move the sidebar to the Left? And say have it change depending on the category or User?

    (vi) Does it mean my users and authors have to be WordPress Users, is there a way I can allow for facebook and Twitter sign-in?

    (vii) Finally, there is a blue ribbon on my top of my homepage, Is it possible to change the wording on it? And can I make the “keyboard shortcuts” and “show comments threads” disappear and set a universal approach for my users?

    And thanks a Million for this wonderful Theme for collaboration and curation, I think the worth of it is under-estimated. P2 has changed my life.

    Thanks

  • dcoleonline · Staff ·

    (i) I am moving my site to self-hosted version, do I still need to upgrade anything to enhance the size of the image?

    No, you won’t need to upgrade as you’ll be able to make CSS changes to your self-hosted site by default. All of your other requests will require CSS, plugins (which you can use on a self-hosted site), or possibly code changes to the theme.

    To get a copy of the theme for your self-hosted site you can download it from the bottom of this guide:
    https://wordpress.com/theme/p2-breathe

    For help with customizing a self-hosted version of the site, you can posts in the WordPress.org general themes forum:

    https://wordpress.org/support/forum/themes-and-templates

    I’d recommend making one post per topic, as it helps to keep the forums organized, and increases the likelihood that volunteers there will reply.

    Tag each of your posts with wpcom-theme in the tags area to be sure it will get attention:

    Forum Themes and Templates WordPress org Forums

    You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:

    https://wordpress.org/support/register.php

    Be sure to provide a link to your site when you post so folks can help you more easily.

    And thanks a Million for this wonderful Theme for collaboration and curation, I think the worth of it is under-estimated. P2 has changed my life.

    Glad to hear it! We use P2 every day. It’s pretty awesome. ;)

  • briefgram · Member ·

    Hey, there is no theme options in the self-hosted version of p2-breathe, and therefore I can’t post from the front end.

  • briefgram · Member ·

    The download for P2-breathe at this link returns error message: https://wordpress.com/theme/p2-breathe: 404 File not found

  • dcoleonline · Staff ·

    The download for P2-breathe at this link returns error message: https://wordpress.com/theme/p2-breathe: 404 File not found

    Thanks for reporting this. I’ve let the developers know.

    You can download it here for now. When the link is fixed on WordPress.com, I’ll update this link to point to the new location.

    Hey, there is no theme options in the self-hosted version of p2-breathe, and therefore I can’t post from the front end.

    The additional functionality comes from the o2 plugin which can be downloaded from GitHub. You should also install the Jetpack plugin as o2 needs some icons that come from Jetpack.

    If you find any bugs with the o2 plugin, you can report issues via the GitHub repository. Issues with the theme can be reported in the WordPress.org general forum I mentioned here.

    Keep in mind that this is an experimental theme and plugin combo for self-hosted sites, so it’s possible that you may run into an issue here or there. However if you find bugs, do report them as that will help our developers make P2 better for everyone.

  • mpmusyimi · Member ·

    Hey, I am running a self-hosted version of P2. I downloaded Jetpack, but when I try to set the sharing buttons, it keeps returning an error, to wit: There was an error retrieving your site settings.
    Make sure your Jetpack is up to date    . How do I solve this?

  • mpmusyimi · Member ·

    My website is Briefgram.com

  • dcoleonline · Staff ·

    Since this forum is for supporting sites hosted on WordPress.com, could you make a post over in the WordPress.org forum?

    https://wordpress.org/support/forum/themes-and-templates

    Tag each of your posts with wpcom-theme in the tags area to be sure it will get attention:

    Forum Themes and Templates WordPress org Forums

    Be sure to include your site address when you post.

  • The topic ‘The Image in my P2 Theme does not align with text’ is closed to new replies.