Secondary header bar for Unite WordPress theme

I hope I am not being dense here :smiley: I have wasted two days trying to do this :frowning: (I am self taught)

I am trying to create a section headers similar to the ones on this page ullewaeh.de/ueber-ullewaeh

I want the headers to extend to the edge of the white area on my page, which I believe id <div id=“content” class=“site-content container”>, not just centred on the page as I have here sentaria.co.uk/test-page-2/

I do not want them on all my pages just a select few.

Any help gratefully recieved

Michael

Michael,

I think that you might want to check some Visual Pae builder or something even simpler such as these shortcodes that we are using on our theme demo.

Otherwise you will have to learn some basic CSS and HTML. I can recommend courses from Treehouse that I used myself to learn coding.

Aigars

As always, thank you for your quick response, my problem is I don’t work on the web site all the time, I forget how to do things lol

I have easy bootstrap plugin installed, but still cannot get a bar to cover the whole container :frowning:

If I use a visual page builder, will it mess up your unite theme? Which excellent by the way.

When I am happy with the pages I have, I would like to add woocommerce, which is why I chose this theme in the first place.

Which courses do you feel I would benefit from?

Thanks again.

Michael

Visual Page builder won’t cause any issues with this theme as it is just a plugin.

Any HTML and CSS course will help to create custom layout for your website. It is always better to get through as many video tutorials as possible to get the basics in place. There is no one “best” course as it always comes down to how you will use your knowledge in the future.

I started the same way by learning HTML and CSS on my own and moved to PHP and JavaScript when I felt that I am read for that.

“Any HTML and CSS course will help to create custom layout for your website.”

Do you mean creating a custom layout within the Unite theme, or starting from scratch?

I thought starting from scratch would benefit me, as I would know each step of the theme I had created. I have watched a couple of tuts on starting from scratch, but thought I might have trouble integrating woocommerce?

Then there is the issue of making it responsive???

By that I mean a layout for pages/posts within Unite theme. To create your own theme you will have to learn some PHP as well but it will take months to get started on that. HTML/CSS is much easier and will take few weeks to learn enough to create and style different elements the way you want them.

Responsiveness is another thing that you should keep in mind but most courses does cover this part as well as all websites and themes are responsive and mobile-friendly.

Thanks Aigars

I will persevere with Unite, learning as I go.

I think I have discovered my issue, using firebug, I have discovered box-sizing:

<div id=“content” class=“site-content container”>
<div id=“primary” class=“content-area col-sm-12 col-md-12”>

Try as I might, I cannot get the div primary to resize to the dive content, the css for it says:

*::after, *::before {
box-sizing: border-box;
}
*::after, *::before {
box-sizing: border-box;

I have tried inherit and content.

If you can help me with this I will stop bothering you, at least for the time being :smiley:

http://sentaria.co.uk/multi-sensory-rooms/

box-sizing: border-box; means that borders are not counted on top of element size but they are already included in the size.

For example this box is going to be 50px in size:

.box {
    box-sizing: border-box;
    width: 50px;
    border: 5px solid red;
    float: left;
}

This example will get 60px wide box because 50px for box itself and 5px border on each side.

.box {
    box-sizing: table-box;
    width: 50px;
    border: 5px solid red;
    float: left;
}

border-box is really useful in responsive design where you need to make sure when elements are moved on a new line and when they are ket side by side.

Sorry for the delay in coming back to you, I see what you are saying and I understand to some extent, my issue is that I cannot get the the box to go to the edge of the white area?

sentaria.co.uk/test-page-2/

I can see it is a div within a div, how do I get the box to span the width of the <div class=“entry-content”>?

Thanking you again.