Questions on CSS

  • Author
    Posts
  • #1865291

    prunussweet
    Member

    I am a newbie to CSS and have been very thankful for this forum. It has really been a lot of help. However, I do have a few questions that have yet to be answered. So instead of re-posting in those separate threads and clogging up the board, ill just post them all here in a new thread. If anyone can help me out with any/all of these questions I would really appreciate it.

    1) I need to know what size (in pixels)/resolution I should use for my header image. The image is the full width of the page and also covers almost all the screen height wise as well.

    2) How do I get my text box and widgets more centered on the page? Right now they are far apart and look quit awkward.

    3) How do I change my header image from fixed to scroll with the page?

    4) How do you change the color of the search and contact info widget boxes?

    The blog I need help with is qualitylandscapeinc.wordpress.com.

    #1865548

    prunussweet
    Member

    Oh, I am running on the Motif theme as well.

    #1865572

    prunussweet
    Member

    Anything?

    #1865589

    Hi there!

    First, I noticed you’ve opened multiple threads covering these same topics. To prevent confusion, please keep all additional comments here. I’ll address all of your topics in this thread.

    I need to know what size (in pixels)/resolution I should use for my header image. The image is the full width of the page and also covers almost all the screen height wise as well.

    The featured image on the homepage works best with images at least 1140 wide. You should be fine with an image that is 1140×611.

    How do I get my text box and widgets more centered on the page? Right now they are far apart and look quit awkward.

    It looks like Richard helped you here:

    https://en.forums.wordpress.com/topic/center-widget-and-text-box?replies=4

    However, that wasn’t the look you were looking for. I modified your code a bit to push the pieces closer together using the following code:

    .content-area {
    width:705px; 
    padding-left: 30px;
    }
    
    .sidebar-widget-area {
    width:312px; 
    padding-right: 80px;
    }

    Can you give that a try and see if it achieves the look you’re going for?

    I would also encourage you to add something like this:

    @media screen and (min-width: 600px) {
    .content-area {
    width:705px; 
    padding-left: 30px;
    }
    
    .sidebar-widget-area {
    width:312px; 
    padding-right: 80px;
    }
    }

    Basically, that prevents the code from interfering with the mobile layout of your site.

    How do I change my header image from fixed to scroll with the page?

    Also, how would you change the color of the widget box? (From: https://en.forums.wordpress.com/topic/center-widget-and-text-box?replies=4)

    Are you looking to change the background color? If so, you can do that using the CSS here:

    .sidebar-widget-area .widget {
    background-color: #f9f9f9;
    }

    Just change the hex code to the color you’re looking for.

    How do you change the color of the search and contact info widget boxes?

    I suspect this might be related to above. If you’re looking to change the background of the various fields, this should do the trick:

    .textwidget textarea {
    	background-color: #000;
    }
    
    .widget input[type="text"], .widget input[type="email"], .widget input[type="password"], .widget input[type="search"], .widget input[type="url"] {
    	background-color: #000;
    }
    
    .sidebar-widget-area .widget_search .search-field {
    	background-color: #000;
    }
    #1865593

    prunussweet
    Member

    Awesome, thank you so much!

    #1865594

    prunussweet
    Member

    Was there an answer to my question regarding the fixed header image?

    #1865595

    Not a problem! Happy to help.

    #1865604

    Was there an answer to my question regarding the fixed header image?

    Looks like the answer for that was posted at https://en.forums.wordpress.com/topic/enlarge-header-image-to-full-size?replies=11#post-1875261

The topic ‘Questions on CSS’ is closed to new replies.