WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Post Background Colour (9 posts)

  1. johnupatree
    Member
    Posted 1 year ago #

    I know I can change the content background colour in Theme Options>Design, however I keen to learn how to do these changes in CSS.
    When I do this and look in style.css I cannot see it, am I looking in the wrong place?

    Secondly, I would like to add a border round the individual posts. Were in the style.css should I be looking, indeed, should I be looking in style.css at all?

    site is at johnpsmyth.co.uk

    Thanks in advance

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The best way to work with CSS is by using a browser tool such as Firebug or Chrome Developer Tools. They'll show you the CSS that is setting the styles for any specific element or area of a page. Then you can use that information to add or change styles in your CSS. So for example, the borders on posts - Firebug shows this CSS:

    .entry-container {
        margin: 0;
        padding: 2.9%;
    }

    So you copy the selector to the child CSS and add the border:

    .entry-container {
        border: 2px solid black;
    }

    BTW, your child theme does not look typical - it should only have changes to your CSS, not the entire style.css of the parent. Your file structure looks atypical as well, so perhaps review:

    http://codex.wordpress.org/Child_Themes

  3. johnupatree
    Member
    Posted 1 year ago #

    Superb.

    Thank you, will spend some time having a play!

    Have installed Firebug and can see what you mean.

    Looked at the link and the child theme now makes more sense, I, as you probably guessed, simply copied the parent theme and modified it. I am a newbie, so hey, we all make mistakes ;-)

    Many thanks for your time and excellent reply. Most helpful.

    John

  4. johnupatree
    Member
    Posted 1 year ago #

    WPyogi,

    Just a follow up regarding your reply.

    I fully understand your comment regarding the child them, I now know how to create a child theme correctly. The issue I have now is what is the best way to do this? Do I have to start from scratch or is there an easy way to extract from my modified parent CSS the changes I have made?
    Starting from scratch would be a bit of a pain, but hey, it's a learning experience!

    Picking up on your other comment regarding my file structure looking atypical, would you mind expanding on this, as I am not quite sure what you mean?

    Many thanks, yet again.

    John

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Get hold of the theme's original style.css file and compare it against your modified style.css file using a relevant tool.

    Then transfer all mismatches into your Child Theme style.css file.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This link shows that you have an extra directory (or entire theme?) inside the child theme folder:

    http://johnpsmyth.co.uk/wordpressblog/wp-content/themes/PinBoard-Child/pinboard/style.css'

    It should look like this:

    http://johnpsmyth.co.uk/wordpressblog/wp-content/themes/PinBoard-Child/style.css'
  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    There are file comparison tools - so that would be useful in dealing with CSS changes you have made.

  8. johnupatree
    Member
    Posted 1 year ago #

    Thank you all.

    Had a good play with Firebug now, really useful, can see I will be using this a lot.

    Will look at my file structure again now I know what the correct structure should be, one of those simple things that you only know when you know it!

    Diff checker will be a real help too, couldn't for the life of me think how to do it otherwise.

    Many thanks, once again for all the help, advice and guidance.

    John

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sure, glad to help - and now you are (or soon will be) on a much better track with that Child Theme :). Firebug is indeed a very cool thing - not just for your own site, but you can easily look at the code of any other site you might happen to like.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.