Kubrick Header Redesign (project)

  • Resolved niko82

    (@niko82)


    15 years, 4 months ago

    Hi All,

    First post. Humour me.

    I’ve been hired to build a website for a local arts council. And I’ve chosen to use wordpress. I’m beginning with design stuff, and I’m just going to make a few tweaks to the Kubrick template, because this already does most everything I need.

    I’m starting to get my hands dirty with php and slowly learning the ins and outs of this theme.

    So here’s my project:

    I want to redesign the Kubrick header to look something like the header on this website: https://www.magical-secrets.com/

    This is not my website, I just like the design of this site.

    So what I see that needs to be done, is there needs to be space created above the header (margins?), and a horizontal nav bar that lists pages needs to be inserted there.

    Can anyone help me out with this project?

    My site is not live yet so I can’t provide a url, but since I’m customizing the Kubrick theme we can all work from the same page right?

    Tremendous tahnks to anyone who wants to help me tackle this.

Viewing 3 replies - 1 through 3 (of 3 total)

  • that’s sort of a big project to tackle. Good on you for your willingness to do so.

    The first place you’ll want to look is here: https://codex.www.ads-software.com/Theme_Development

    You might also want to have a look at the Themeforest Blog, where ace designer/developer Drew Davidson has been working on a really awesome WordPress for Designers tutorial video series.

    But, the thing you’ll need to do first off is probably just edit the header.php file in Kubrick to use wp_list_pages() at the top.

    How much HTML/CSS/PHP/JS do you know? What’s your skill level?

    Thread Starter niko82

    (@niko82)

    Ok, thanks for the head start, the quick reply, the willingness to begin this, and the helpful link (themeForest; great site!)

    Yeah, I have got as far as using wp_list_pages() at the top. I read through the codex entry on creating horizontal menus and I was able to add a navmenu across the top.

    In the process I learned about using html divisions (ie.the <div> tag) to create a new item (i.e. #navmenu) in the php files that one can refer to in the stylesheet.

    I am now tweaking this to begin to get the look I’m after.

    I found that when I inserted this horizontal nav menu there was a gap between the header image and the horizontal menu, so I edited the Kubrick header image to remove the border across the top and extend the white space to meet the nav menu. (Is that clear?)

    I think I’m getting there.

    My HTML is decent, css and php are passable, but I’m a quick learner and google is a good teacher.

    Now that you have an idea of the progress I’m making, If you have any tips on how I could do this easier or cleaner, I’m all ears.

    Sounds like you’ve done pretty much exactly what I would have. Nice job. If you run into any trouble or have any questions, feel free to ask.

    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Kubrick Header Redesign (project)’ is closed to new replies.