How can I alter the styling of the dates, author, category in the Swell blog?

  • Unknown's avatar
    laurapalmerwp · Member ·

    Also, alignment of those items? I’d like them aligned left

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

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi!

    Can you let me know a bit more about what styling you would like to change? You can target them with the .meta class.

    Also, alignment of those items? I’d like them aligned left

    Just to make sure I understand correctly, you would like all of this information moved all the way to the left side of the page:

    http://d.pr/i/1kBBW

    Is that correct?

  • Unknown's avatar
    laurapalmerwp · Member ·

    I’d like the main content area to be left aligned as all other pages are, save the Home and Showcase. For example What we do and Contact Us pages start from a certain margin from the left. I’d like the Blog to match those pages.

    I’m not sure what you mean by targetting them with the meta class? As I said before, I’m not a programmer! However, if you look at my current Blog, you’ll see at the top, the category ‘Inspiration,’ then under that the date and my name being the author. There are also the page titles i.e ‘Cabinetry’ further down, as well as main text such as ‘Here is a piece of news for your interest.’ I have done a bit of style/alignment tweaking since emailing support – using the inspect element – with varying degrees of success. But I’d just like them left aligned to where the margin where the images are left aligned to.

    I’d also like to add a background image to the blog page if that’s possible (not on any other page)? Especially if I can’t have a header image at the top? Or can I?

  • Unknown's avatar
    jeremeylduvall · Member ·

    I’d like the main content area to be left aligned as all other pages are, save the Home and Showcase. For example What we do and Contact Us pages start from a certain margin from the left. I’d like the Blog to match those pages.

    The theme should do this by default. It looks like the following bit of CSS that you’re using is throwing the alignment off:

    header {
	text-align: left;
}

    Here’s how the theme looks without that bit:

    http://d.pr/i/19kCc

    Here’s an example of how it should look by default:

    http://swelldemo.wordpress.com/journal/

    I’m not sure what you mean by targetting them with the meta class?

    The “meta class” just refers to the way you can identify and target the author byline and post date. If you would like to learn a bit more, we have some awesome resources here:

    An Intro to CSS, or How to Make Things Look Like You Like

    An Intro to CSS: Finding CSS Selectors

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    The page about CSS selectors is really helpful!

    But I’d just like them left aligned to where the margin where the images are left aligned to.

    Thanks for clarifying! I believe I’m understanding correctly. You would like all of the content aligned to the left-hand side of the image like this:

    http://d.pr/i/1eaI4

    Is that correct?

    If so, I’m not sure this is the best idea. It would require quite a few CSS changes to overhaul the default layout here, and it would more than likely cause some issues with the mobile appearance of a theme. Perhaps it would be easier to choose a similar theme that offers this by default? For example, Port has a similar look and feel:

    http://portthemedemo.wordpress.com/

    I’d also like to add a background image to the blog page if that’s possible (not on any other page)?

    The best way to do this would be through the steps here:

    http://en.support.wordpress.com/themes/custom-backgrounds/

    Especially if I can’t have a header image at the top?

    Swell does not offer the Custom Header Image feature.

  • Unknown's avatar
    laurapalmerwp · Member ·

    I’ve removed the left alignment on the header and it works better.

    Would it really screw things up to have all text aligned left with the images? I did look at Port but Swell is far better in terms of fitting my design as a rule. Is there no way round this – without ruining it on a mobile?

    Through my tamperings I have made the blog text left align without a margin on the home page. Any ideas how to fix that?!

  • Unknown's avatar
    shawnajroberts · Member ·

    Through my tamperings I have made the blog text left align without a margin on the home page. Any ideas how to fix that?!

    That’s being caused by this piece of code:

    body, #blog .posts .post * {
	color: #ffffff;
	text-align: left;
}

    You can either (A) remove the “text-align: left;” line or (B) add a left margin by adding code like this to the above section of your code:

    left: 10px;

    or by adding this new section to your CSS code:

    #posts-scroll div a {
	left: 30px;
}

    Would it really screw things up to have all text aligned left with the images?

    Does the above code fix this? Or did you mean something different?

  • Unknown's avatar
    laurapalmerwp · Member ·

    Hi, replying from my email so hope you get this.

    Thanks for the alignment tips. Will try them tomorrow.

    The last comment was in reference to one of the support team saying to left align the author, date etc on the blog page itself – it would need a lot of changes in the CSS and maybe cause problems with the mobile platform. I just wanted to double check this as other pages with this theme are left aligned (what we do and contact us) so can see it’s been done. Any thoughts?!

    Sent from my iPhone

  • Unknown's avatar
    shawnajroberts · Member ·

    Thanks for the explanation! Sorry I missed that when I read through the ticket. :)

    I just did a little testing and it is possible. I’ve added a few screenshots below of what it would look like on a desktop, tablet, and phone.

    Does that look like what you want?

  • Unknown's avatar
    laurapalmerwp · Member ·

    Hi many thanks for persevering! I probably confused you as no – that’s not quite what I wanted! I just meant to left align those text elements under the image – rather than on top of the images. There’s an indent right now, I’d like to get rid of you see.

    I’ve also just tried realigning the blog entries on the Home page and the code:

    #posts-scroll div a {
    left: 30px;
    }
    works the best. Ideally I wanted them to align left the same margin from the left as the main copy above (‘We’re a heavenly yet down to earth..’) but when I did this using the first code you gave me, the blog titles were too far over to the right (cropped) on my iPhone. So, I guess this is the best compromise..?!

  • Unknown's avatar
    shawnajroberts · Member ·

    Okay. I understand now. That’s definitely the most simple compromise.

    Those two sections of the page are set up differently, so its difficult to get the alignment to match at every window size. I was tinkering around a bit and the other solutions I came up with are much more complicated code-wise and aren’t significantly closer to the alignment you’re looking for than the code you’re currently using.

    Let me know if I can help further!

  • Unknown's avatar
    laurapalmerwp · Member ·

    Ok, thanks for helping anyway. Much appreciated.

  • Unknown's avatar
    shawnajroberts · Member ·

    Sorry we couldn’t get this working exactly how you want. Let me know if there’s anything else I can help with though.

  • The topic ‘How can I alter the styling of the dates, author, category in the Swell blog?’ is closed to new replies.