Add DIV to header + customise Woocommerce login « Support Forum | Kriesi.at

Support Forum » Flashlight

Add DIV to header + customise Woocommerce login

5 posts from 3 voices

Started 9 months ago by thewerkhaus
Latest reply from Devin
This topic is not a support question

Tags:

thewerkhaus
Member

Hi there,

Ok, so there are two parts to this question, hope they're not too complex!

I'd like to add a simple div to the header, just a white bar with a logo in it. Sounds easy enough, I hope?

But, I'd also like to add the Woocommerce login into this div, and I will hopefully be able to style the CSS of this to make it look how I want it to.

This is a mocked up image (just badly photoshopped in what I need at the top there onto my existing page) - http://imgur.com/JmXiY

Can anyone help me with this? Thank you so much!

James

Posted 9 months ago #
Ismael
Moderator
Hello,

I think you can edit header.php and find this code.
```
<div class='container_wrap' id='header'>
			sdfsfds
			</div>
```
Insert the logo there and the woocommerce login then style it on your custom.css, just adjust the style as you see fit.
```
#header {
background: white;
height: 100px;
margin-bottom: 50px;
margin-top: 50px;
}
```
Regards,
Ismael
Posted 9 months ago #
thewerkhaus
Member

Awesome, thanks for that. What exactly do I need to insert into the header on the Woocommerce side though? (the link to the widget?)

Sorry, I have no idea on what code to insert here...

Posted 9 months ago #
thewerkhaus
Member

Nevermind, think I worked around it. BUT, was wondering if I could find out how to style the widget so it appears more horizontally so it fits into the top bar? Also, I tried to fix it's position in CSS but it's not staying in place...

Site can be seen here: http://pet.thewerkhaus.com , you'll see what I mean.

Thank you!

Posted 9 months ago #
Devin
Moderator

Hi thewerkhaus,

You'll need to use something like Firebug for Firefox or Chrome/Safari's Inspect element to identify what css needs to be changed for that specific widget. You can begin each new rule with:
#woocommerce_login-8

followed by the class names so that you are only targeting that single widget and then style it as you need. Unfortunately we aren't able to get into individual design and customization at that level through support.

Regards,

Devin

Posted 9 months ago #