Twenty Eleven: Is it possible to make the page the full width with no background

  • Author
    Posts
  • #1686268

    For the widget titles, add the following and adjust as desired.

    .wf-active .widget-title {
    font-size: 12px;
    }

    Twenty Eleven supports the Featured Header image feature here at WordPress.com. If you set a featured image for pages and posts that is the size of the header image, that image will be used as the header for that page. Categories, archives and tags pages will use the header image set at Appearance > Header, as will any static page or post that does not have a featured image set.

    #1686269

    tracyjfox
    Member

    Hi thescacredpath

    I have added the code and it has worked perfectly – thank you.

    I haven’t used Featured Header before so will have a play and work out how to do it – hopefully you will be around to help if I need it!

    Couple of things with the ‘Facebook Like Box’,

    1. for some reason the spacing below this widget appears to be larger than between the others. How can I reduce this so it is consistent?

    2. The text ‘Find Me on Facebook’ entered into the title box of this widget doesn’t appear to be the same font and size as the others – not sure why this would be – is there a way to make it the same as the others?

    Thanks

    #1686270

    I’ll be around, so let me know if you have additional questions.

    On the likebox widget, try this first.

    #facebook-likebox-4 {
        margin-bottom: 0;
    }

    If that isn’t quite close enough, add the following and adjust the height value as desired (110px is what it is now).

    #facebook-likebox-4 iframe {
        height: 110px;
    }
    #1686271

    Wait, you will need to add the !important attribute to the height declaration as below.

    #facebook-likebox-4 iframe {
        height: 100px !important;
    }
    #1686272

    tracyjfox
    Member

    Hi,

    I have added
    #facebook-likebox-4 iframe {
    height: 100px !important;
    }
    as you advised and after playing about a little with the px value – it looks much better now, thank you.

    With regards to
    ‘2. The text ‘Find Me on Facebook’ entered into the title box of this widget doesn’t appear to be the same font and size as the others – not sure why this would be – is there a way to make it the same as the others?’

    The penny dropped late last night that it is different because the text automatically becomes a hyper link. I have been trying out different fonts and changed them a little so this isn’t as obvious now.

    However, I would like to change the font of the page names in the menu bar and try a couple out to see what they look like – is this possible?

    I want to keep the ‘Body Text’ as is but alter the menu which I can’t do at the moment – when I change the ‘Body Text’ it changes the menu aswell – hope this makes sense.

    Thanks

    #1686273

    2. As you figured out, the Facebook widget title is set to bold. Add the following to set it back to normal. Also, on hover, there is a text underline. If you want to get rid of that too, add text-decoration: none; to the rule below.

    .widget-title a {
        font-weight: normal;
    }

    To style the font and size in your menu, look in your custom CSS for the following and then just add or edit as desired. I included a font family declaration with just a placeholder font family.

    #access a, #access ul ul a {
        font-family: "Times New Roman";
        font-size: 130%;
        padding-left: 22px;
        padding-right: 22px;
    }

    Just in case you were wanting to change the menu to the font you are using for titles, I’ve included that Typekit generated font stack below.

    tekton-pro-1,tekton-pro-2,"Helvetica Neue",Helvetica,Arial,sans-serif

    #1686274

    tracyjfox
    Member

    Your reply did make me smile….you are one step ahead of me, anticipating what I would want to do next – excellent!

    You were absolutely right, I wanted to try out tekton-pro and perhaps heather btn.

    Facebook Widget

    Title no longer bold – thanks

    1. I have added what you recommended but it doesn’t seem to remove the underline – not sure if I have done this right.
    .widget-title a {
    font-weight: normal;
    text-decoration: none;
    }

    2. I might be loosing the plot but on my screen it looks like the colour of the facebook widget title is just slightly different to the other widget titles. Am I imaging it or is it different because it is still a link?

    Tracy

    #1686275

    Change what I had given you to this (a bigger hammer). :)

    .widget-title a {
        font-weight: 400;
        text-decoration: none !important;
    }
    #1686277

    tracyjfox
    Member

    Ha ahh! Big hammer worked.

    Can’t thank you enough for all your help and patience – you have been a star.

    Kindest regards

    Tracy

    #1686278

    tracyjfox
    Member

    Hi thesacredpath

    I know you will want to kill me but…..

    After living with it for a while, I don’t like the site title and description as part of the header image which I had done to avoid the resizing issues I was having.

    I have put the code back in that you originally gave me to amend the site title and description (with some additional updates ie font size/colour, margin values).

    It looks very nearly how I want it to on my monitor and on my galaxy tablet (landscape and portrait) BUT it is not playing nicely at all on my phone in either orientation.

    Essentially the site title and site description overlap one another which was different from what it was doing before.

    Please help again!

    Tracy

    #1686279

    Tracy, no killing in the forums… we work only on Happiness here. :)

    Let me craft some media queries for the site title and description to control positioning for different screen sizes.

    #1686280

    tracyjfox
    Member

    I wouldn’t blame you!

    Thanks thescaredpath

    Tracy

    #1686281

    Ok, add this at the very bottom of your current custom CSS and see what you think. I’ve made sure everything works all the way down to iPhone portrait width of 320px. I also tightened up the menu spacing under 768px in width.

    @media screen and (max-width: 767px) {
        #site-description {
            float: left;
            margin: 0.9em 0 0 1.3em
        }
        hgroup {
            height: 100px;
        }
        #access li a {
            line-height: 1.7;
        }
        #access ul ul {
            top: 3em;
        }
    }
    
    @media screen and (max-width: 360px) {
        .wf-active #site-title a {
            font-size: 180%;
            text-align: center;
        }
        .wf-active #site-description {
            font-size: 22px;
            text-align: center;
            margin-left: 0.8em
        }
    }
    #1686283

    tracyjfox
    Member

    Hi thescacredpath

    Apologies for not replying sooner – thanks a million for working on this.

    I have added the code above and it looks miles better. I have played a little with a couple of the values and I don’t think I have broken anything. I preferred left aligned to centered and altered the left margin a tiny bit. I was trying to get consistent alignment of the text along the left hand side.

    The menu of pages is not quite aligned the same on the left – can you suggest what I could add to alter this a little?

    In the Fonts section, I also reduced the size of the Headings value and the font size percentage for the menu headings – it dawned on me (perhaps a little late I hear you say!) that the majority of users would probably be using their phones or smaller devices so don’t need these things as big as I originally thought.

    Thanks again

    Tracy

    #1686284

    The site title and description are looking great, Tracy. Nice job!

    Find the following in your custom CSS and edit the left and right padding to what I have below.

    #access a, #access ul ul a {
        color: #2E4556;
        font-family: tekton-pro-1,tekton-pro-2,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 150%;
        font-weight: 600;
        padding-left: 0;
        padding-right: 44px;
    }

    Then find this and change it to a positive 1.3em.

    #access ul {
        margin-left: 1.3em;
    }
    #1686285

    tracyjfox
    Member

    Thank you – only what I have learnt from you though.

    I added the code above and although it was a bit better on the phone size screen I haven’t left it in it because….

    1. It moved the menu left margin too far over to the right on desktop and tablet size

    2. It made the hover background colour move over so it was started with the first letter of the page name

    3. The alignment wasn’t consistent between portrait and landscape on the 2 phone sizes before but the difference became even more obvious

    I wondered if this is as good as we are going to get it without messing up all your good work so I played a bit more with some of the values in the code you had already given me for the site title and description to move them to the left a bit more so the difference wasn’t as noticeable.

    There is still a difference between portrait and landscape for some reason but hey I think I will have to live with that.

    What do you think?

    Thanks again

    Tracy

    #1686286

    Tracy, your site is looking awesome. It might take a bit of mucking about to get everything to align just right, and other things already in your CSS may have to change. Funny I was not seeing the issues you mention when viewing your site at different browser/screen widths.

    Your site though, is looking very nice.

    #1686288

    tracyjfox
    Member

    Hi thescaredpath

    Apologies for delay in replying.

    I just wanted to say a really huge thank you for all your help and patience, it is very much appreciated.

    My next job is to take some decent pictures and play with the headers and make a home page.

    Until the next time….. (oh no I hear you say!!)

    Kindest regards

    Tracy

    #1686289

    Tracy, thanks and you are welcome, and if you have other questions, we are here to help. (And I’d never say, “oh no!) :)

The topic ‘Twenty Eleven: Is it possible to make the page the full width with no background’ is closed to new replies.