This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: , ,

Urgent Header Help Please!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Author
    Replies
  • #13468
    Jason Bobich
    Keymaster

    Hello,

    This will be a customization you’ll need to make to the theme. For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the overriding edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page. Just make sure you’re never any editing any files of the theme directly. This will just cause nightmares later on when you try to update and is just an inefficient way to locate things.

    If it were me, I’d not put in a logo from the theme’s options. Then, I’d apply the banner image as a background to the surrounding header’s DIV and add a specific height to the content of the header so it fills your background image. Hopefully this will get you started:

    #top #branding { background: ...; }
    #branding #header_content { height: 150px; }

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #13469
    bgal2012
    Participant

    Thanks. But yes, I use Firebug and Chrome inspect – that’s how I could find the exact container. There are just so many css files and can’t find it any of them. I will try applying bg to the container. But which of the many css files is that in? I should just try putting it into the custom css theme option part?

    If can’t get it done, will post back.

    #13480
    Jason Bobich
    Keymaster

    You shouldn’t be editing any of the minified CSS files. Just install the child theme provided (as explained in this video) and then put your overriding CSS edits into your child theme’s style.css. Use the code I provided as a starting point to paste into your child theme’s style.css.

    And since you’ve already started configuring your website, just be aware of these three things when switching to the child theme:

    http://dev.themeblvd.com/tutorial/switching-to-a-child-theme-after-youve-already-started-building-your-website/

    #13504
    bgal2012
    Participant

    Why would this not work putting in custom css box?

    #top {
    border-bottom: 1px solid #ffffff;
    background-image: url(../”images/banner-noform.jpg);
    }

    #13506
    Jason Bobich
    Keymaster

    You’re using a relative image path, and so there’s no way for it to display throughout your site, assuming you’re using WordPress permalinks for your site. If you’re putting thin in the Custom CSS box, you’d need to use a full URL to the image like:

    http://yoursite.com/uploads/image.jpg
    #13509
    bgal2012
    Participant

    Thanks for the help. I finally broke down and changed the theme.min.css (I know, I know…) In future updates will just put the change back in.

    The “Primary Color” in theme options (This color gets applied to the background of the header, as well as being applied to a couple different highlighted areas of the theme.) is not being applied now, though. My nav and social no longer have the blue color. Not sure why putting a background image in would change that?

    Reference:

    Site: bacu.ca/
    Needs to look like: http://99designs.com/banner-ad-design/contests/banner-design-needed-top-bacu-262290/entries/232

    #13510
    Jason Bobich
    Keymaster

    There was never any option of the theme that adds a color to the background of the buttons (I don’t think?). They use a transparent image that shows through to the background color you select. You’d have to apply a background color to the anchor tags of the menu’s list items.

    Note, I think you’re having issues with your Custom CSS because what you have there currently is not using proper CSS syntaxing. It looks like in the code you have there now you’re forgetting your closing bracket } on each declaration.

    So, for example you’re doing:

    .whatever {
         foo: bar;

    Instead of:

    .whatever {
         foo: bar;
    }

    So, as you move down your CSS, things are going to break and not work. I think that’s why maybe your last attempt wasn’t working. And also, you need to use full URL’s. So, for example, this is what should be in your Custom CSS option for the background you’re trying to add:

    #top #branding {
    	border-bottom: 7px solid #fff;
    	background: url(http://bacu.ca/wp-content/themes/barelycorporate/assets/images/banner-noform3.jpg);
    }

    Additionally, it would probably go smoother for future updates, if you didn’t put in the theme folder. So, for example you could upload it through your WP media uploader and then do something like:

    #top #branding {
    	border-bottom: 7px solid #fff;
    	background: url(http://bacu.ca/wp-content/uploads/whatever/banner-noform3.jpg);
    }
    #13573
    bgal2012
    Participant

    Thanks for all the replies & help.

    Another question please? To fill the whole header area, what size should it be? I went by inspecting element and looking at width. It looks great on my PC. But client sent a screenshot and looks horrible on his – then it dawned on me that by inspecting element it may be showing just the width that it shows on “my” screen. So I’m kinda stuck on what size to make it?

    My screenshot: http://postimg.org/image/cmwp0iw7d/
    His screenshot: http://postimg.org/image/9dz3guzjb/

    #13586
    Jason Bobich
    Keymaster

    The theme’s design takes on a conservative a 960px approach to the design, but you’re realistically getting into an issues that aren’t really part of the theme.

    The general concept of how wide to make your design depends on several factors, and there are different opinions out there on what is right. For awhile, it was always sort of the standard that you make your design fit within the constraints of 1000px.

    I still take this conservative approach, for the most part. However, in the new age of responsive design and big monitors, many people like to set their design to much wider viewports. But this means you have to account for a more variety of viewport sizes moving down. So, if you’re choosing to design for larger monitors, then you also need to adjust your size as things get smaller, which adds more work.

    You use CSS @media queries to accomplish this:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The forum ‘Barely Corporate Responsive WordPress Theme’ is closed to new topics and replies.