customizing header space

  • Unknown's avatar

    I am struggling with the header on smmartsevent.wordpress.com. I
    would like to not have the jpeg graphic design at the top. I want to make that space shallower and make it all blue Hex # 2570b8, but I not able to figure out how to do that.

    In Custom Design I can hide the photo and the space becomes all white. At one point I could get the top half to be blue through mucking with CSS, but I could not the bottom half. It remained white. And the blue that I did get did not span the space from left to right.

    Is there a CSS fix to these questions?

    Is there a newer or better [free] theme that would let me do what I want?

    Thanks.
    Betty

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Try adding this to your existing custom CSS rules and see what you think, you can always try different values for the height and padding if you want to experiment a bit:

    .site-header {
    	background-color: #2570b8;
    	background-image: none;
    }
    .site-header .home-link {
    	min-height: 150px;
    }
    .site-title {
    	padding-top: 30px;
    }
  • Unknown's avatar

    thanks so much. this worked on my test site, but I am unable to get to the CSS customization screen on smmartsevent.wordpress.com. It is extremely slow to load and when it does it brings up what looks like a nice customization menu (somewhat different from what I was experiencing a few days ago). However, clicking on the CSS option creates double-print gibberish with no way to access the CSS screen.
    What do I do? I can't make any changes.

  • Unknown's avatar

    The customiser is working fine for me. Can you post a screenshot of how the customiser screen is appearing for you?

  • Unknown's avatar

    Sorry to be so slow. I have the screen shots, but don’t know how to post them in this reply.

  • Unknown's avatar

    That’s no problem, here’s how to add it to your media library, then you can just post the URL here.

  • Unknown's avatar

    thank you. I learn something every minute!
    Two screenshots:
    The first when I click on “customize” and the second when I click on CSS from the customize screen.https://smmartsevent.files.wordpress.com/2016/08/screen-shot-2016-08-09-at-11-39-46-am.pnghttps://smmartsevent.files.wordpress.com/2016/08/screen-shot-2016-08-09-at-11-40-19-am.png

  • Unknown's avatar

    Uh oh, that doesn’t look so good.

    Can you check on a different browser to see if they all display the same way? This will help check if it’s a browser issue or if one of your browser extensions or add-ons is causing the problem.

    If you can it would be good to check from a different internet connection as well, but I will acknowledge that’s not always an easy thing to do – using a data plan on your mobile would probably be enough to see if the issue is just via your connection. Or test at work/the library/a friend’s place when you get the chance.

  • Unknown's avatar

    Nothing seems to work. I use Firefox and have restarted it a number of time. It is incredibly slow I have tried in Safari and can’t even get a good page. I have tried on an old computer with IE. I tried at the library.

    When I get smmartsevent.wordpress up and click “customize,” I get this: https://smmartsevent.files.wordpress.com/2016/08/screen-shot-2016-08-09-at-3-45-11-pm.png. Then when I click customize, I get the sequence I wrote about earlier.

    So it looks like I am up a creek. what do I do?

  • Unknown's avatar

    I’ll flag this thread for a member of staff to come and investigate. They should be able to help, hopefully the things we’ve checked off already will help them narrow it down. Sit tight!

  • Unknown's avatar

    thanks so very much. In the meantime, I will get off the site.

    BTW, the same screwy mess shows up when I tried to use the fonts tab in customize. I was just trying to send you a screen shot, but that didn’t work. I’ll stop til I hear from you or your colleague.

  • Hi @smmartsevent, I suspect a conflicting browser extension. Can you try disabling all of them, and if that works, re-enable them one at a time (or a few at a time) to identify which one is giving you grief?

  • Unknown's avatar

    this worked! Thank you so very much. I am back in business.

  • Perfect! Do you know which one caused the hangup?

  • Unknown's avatar

    No, I don’t. I did have firebug too and I removed that. I wonder if that was the culprit to begin with?

  • Unknown's avatar

    You have been wonderful in helping, but I have more questions.

    How do I make the tag line in the header area align to the right? I don’t know what the css command is for the header or its tagline.

    Can I have a widget that would have the information at the bottom of my static page? Here’s the CSS for what is at the bottom and it includes a link to another site:
    <span style="color: #990000;">To purchase tickets, please</span> <strong><a href="https://mscf.givezooks.com/events/arts-dinner-auction-to-benefit-st-martin-s-ministries">ORDER TICKETS HERE</a></strong> <span style="color: #990000;">or contact Gloria Styer at (email visible only to moderators and staff) to purchase tickets by mail.</span>

    Can you change the size of a widget to something narrower?

    I also have a test site that I keep private. It is bettytest.wordpress.com. For some reason, it is treating the site as a blog which is different than my regular site. I want the 2 sites to be the same for testing purposes. I do not have the option of making a static front page on the test site. In the Reading section under Settings, there is no option for static page. Here’s the url:

    Hope you can help.

  • Unknown's avatar

    Hi, give this a try for the tagline. What I have done is to move it to the right and align it at the top with the title. I’ve also wrapped this all in a Media Query to limit it to 750px and wider screens/windows. Below 750px in screen/window width, the title and tagline start to overlap if we keep this change below that width. At 749px and narrower, the title/tagline arrangement returns to the original design.

    @media screen and (min-width: 750px) {
    .site-header .home-link {
        position: relative;
        box-sizing: border-box;
    }
    .site-header .home-link .site-description {
        position: absolute;
        right: 0;
        top: 25px;
        padding-right: 25px;
    }
    }

    If you want the above in a widget, add a Text Widget and copy and paste the code into that widget and save. Yes, we can change the width of that Text Widget. Once you add the code, we can then see what width would work best for your widget.

    On your test site, the reason the static page stuff is not showing up is because you have no published pages, only draft and private. Publish the page you want to set as the static front page, and then another if you wish to set a posts page and then the Static Page section will appear in Settings > Reading.

  • Unknown's avatar

    Thank you so much. Still some questions:

    Question 1) I noticed that my iphone access to smmartsevent.wordpress.com comes up with what was the old header picture in addition to the new blue header. How do I fix that? Here’s the picture url of it:

    Question 2) I want to have a widget that says “Order tickets” and I want those words to be an actual link to a new page on another site. Is that possible and if so, how do I do it? The site is:

    https://mscf.givezooks.com/events/arts-dinner-auction-to-benefit-st-martin-s-ministries

    I have tried it on my test site https://bettytest.wordpress.com/ but it doesn’t link. Is there a trick to it?

    In the meantime I’ll try to learn more about Media Query.

  • Unknown's avatar

    Hi,

    Question 1) I noticed that my iphone access to smmartsevent.wordpress.com comes up with what was the old header picture in addition to the new blue header. How do I fix that?

    I took a look and you have the Mobile Theme activated at Appearance > Mobile in your dashboard. Since Twenty Thirteen is a responsive design, it adjusts to all screen/window sizes on all devices. I don’t know if you are using the mobile for a specific reason or not, but I would suggest turning off the mobile theme and then take a look at your site on your mobile and tablet and see what you think that way.

    If you wish to continue using the mobile theme, let me know and we can work out the kinks for you.

    Question 2) I want to have a widget that says “Order tickets” and I want those words to be an actual link to a new page on another site. Is that possible and if so, how do I do it?

    Yes, that can be done by using a Text Widget. The following three links should get you going on that.
    Text Widget
    Text Widget Links
    Linking Images

  • Unknown's avatar

    Fixing the mobile worked beautifully. Thanks. I never would have figured it out.

    The text widget links didn’t work and I looked at all 3 suggested pages and thought I followed directions for “Text Widget Links.” I can’t see what I am doing wrong. There does not seem be a way to make the link active or an active replacement for a title. Please take a look at my test site: https://bettytest.wordpress.com/

  • The topic ‘customizing header space’ is closed to new replies.