Need help? Check out our Support site, then


expand the max width

  1. I want to expand the max width of the entire blog, the problem is I don't know wordpress' term for the navbar and header image. As you can see below I've tried these terms without it working. It seems that the content, header image, and nav bar are all limited to 1255 px, I assume by a media query, and I need to change that so that as you expand the browswers width, it doesn't stop at some point.

    http://electroniccurrent.com/

    .header-image {
    max-width: 2000px;
    }

    .navbar {
    max-width: 2000px;
    }

    .navbar {
    max-width: 2000px;
    }

    .navbar-inner {
    max-width: 2000px;
    }

    #nav {
    max-width: 2000px;
    }

    .main-menu {
    max-width: 2000px;
    }

    The blog I need help with is electroniccurrent.com.

  2. Hi, add this to extend the menu to 2000px max width:

    .site-header {
        max-width: 2000px;
    }

    On the header image, Twenty Fourteen has a flexible width header. Create a new header at least 2000px in width and then when you go to insert it, select "use as is" and don't crop the image (Appearance > Header).

  3. Thanks. I can't seem to find the use as is setting in (Appearance > Header).

    Also the content seems to be restricted. When I expand the browser on the home page, the columns of posts should increase to three, but it is somehow restricted.

  4. See here in a wide browser to see the content width restrictions (event though i changed the .content max-width)
    http://electroniccurrent.com/2014/03/13/bryzone-releases-new-melodic-dnb-tracks-trial-run-stargaze/

  5. Add the following and you will have up to 5 rows on the main page.

    .site-content {
        margin-right: 18.0476%;
    }
    .hentry {
        max-width: 100%;
    }

    On the header, when you go to Appearance > Header in the dashboard (in the left navigation), you can upload your header and when you go to insert it, it should present you with the choice of cropping the header or using it as is and not cropping it.

  6. ok that worked. I'm only getting a crop and publish option with the header image- any help on that?

    Also, I would like to redirect my blogger posts directly to their new location on wordpress- can you help me with that? I found this http://wordpress.org/plugins/blogger-to-wordpress-redirection/ but i don't think it willl work on .com as I'm hosted through wordpress

  7. No, the plugin won't work here as users cannot install plugins on WordPress.com. That plugin is for self-hosted WordPress.org sites. I know of no way to do a redirects on individual URLs from another host.

    On the header image, let's do this all in the CSS. Upload your new image to the Media Library (Media > Add New), get the URL of that uploaded image and then add the following CSS and replace URL_OF_IMAGE between the quote marks with the URL of your image. If you image is taller or shorter than 70px, change the "min-height" value to match it.

    #site-header {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 #000000;
        background-size: contain;
        min-height: 70px;
        width: 100%;
    }
    #site-header img {
        visibility: hidden;
    }
    #site-header a {
        display: block;
    }
  8. ok i uploaded a 3000px image and its still limited

  9. First, the way you've gone about expanding the max width to 2000px will break a responsive layout, so I would recommend applying changes to width like that one just to large screens by using a media query.

    For example, if you wanted to apply all the CSS you've added so far to a media query that only kicked in for screens larger than 1260px, you would add something like this:

    @media screen and (min-width: 1040px) {
    	/* put your css here */
    }

    Now, for the header image, it sounds like you want it to expand it outside the 2000px max-width area. Is that right? To do that, you need to add the image as a background on an element behind the one that is 2000px wide and then move that one down to give the background image space to show through.

    Here is an example that will add your header image as a background on the main body and move the main content container down to let it show up. The media query works to limit the change only to large screens (because this change isn't needed for smaller screens). I picked 100px as the height arbitrarily, but you can change it to something else if you'ce like (note that "100" appears twice).

    @media screen and (min-width: 1040px) {
    	#site-header {
    		display: none;
    	}
    
    	body.custom-background {
    		background: url('http://electroniccurrentdotcom.files.wordpress.com/2014/03/tec-website-header_84.jpg?h=100') repeat-x;
    	}
    
    	#page {
    		margin-top: 100px;
    	}
    }

    Try it out and also try editing the "100" to see if this does what you're looking for. If it doesn't, then I may have misunderstood the request!

  10. Also, I would like to redirect my blogger posts directly to their new location on wordpress- can you help me with that? I found this http://wordpress.org/plugins/blogger-to-wordpress-redirection/ but i don't think it willl work on .com as I'm hosted through wordpress

    I'm so sorry but that plugin is not available here at WordPress.com. You are using WordPress, but you are not using a self-hosted, self-hosted and maintained WordPress.org setup. Installing custom plugins is not permitted at WordPress.com, but it is if you are using a WordPress.org setup.

    WordPress.org and WordPress.com are separate: http://en.support.wordpress.com/com-vs-org/

  11. The problem with a having a background image as the site header is it doesn't change width, so it crops off the right side- any way to fix that?

    The navigation bar dropdown for weekly posts cuts off- is there a way to let the dropdown menu scroll?

  12. Also with the new media queries the display posts shortcode i used in the left sidebar under authors is now showing columns- can i change that just for that sidebar (#secondary)

  13. The problem with a having a background image as the site header is it doesn't change width, so it crops off the right side- any way to fix that?

    The background-size property was made to try to help that situation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    However, a more ideal approach would be to use a background image that looks good repeated and text for the site title and tagline and then style the text elements using CSS.

  14. The navigation bar dropdown for weekly posts cuts off- is there a way to let the dropdown menu scroll?

    Someone has asked about that before. Try this solution: http://en.forums.wordpress.com/topic/drop-down-menus-display-different-number-of-options-on-different-browsers?replies=6#post-1666326

  15. Also with the new media queries the display posts shortcode i used in the left sidebar under authors is now showing columns- can i change that just for that sidebar (#secondary)

    Sorry, I don't follow! I looked under "Authors" on the left sidebar on my Mac and I only see one column of posts there. Can you give me more detail on how to find this or screenshot it for me? http://en.support.wordpress.com/make-a-screenshot/

  16. I'm already using the background size property- the problem is it stops working after a certain point.

    Fixed nav bar.

    I can't upload images here but if you look on the left side of the homepage there's a series of author photos, and below each is 3 articles. Those articles are displayed in columns instead on a running ul

  17. also is there anyway to display tags as a word on top of a specific color? see this: http://metrojolt.com/

  18. I'm already using the background size property- the problem is it stops working after a certain point.

    It seems to be working for me, but maybe I'm not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Fixed nav bar.

    Great!

    I can't upload images here

    The support page I sent covers that, it suggests uploading the screenshot to your media library.
    http://en.support.wordpress.com/make-a-screenshot/#sharing-your-screenshot

    if you look on the left side of the homepage there's a series of author photos, and below each is 3 articles

    Now I see it. I was looking at each post "block" as one column and looked straight past the list items underneath each image before. It helps in cases like this to describe specifics, i.e. I want the text like "Lightning In A Bottle’s Updated Lineup and Video are Here!" to be full width.

    That's happening because you are applying CSS for ".display-posts-listing li" to all display post listings regardless of where they are. The "max-width:29.33%;" part of those rules are causing the three columns you're seeing for the text under posts in the left sidebar.

    What you probably wanted instead was to only apply the columns stuff only to the main content area. You can do that by adding "#content" to the beginning of each selector.

    Look through your custom CSS and find each instance of

    .display-posts-listing li

    and for each one that you want to limit to the main content area, change it to

    #content .display-posts-listing li

    or if you want to limit the rule to the sidebar instead, then change it to

    #sidebar .display-posts-listing li

    also is there anyway to display tags as a word on top of a specific color? see this: http://metrojolt.com/

    You can, but you would need to add a CSS rule for every tag separately.

    First, add one set of rules to hide commas in tag lists and add extra line height:

    .cat-links {
    	color: #f5f5f5; /* hack to hide commas in post tag lists */
    }
    
    .entry-meta {
    	line-height: 2; /* give the tags some space */
    }

    Then for each tag, add a CSS rule like this:

    .cat-links a[title="View all posts in CHILL/GROOVE"] {
    	color: #fff;
    	background: #e52727;
    	padding: 5px;
    	border-radius: 2px;
    }

    The part inside the "[" and "]" must match the HTML source for the tag link exactly.

  19. It seems to be working for me, but maybe I'm not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Once you get quite large it stops expanding and a black background sets in. only effects laptops 15"+

    ---
    awesome! I had been trying .content not #content!

    ----
    sweet!
    ---
    could you answer my other qs?
    http://en.forums.wordpress.com/profile/jessewheaton

  20. It seems to be working for me, but maybe I'm not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Once you get quite large it stops expanding and a black background sets in. only effects laptops 15"+

    ---
    awesome! I had been trying .content not #content!

    ----
    sweet!
    ---
    could you answer my other qs?
    http://en.forums.wordpress.com/profile/jessewheaton

  21. Once you get quite large it stops expanding and a black background sets in. only effects laptops 15"+

    So, I think this solves that problem:
    http://en.forums.wordpress.com/topic/expand-the-max-width?replies=19#post-1696017

    But I also think it will really really help to look at screenshots in your case because I'm not always understanding what you're referring to. :)

    Can you take a look at this?
    https://cloudup.com/cUGbH7109YD

    could you answer my other qs?
    http://en.forums.wordpress.com/profile/jessewheaton

    Those should get sorted out by other happiness engineers. Looks like almost everything has already been answered too.

  22. Ah, I see! Thanks for the screenshot. :)

    The problem is the dimensions of the image combined with the "background-size: contain" rule. The "contain" keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

    If you want to have a consistent height for a background image, you should not use "contain."

    You might try "background-size: cover;" instead, but there may still be cases where the image gets clipped.

  23. ok i used cover- its now clipping the bottom at a large size-

    ----------------------------------------------------

    is there a way in the display posts shortcode to show categories? can't find anything in here: http://en.support.wordpress.com/display-posts-shortcode/

    on my homepage I want to show: thumbnail, categories, title, excerpt for each post

  24. on the home page in the content area where the thumbnails and excerpts are displayed is there a way to add a
    between the title and excerpt? and is there a way to have the excerpt fill the inline-block instead of being a set number of characters? and I would like to show the number of categories as well

  25. *add a break between the title and excerpt?

  26. There's no perfect solution for using background-size. Each one will come with some clipping. If you want no clipping, then you would need to use something else, such as the background solution I posted earlier. It seems like you're trying to crop and constrain a background image into a space to work with multiple dimensions in multiple different browser widths with no clipping and I don't think that's really possible.

    is there a way in the display posts shortcode to show categories? can't find anything in here: http://en.support.wordpress.com/display-posts-shortcode/

    There isn't a way I know of to show categories in the display posts shortcode.

    on the home page in the content area where the thumbnails and excerpts are displayed is there a way to add a add a break between the title and excerpt?

    You might like this article:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    If you follow the instructions in that guide, you should be able to find the selector for the element you want to adjust. Here is an example:
    https://cloudup.com/cw5YZI6vqoc

    If you copy that entire rule from inside your browser, starting with @meda and ending with two "}" characters, then you should be able to adjust the 120px value to change the height for the spacing between the between the title and excerpt. However, keep in mind that the designer set that height for a reason. Looking at the design, I bet it was to adjust the height to accommodate long titles when present. If you want to test that, you should add a post with a long title or adjust one of the titles there currently as a test and make sure any CSS you add works with longer titles if there's a possibility you'll be adding longer titles later.

    and is there a way to have the excerpt fill the inline-block instead of being a set number of characters? and I would like to show the number of categories as well

    I'm sorry but neither of those things are possible with CSS only. The Custom Design upgrade at WordPress.com is for adding CSS. Using CSS, you can adjust elements that already appear on the page, but you cannot add or change dynamic content unless you have access to change the theme's PHP code, and that is not an option here at WordPress.com. I'm sorry for the inconvenience!

  27. on the home page in the content area where the thumbnails and excerpts are displayed is there a way to add a add a break between the title and excerpt?

    I've inspected the element, but I'm referring to the display posts shortcode in the content area- i want to put a gap between "Classical & Dance Music Fusion Is Happening: Throwing Snow Releases New Track, “Caedis” " and its content. Cannot find a way to do that while inspecting the element since the css designing that is the display posts shortcode in the page

  28. Hi, see if the following does what you want. I've limited this change to the main home page only.

    .home .display-posts-listing li {
        display: inline-block;
        text-align: justify;
    }
    .home .display-posts-listing .excerpt {
        display: block;
        margin-top: 10px;
    }
    .home .excerpt-dash {
        display: none;
    }
  29. works great! there's not by any chance a way to display the categories using css is there? Can't find a way with the display posts shortcode

Topic Closed

This topic has been closed to new replies.

About this Topic