Sela Theme – header & grid

  • Hello,
    I am a newbe to this kind of stuff. I try build my own book blog. I use the Sela-Theme with no real changes and only little added.

    First I am sorry that I can’t provide you any link to my site because at the moment I have only done things local via xampp.

    I have two issues:

    1) I’ve added a picture to my header. Now I want to reduce the gap between my site-title and the picture but everytime I do so the sitle-title vanish below the picture.

    Header

    red – picture; blue – sitle title and site description (site description half vanished)

    I’ve added this to header.htp

    <div class=”site-branding-exp-bar”>
    ” rel=”home”>
    <img src=”<?php bloginfo( ‘template_directory’ ); ?>/images/EP-Balken.jpg” alt=”<?php bloginfo(‘name’); ?>” />
    </div><!– .site-branding-exp-bar –>

    and this to css

    .site-branding-exp-bar img {
    maxwidth: 100%;
    height: 7em;
    }

    2) This one is bit more tricky. As you see in the picture below I want to have some sort of fixed repeative grid on one of my sites for utility reasons.

    Grid

    At the start I tried to do it with wordpress writing tool but there is no way that it will be like I want to have it. So it seems I have to do it in html and css.

    I hope maybe you can give me some kind of basic structure to build this and tell me where to put it. As you see I want to put in some pictures (with links to the appropriated posts) and text.

    I hope you can help me a little. I am also thankful for every other advise.

    Zhap

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi Zhap! It’s quite tricky to diagnose this sort of thing without being able to look at your site directly. ??

    I’ve added this to header.htp

    Maybe first you could explain why you needed to edit header.php directly to hard-code an image? Sela supports a custom header that you can upload through the Customizer.

    Also, this doesn’t look right to me:

    .site-branding-exp-bar img {
maxwidth: 100%;
height: 7em;
}

    It’s max-width, not maxwidth, and I’m not sure why you’d set the height on this in em? Try removing the height completely – the image already has its own height. In fact, why not size the image how you want it, and remove these dimensions completely?

    Moderator Kathryn Presner

    (@zoonini)

    I hope maybe you can give me some kind of basic structure to build this and tell me where to put it.

    You might want to look into a plugin like Advanced Custom Fields for that. It’s designed specifically for repeating information.

    Thread Starter Zhap

    (@zhap)

    Hey, thanks for answering. Didnt expect one so fast. ^^

    Ok, let me explain which idea stood behind the picture in the header.
    I want to create some kind of evolving blog, the picture serves as the experience bar, like you have one in any level based rpg game. Content which either me or the community adds to the page will count with a fixed amount of experience. If the bar is full, the blog reaches the next level and i add a new feature to it.
    I want to count manually (or via plugin) the content and calculate the value. Then I will manually replace the picture by an other picture with a more fulled bar (for example bar shows 60% of the level to one with the bar at 80%).

    The point of adding a seperate picture is that i want to have a picture who is linked to a site and not a background.

    So.. customizer is also a plugin? Could it work with my idea? Haven’t look into it til now. I am a little busy at the moment.. exam phase of my study. ??

    I will look into Advanced Custom Fields the next days. It seems a bit more difficult than i am used to, so i have to look into the tutorials at first. ??

    Zhap

    Moderator Kathryn Presner

    (@zoonini)

    So.. customizer is also a plugin? Could it work with my idea? Haven’t look into it til now. I am a little busy at the moment.. exam phase of my study. ??

    No, the Customizer is built into WordPress, it’s under Appearance > Customizer. It allows you to make certain changes to your site while seeing a real-time preview in the right preview pane.

    Good luck with your exams and with the site!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sela Theme – header & grid’ is closed to new replies.