Hard Boiled Greg

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 100 total)
  • Author
    Posts
  • in reply to: Move Search Bar #40660

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi,

    In your WordPress dashboard, under the Genesis menu, click on ‘Theme Settings’. Under the ‘Navigation’ section click the checkbox for “Enable Extras on Right Side” under ‘Primary Navigation’. You will see a drop down which will let you select to display a search form.

    Hard Boiled Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: News Theme: Social Media Icons #40658

    Hard Boiled Greg
    Participant
    Post count: 88

    If you log into your “my.studiopress” dashboard and click on “Get Started” beside the News theme, you’ll find these instructions right at the top: “How to Create Social Icons in the Navigation”

    Hard Boiled Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Need Help Getting the Read More Box to look night #40657

    Hard Boiled Greg
    Participant
    Post count: 88

    If you find this rule in your CSS (line 1563):

    .home .more-link {

    you can edit the ‘bottom:’ setting to move the read more link around. Try -15px.

    Hard Boiled Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Quick Search in AgentPress not displaying #34883

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi,

    There is probably more than one way to resolve this, but here is some CSS that should help fix it.

    Add

    position: relative

    to .featured-top

    Remove

    float: left

    from .slider

    Change .property-quick-search to:

    border: 10px solid #fff;
    	min-height: 260px;
    	overflow: hidden;
    	padding: 20px;
    	width: 240px;
    	z-index: 10;
    	position: absolute;
    	top: 15px;
    	right: 15px;

    You may want to add a background to the search box as it is showing the slider through. Actually a semi-transparent white would look good, or change the text to white and go with a semi-transparent black.

    Let me know if you have trouble with this.

    Hard Boiled Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34566

    Hard Boiled Greg
    Participant
    Post count: 88

    You’re welcome!


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34563

    Hard Boiled Greg
    Participant
    Post count: 88

    To fix the nav menu change:

    #header {
            min-height: 318px;
        }

    to

    #header {
            height: auto;
        }

    where we added it in the (max-width: 960px) area.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34553

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    Your logo is left aligned at 960px and less. If you add ‘margin: 0 auto’ to your #title rule it will be centered.

    Up to your preference of course.

    Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34422

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    When I increase my browser width, it’s like the logo is pinned to the right side of the screen.

    This is not supposed to be like this. I think you missed adding ‘position: relative’ to your .wrap rule. Adding this will fix it.

    Now lets look at narrow screen sizes. Your “desktop design” is two columns (content and sidebar) and we’ve set up the CSS to position your logo in the “right column”. When viewing the site on a tablet or mobile phone, your theme reduces to one column. You as the designer/developer need to determine how you want your layout to be on these devices.

    One option would be to position the logo top center, with the menu below it, and then the main content. Your theme does this out of the box, but we made some changes last time to get the full-width view the way you want, so we need to add CSS rules to “put things back” at narrower screen sizes.

    The StudioPress style sheets group the mobile responsive CSS rules at the bottom. If you open your style sheet and scroll to the bottom you will see settings for various max-widths ie:

    <a href="http://www.studiopress.com/forums/users/media/" rel="nofollow">@media</a> only screen and (max-width: 960px) {
                         /* Various CSS Rules */
    }

    The code inside the above rule is only “used” when the screen has a width of 960px or less.

    If you place the following code:

    .header-image #title-area,
        .header-image #title,
        .header-image #title a {
            position: relative;
        }
    
     #header {
            min-height: 318px;
        }

    inside that area, it will display your logo top center, followed by nav and content when the screen is 960px or less.

    If you want a different layout than that on those screen sizes, then you will need to apply different rules. This is just one solution.

    Additionally, you may need to specify an alternate logo image for really small screens if your existing logo is too wide.

    You can try applying those changes and let me know what you think.

    If you have any questions or need better clarification, please do not hesitate to let me know.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34407

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    Just wanted to let you know I’ve seen your post. I have to run a few errands and I’ll be back later to help you finish this off.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34194

    Hard Boiled Greg
    Participant
    Post count: 88

    Aaah, you edited your post; I didn’t see that.

    Change #header ‘min-height: 318px’ to ‘height: 50px’ and remove ‘overflow: hidden’

    To .wrap add ‘position: relative’

    Change your CSS to this:

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    	display: block;
    	height: 318px;
    	overflow: hidden;
    	padding: 0;
            position: absolute;
            right: 0;
    	text-indent: -9999px;
    	width: 300px;
    }

    To .sidebar add ‘margin-top: 290px’

    Now you should be all setup for desktop screens. As the browser width decreases the above changes are going to need to be “undone” and new rules applied to their respective @media screen sizes depending on how you want it too look on those devices.

    Please leave a post here if you need help with that.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34189

    Hard Boiled Greg
    Participant
    Post count: 88

    (P.S. Put the menu back in the header widget. We can make the space below it go away)


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #34188

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    I started to look at it and then refreshed and it changed. I think you are still making adjustments. Just make another post when you need a hand. :)

    Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #33778

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    The title area has left float and the header widget has a right float. The first step will be flipping those around and then fiddling with positions and margins to get everything where you want it.

    I’ll leave you to it for now. If you can’t get it how you want it, just post in this thread (I’m subscribed) and I’ll help you out.

    Take care,

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #33773

    Hard Boiled Greg
    Participant
    Post count: 88

    Doh! Didn’t think about the sidebar dropping below the content.

    OK, put the the logo in your header (top, left) and put your menu in the header widget area. I’ll help you with the css to move everything around so it is positioned the way it looks now, but with the logo not in your sidebar.

    Just got home and have to unpack. I’ll be back to this thread later.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    in reply to: Align navigation with top of "logo" #33672

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Krystyn,

    There are a couple of ways you could do this.  One would be to re-position the main nav to be within the #inner div.

    Another would be to apply “position:relative” and a negative “top” value to the #sidebar rule.  If you do this, be sure to remove the “overflow:hidden” rule from the #inner.

    Please let me know if you need more specific help with this.

    Hard Boiled Greg


    Website: Hard Boiled Greg Twitter: @hbgreg

Viewing 15 posts - 1 through 15 (of 100 total)