Need help? Check out our Support site, then


Several questions about customizing Watson theme

  1. I posted this in the Watson theme support forum and they told me to repost it here. Thanks for any help that can be provided!

    I just purchased the Watson theme a few days ago and have some questions on customizing it further. I also purchased the CSS upgrade so I am able to customize it that way. I am a total novice when it comes to coding so I need a lot of help!

    I have full width enabled because the default size scrunched up the posts too much, especially on long articles that led to a lot of scrolling. My previous theme was Imbalance 2 and I didn't have these problems. The Watson theme looks great on mobile but on desktops it has some kinks.

    Pictures are way too small in all posts (for example, like this article.) Even when I do a new draft for a new article, it automatically shrinks the image. For example, if I insert a picture into a post at full size, it automatically resizes it in the post to width=492 height=276 (which appears to be the size of the column in default width length on Watson). I need pictures in the articles much larger than that. On my previous theme before switching to Watson they were more prominent, but switching to Watson shrank all the images. How do I change this?

    YouTube videos are too large in the posts, taking up a lot of space. For example in this post you can see how big the YT video appears. Before when doing a post, I would just post the YouTube URL with the [youtube=....] code. How do I scale the size back in Watson?

    At least on full width, there's a big problem with quotes. It was fine on Imbalance 2, but it looks like a mess on Watson. On this post for example, it's basically broken and looks pretty terrible on posts on my site. The quotes break up the flow of paragraphs, like indenting next to sentences when the sentences were originally directly beneath the box quote. On this page, you can see how the block quotes indenting makes it impossible to even read the article. What is causing this, and how do you fix it? Is it going to be like this for future posts I publish as well using full width? On the default page width, the quotes look fine.

    Having full width enabled also messes up the indentation of pictures (that were either all the way to the left or right), as you can see in the above post, which leaves a big white blank space where the image should have been. Is this because of the way I originally positioned the photo in the text while using the other theme? Is it possible to fix this on Watson?

    I noticed that in paragraphs, instead of just moving the full word to the next line, Watson puts a hyphen mark, therefore stretching the word to two lines. This is incredibly annoying on desktops (doesn't seem to happen on mobile) and is distracting when reading articles. Is this possible to change at all? I haven't noticed this on other WordPress themes.

    Is it possible to put the footer widgets only on all individual posts rather than the home page/pages too? It seems you can only disable them for the entire site by not having them at all, rather than on certain sections of the website. The footer widgets I want to use are things like recent posts, full list of social media icons and a Twitter feed, since I get a lot of traffic from search engines more than directly from the home page. Having those footer widgets on all individual posts would help my site but are redundant to also have on the home page. On full width the footer doesn't even appear in any individual posts.

    How do you make the more pages link at the bottom of each post bigger and more prominent? Right now it's very difficult for readers to see that a post has more pages because of its size and color, so they might just assume the article is done. How do I change both?

    I know the Watson theme allows you to hide author on all posts, but is it possible to code it so it only hides it on certain types of posts rather than every single one? For example, hiding the author on certain categories of the "Opinion" menu I have on my site?

    Can you move the post category in individual posts from the bottom of the page where the tags are, to the top where the author and date are listed?

    Sorry for asking so many questions. Thanks for any assistance!

    The blog I need help with is quarterdisorder.com.

  2. You've asked a TON of questions in this post, and essentially, it all adds up to custom design work. One option you might consider is hiring a designer to help you. Here is a form you can fill out if you are interested in that:
    http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    This forum is for help learning how the WordPress.com design tools work—and for learning CSS. It is managed both by staff as well as volunteers, but custom design work in large proportions is a bit outside the scope of this forum! You can still probably get help here, but I'm going to ask that if you want to continue here that you post the questions one at a time instead of in a really large chunk like your current post!

    It also appears you've lost some of your formatting and links from before :( that might have happened if you copy and pasted something you wrote previously. This is another reason to start again, except make sure to include the links (maybe at the bottom of the question) starting with http://

    I will start by answering the first question about image size, and then you can decide how you want to proceed from there.

    Pictures are way too small in all posts (for example, like this article.)

    I can't see a link in your text above (it might have gotten lost in a copy/paste!), but I looked at quarterdisorder.com and I see that your latest post has pictures in it:
    http://quarterdisorder.com/2013/06/15/sony-outplays-the-competition-at-e3-2013/

    I reviewed your custom CSS, and I see that you figured out how to expand the width of the post container by setting the width for ".entry p" to "max-width: 100%" which worked to make the images expand as well.

    Does that solve the image size issue for you since they are no longer width=492 height=276 ?

  3. Thank you for your response. I'm sorry for asking so many questions! I figured that would be better than making multiple threads.

    I'll just focus on a few minor things here and the rest I can continue to research and ask later, or maybe pay for professional help like you suggested.

    1. The main thing is I still can't figure out how to fix images in posts that use captions, but I know it probably has something to do with CSS coding. I know the full-width size on the Watson is 900px. When I insert an image into the post, even though in the Media gallery its 900 by whatever, it auto shrinks it into the post to 492 by 276 if I put a caption along with it. If I post an image without one, it works fine and I can go up to 900 width. However, if I then use a caption on that image after fixing it under Advanced Settings, it shrinks back to 492 by 276.

    This probably explains why on Watson my older posts with image captions were shrunk down to 492 by 276 after switching to the theme (I inspected several of them in trying to fix this problem) but much older posts where I didn't use captions are the full size they were intended to originally be at the time of their publishing.

    You can see the differences from this post to a more recent post I made after buying Watson at this link. What do I have to include on the CSS sheet to fix this so images can be whatever size I want AND include a caption?

    2. I have a problem with the quote feature on Watson. I think it indents everything to the left side. I haven't seen this before on the other WordPress.com themes I've used before. As you can see on the page from this post, the way the quotes are really messed up the positioning and flow of the article, making it really hard to read. On my old theme, it flowed like this: paragraph>quote>paragraph. Switching over to Watson resulted in the articles showing up like this. I'm not sure what to do.

    3. How do you make the more pages link at the bottom of each post bigger and more prominent? Right now it's very difficult for readers to see that a post has more pages because of its size and color, so they might just assume the article is done. How do I change both to a bigger size and different font (such as a black)?

    Thanks a lot for any help here, I hope it wasn't too much.

  4. 1. To correct the width of captioned images, add this:

    body.single div.wp-caption, body.page-template-default div.wp-caption {
        max-width: 100%;
    }

    3. To make the page nav bigger and same color as the regular text, add this (play with the percentage to adjust the size):

    p.page-links {
        color: #1C1C1C;
        font-size: 150%;
        word-spacing: 0.3em;
    }

    With this code I'm also adding some space before each number. I hope you find it reasonable. Play with the decimal number to adjust the space.
    Does "more prominent" include anything else?

    2. Yes, blockquotes on Watson are styled like newspaper pull quotes. Simply eliminating the text-wrap isn't enough, because then the bqs will look like ordinary paragraphs, just bold instead of regular. So, before giving you a code to correct the bqs, we need to know exactly how you would like them to look like. Some of the usual ways to highlight a bq are:
    • indentation;
    • grey (or other color) instead of black;
    • vertical line left;
    • large quotation mark top left;
    • background color, or border around the bq, or both;
    • any combination of the above.

  5. Awesome, thanks for those codes! It fixed both issues perfectly.

    For Watson's block quotes, I think having it the same color, boldness and font style it is now is fine, but with an indentation and with quotation marks around the block would be great.

    How would you go about changing the font color to the same as the body text for caption text, the author and date at the top of posts, and responses in the comment section?

  6. 1. Indentation left, or left and right?
    Also, "quotation marks around the block"? If you mean large QMs, the bottom right one wouldn't look ok no matter where you place it. The usual way is one QM only, top left. (This is a bit illogical, that's why a common alternative is a left border.) Or do you mean large QMs top left and top right? Or regular size QMs?

    2. Add this:

    header.post-title .post-byline, .wp-caption-text, #comments {
        color: #1C1C1C;
    }
  7. Thanks for that code as well. What would you add to also make the link to the previous and next post at the bottom of articles below the categories the same as well?

    Would it be possible to make up a few codes so I could see how they looked? One with a quotation mark to the left and one with it to the left and top right? As for the indentation, both left and right together would be fine, thanks.

  8. You're welcome.

    a) Add "footer.post-footer a," to the above selectors. In other words, turn the above to this:
    `header.post-title .post-byline, .wp-caption-text, footer.post-footer a, #comments {
    color: #1C1C1C;
    }`

    b) For indented BQs, with a large QM top left, add this:

    .entry blockquote {
        float: none;
        max-width: 100%;
        position: relative;
    }
    .entry blockquote p {
        max-width: 100%;
        padding: 0 40px;
    }
    .entry blockquote:before {
        content: "“";
        float: left;
        font-size: 300%;
        line-height: 1.2em;
    }

    To add a closing QM top right, add this:

    .entry blockquote p:first-child:before {
        content: "”";
        float: right;
        font-size: 300%;
        line-height: 0.97em;
        position: absolute;
        right: 0;
        top: 0;
    }
  9. (#a: without the backticks.)

  10. Fantastic!! Thank you so much. That code fixed the weird problem I had with the Watson quotes after transferring over to the theme.

    Two final things while I still have your attention. How do you bold the "footer.post-footer a," text?

    2. How would you go about changing the font style for captions, the comment section and the byline (Name and date of posting)?

  11. 1.

    footer.post-footer nav a {
        font-weight: bold;
    }

    2.
    We both waste time when your questions aren't precise. a) Change it to what? b) The comment section includes several elements: main heading, commenter's data, main text, "Reply" link, "Leave a reply" heading. Change which element(s)?

  12. What css code did you use to make your images their full size?

    Can you look at mine and tell me what to do? :)

    shelbyrebeccaphotography.wordpress.com

  13. I checked http://quarterdisorder.com/2013/06/24/my-most-anticipated-games-from-e3-2013/ and I found they used this CSS to change the width for single posts:

    .entry p, .entry ul, .entry ol, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, .entry div, .entry pre, .entry table, .entry dl, .entry form, .entry address, .entry details, .entry footer.post-footer, #comments {
    	max-width: 100%;
    }
    body.single .wrapper {
    	max-width: 100%;
    }
    body.single div.wp-caption, body.page-template-default div.wp-caption {
    	max-width: 100%;
    }

    If you did that, you would also probably want to update the Content Width setting in your Appearance → Themes → Customize → CSS panel to match (900px in this case).

  14. Note that if you inserted images individually in the past with a specific set width, you might have to re-insert them at full width after the CSS update to get those images to display at the new width.

  15. Thank you SO much! I have been trying for hours and this means the world to me!! :) Ah, you made my night!

  16. Hi there! I am also trying to make my images full size using the Watson theme. I copy-pasted the above CSS; it expanded the text but not the image. (I resized a test photo to a width of 900 px and re-uploaded it to WordPress, and it was still small and shifted to the right.) Any idea how I can make my images as big and beautiful as those at shelbyrebeccaphotography.wordpress.com? (My website is fieldguideforthemodernman.com.) THANKS!!!

  17. Hi @alissairei, I'm seeing 900px wide images in "46 places to go in 2013 " so the CSS changes are working.

    I checked a number of additional posts and saw images hosted on photobucket that are less than 900px in width, with some of them down at 700px and under. Also with all the whitespace to the left and right on many of your images, they tend to look smaller.

    When I looked at shelbyrebeccaphotography.wordpress.com, all of the images I checked are 900px in width.

    If your original images are not 900px in width, they will not be enlarged to that size automatically. You can manually edit the images in the post editor (click on them and then click the edit icon at upper left on the image) and enlarge them, but the image quality will suffer since that method relies on the browser to resize the images and they really aren't designed to do that.

    If you can point us at specific posts, we can check those out for you, but in the 46 places post where your images are uploaded to WordPress.com and 900px in width, they are displaying properly.

  18. Ah I see! Thank you very much!

  19. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic