CSS help for Pilcrow theme

  • Author
    Posts
  • #743630

    gazalla
    Member

    I just bought the CSS upgrade and am trying to make a few adjustments:
    I’d like the tagline which is currently at the bottom of the page, below the title
    For some reason, I have a lot of white space on either side of my content, I would like to either get rid of some of it or color this space black.
    Thanks a lot. Hope to hear a solution soon.

    The blog I need help with is webcontentblog.com.

    #743795

    Pilcrow has a maximum width (it is semi-flexible) of 770px. If a browser window is wider than that then there is going to be blank space to the left and right of the stuff in the main wrapper. That is pretty much true with any theme unless it is a “true” flexible width theme. The following does what I think you want. I’ve used a dark charcoal grey for the background color instead of black since I find black for a background, when the content area is white too contrasty. If you want to try black, change the 333333 to 000000 in “body”.

    body {
    background-color: #333333;
    }
    
    #container {
    background-color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
    }
    #743801

    To pick up and move the tagline, replace the #container section I had given you with the new #container section below and add the other stuff. This is a starting point till you have a chance to look at things and let me know what other changes or styling you want to do to the tagline.

    #container {
    background-color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    }
    
    #site-info {
    color: #000000;
    left: 18px;
    position: absolute;
    top: 50px;
    width: 75% !important;
    }
    
    #site-info a {
    display: none;
    }
    #743811

    gazalla
    Member

    Thank you sooo much for your help – it’s really made a difference!

    I’ve changed the width to 900px – I think that should be fine for most browsers to handle? If not, there is way too much blank space.

    #743819

    You are welcome.

    #743846

    gazalla
    Member

    I’m also trying to change the color of the boxes/tables of the Recent Posts, Categories, Archives and Meta data in the sidebar on the right that are currently grey. I tried all the different options but am not able to figure out which class they belongs to? Please help.

    #743854

    It is here. Just edit the hex color code as desired.

    .widget ul {
    background: #F5F5F5;
    }
    #743876

    gazalla
    Member

    Thanks, that worked out very well.
    There are just 2 more things I need help with: One is to add the Facebook like button and share button at the top of each post and the other is to add all the share this: Facebook, Twitter, Linked-in, email icons that come at the bottom of every page, as a table to the left of the #container tag(in the blank space on the left). Is this possible?

    #743879

    For adding sharing buttons, see this support document.

    You can have Facebook like & share buttons on your posts. Take a look at this forum thread.

    https://en.forums.wordpress.com/topic/its-possible-facebook-share-and-like-buttonsat-the-same-time?replies=90

    #743889

    gazalla
    Member

    Thanks again. I tried playing around with the social media buttons and have got them to align on the top and side of the first post.
    Is there any way to vertically align them so that they are like a floating vertical bar on the side of the content? That would almost look like the floating social media bar at mashable.com

The topic ‘CSS help for Pilcrow theme’ is closed to new replies.