WordPress.org

Forums

Custom Community
[resolved] full width header not happening (15 posts)

  1. imcarmel
    Member
    Posted 2 years ago #

    I'm setting up my website in Custom Community-- but there are a few things I can't get to work--
    The header image is not full width, but ends awkwardly somewhere over the sidebar, which is on the right. This persists no matter how I set it-- full width, default, whatever, and regardless of the size of the original image
    The 'magazine' view is lovely for the front page/ blog page.. but it looks a bit silly when there are 3 'featured' images in the first row, but then those same 3 images repeat in the blog section below that.

    I managed to disable the grey heads....

    But mostly I'd just like the

  2. konradS
    Member
    Posted 2 years ago #

    Hi imcarmel, do you have a link to your website?

  3. rororo
    Member
    Posted 2 years ago #

    imcarmel,
    I too am having issues with the header image not being full width. I have tried many different sized images like you, and messed around with "full width", "default", etc.
    Hoping someone can shed some light on this issue!
    ro

  4. imcarmel
    Member
    Posted 2 years ago #

    It's in progress and ever changing at http://69.195.124.94/~ingamari/ the permanent link will be ingamariecarmel.com, but we're not there yet. This header thing really bugs me, and might be a deal breaker with CC. Not sure yet. Glad to know someone else has the same problem and it's not just me :)

    marie

    ps regarding the blog layout issue-- it's currently set away from the 'magazine' view because of the repeating images.. apparently the three images at the top relate to the first 3 posts. Still seems silly.

  5. jooolie3
    Member
    Posted 2 years ago #

    I am having the same issue. Any help? It says that the default size is 1000px wide. My image is exactly that but does not show up as wide as the rest of the page.

  6. Tareq
    Member
    Posted 2 years ago #

    In your edit screen on the right hand side, is there a Page Attributes box? If so, try to change the template to full width, save and refresh the page!

  7. jooolie3
    Member
    Posted 2 years ago #

    Thanks for the suggestion. I just tried this and it doesn't change the page at all. The page stays the same with the header about 80% of the width of the rest of the page. If reduce the size of the browser window it eventually matches up with the rest of the page but at full screen it is smaller. Any other ideas?

    here is the site so you can see for yourself: http://julieanndalton.com/wordpress/

    Thanks for any help you can give. I am an old Dreamweaver user and brand new to WordPress.

  8. Tareq
    Member
    Posted 2 years ago #

    @jooolie3

    I will try to help you out as much as I can. Firstly, I would strongly suggest moving your CSS away from inline and use a referenced stylesheet. You can find more information on how to do this here.

    I see your header container is defined as 1200px in width and your image itself is 1000px in width. I would not recommend increasing the image size to fit the container as this will distort the image (you'll lose quality).

    If you change the following in your CSS:

    #header {
    background-image: url(http://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
    /* background-repeat: no-repeat;*/
    /* background-position: left 10px;*/
    display: block; /*Added this line*/
    margin-left: auto; /*Added this line*/
    margin-right: auto; /*Added this line*/
    }

    Then also change the value here:

    #header {
    height: 263px;
    width: 1000px;
    }

    You should find your header image has been centralized. This is the only valid CSS way to do it (in my experience).

    Hope this helps you,

    Regards,
    Tareq

  9. silentarts
    Member
    Posted 1 year ago #

    I am a total CSS n00b!

    Which file do we edit for this code?

    #header {
    background-image: url(http://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
    /* background-repeat: no-repeat;*/
    /* background-position: left 10px;*/
    display: block; /*Added this line*/
    margin-left: auto; /*Added this line*/
    margin-right: auto; /*Added this line*/
    }

    Which file do you edit to change this code?

    #header {
    height: 263px;
    width: 1000px;
    }
  10. Tareq
    Member
    Posted 1 year ago #

    @silentarts

    The file this is in is your theme's style.css located in the root directory of your theme. However if you haven't done so already, I would recommend creating a child theme so if your theme gets an update then your custom styles don't get overwritten.

    More information on child themes are available here.

    I'd recommend the Orbisius Child Theme plugin if you want smooth, 1-click child theme creation.

    Edit: There are other plugins available but this is the one I use for my projects.

  11. silentarts
    Member
    Posted 1 year ago #

    I already have Orbisius Child Theme...

    Apart from that... My theme's style.css has this:

    /*
    Theme Name: Digifoto
    Theme URI: http://wpbusinessbundle.com/themes/digifoto/
    Version: 2.0.2
    Author: WP Business Bundle
    Author URI: http://wpbusinessbundle.com/
    */
    
    @import "css/reset.css";
    @import "css/typography.css";
    @import "css/layout.css";
    @import "css/slider.css";
    @import "css/grid-slider.css";
    @import "css/shortcodes.css";
    @import "css/buttons-shortcode.css";
    @import "css/wide-layout.css";
    
    .widget-title {
       font-weight: bold;
    }

    I am unable to find

    #header {
    background-image: url(http://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
    /* background-repeat: no-repeat;*/
    /* background-position: left 10px;*/
    display: block; /*Added this line*/
    margin-left: auto; /*Added this line*/
    margin-right: auto; /*Added this line*/
    }

    And finally, where would this code be found?

    #header {
    height: 263px;
    width: 1000px;
    }

    As I said before...I am a total CSS/Coding n00b!

  12. Tareq
    Member
    Posted 1 year ago #

    OK that's cool. In your child theme's style.css just add both of those CSS snippets to your file (under the closing } on .widget-title) and save.

    Just make sure you replace the background-image property with the url to your own image, or you'll have someone elses image on your site.

    Report back, let me know how it goes.

  13. Orbisius
    Member
    Posted 1 year ago #

    Tareq, thanks for recommending my plugin :)

  14. Tareq
    Member
    Posted 1 year ago #

    No problem @orbisius, I use it on a lot of projects...saves countless hours over time!

  15. Orbisius
    Member
    Posted 1 year ago #

    I am happy to hear that. :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic