Support » Themes and Templates » Creating a thin horizontal band using an image & html/CSS

  • Resolved andreasandrews

    (@andreasandrews)



    Hi,

    I’m posed with the issue of today adding a thin horizontal band to match the one found separating the content modules and under the navigation header on these two sites:

    http://www.bravurelifestyles.com
    http://www.liquidprintfactory.com

    I’m currently attempting to add this to the following (temporary) location/site:

    http://www.aatek.co.uk/caepost2

    This is using the WooThemes theme ‘Resort’ and I’ve created a child theme to work on.

    I have a basic, but very limited understanding and ability to code in html/css as well as little experience customising themes so you can’t go wrong by covering all basics if you have time to help me acheive this, or alternatively just posting a quick solution.

    I’ve found the code relating to the coloured band using property inspector:

    <div class="lpf_band"></div>

    and also the CSS rule:

    .lpf_band {
    	background: #fff url(//www.liquidprintfactory.com/wp-content/themes/liquidprintfactory-v1/assets/css/../img/lpf_bar_flipped2.png);
    	height: 1em;
    }

    I’m not sure how to implement this across the new site in terms of how to create the relevant child theme (template?) files so I can properly implement this (whilst also being able to update WordPress – I’m not so bothered about updating the theme at all, but I’ll use a child theme as a best practice, although I’ll resort to modifying the files if all else fails)

    I’m hoping to get this in place ASAP, and really appreciate any help you can give, even if you’re not entirely sure but have some ideas for me to try out, or even good learning resources to expand my knowledge of customising themes.

    additionally: I can add custom CSS code into the WooThemes framework (although I’m comfortable also adding CSS into a custom styles file) as well as adding the relevant image (.png file) and referencing that however I’m not sure about how and where to add the div code into the template files so that it properly appears where I’d like it to across the website, or at least on the homepage.

    Many thanks!

Viewing 1 replies (of 1 total)
  • Update:

    In case anyone else wants to know my solution for this, I managed to get it working by creating a child theme, copying the footer.php and header.php files over, and adding the div tag to call the CSS style rule which I added into custom styles (overide). It’s quite easy when you know how, well I hope if nothing else my first post here on the WordPress forum is of use to someone.

    Further info to get things looking OK was using the property inspector to visualise the changing of padding on the sticky header so the coloured band/stripe fitted correctly and cleanly.

    It did involve a little bit of trial and error, but I think that my method of working is clean, allows for updates to WordPress and also the (parent) theme without any potential future issues.

Viewing 1 replies (of 1 total)
  • The topic ‘Creating a thin horizontal band using an image & html/CSS’ is closed to new replies.