Centering Header Widget

Hi Trampolini,

realy cool username by the way ??

The widget is pushed on the right because of the float rule of the image right below it.

What you can do is put the widget emplacement before the “Watch Parties” image, if you want it above the logo.

Cheers

Well centering it is easy here’s the CSS code i wrote :

#text-3 {
position: absolute;
top: 100px;
left: 40%;
}

Please make the appropriate changes to suit your needs, and note that it will overflow on
the small screens.

Here you go:

https://www.dropbox.com/s/2o0ucetzqc071ee/Screenshot%202014-08-01%2013.39.37.png

.innerwrap { align:center!important }
#siteinfo { width:100%!important }
#siteinfo a { display:inline-block!important }

I’m using important as a shortcut, but ideally you’d work those off over time.

try add this to theme option->custom css

#header .widget {float:left;width:100%;text-align:center;}
#header #siteinfo {float:left;width:100%;text-align:center;}
#header #siteinfo img {float:none;}

Thanks everybody.

I have tried to center the header and that worked, but I think I have explained what I’m trying to do poorly. I have created a mockup of what I would like the header to look like:

https://docs.google.com/drawings/d/12SfgSc1N2AQw3VciOseTb-qeZnhOq9s9mjzvBz5t5N0/edit

Does anyone have ideas on how to achieve this look? I guess I would need to create one html code that would include the logo, text and buttons (links) across the top. Is that right? If so, where do I put the html code?

Thanks so much for your replies!

that’s a different kind of style than you original asked. anyway remove all previous edit to css and use the theme option->ads setting->top banner code instead for html insertion. try add this

<div class="topheadercustom">
<div class="boxone">Lore ipsum text...</div>
<div class="boxtwo"><p><a href="#">link1</a></p><p><a href="#">link2</a></p></div>
</div>

and add this to theme option->custom css

.topbannercustom { width:728px;float:right; }
.topbannercustom .box-one { width:69%;float:left;font-size:20px;color:#000; }
.topbannercustom .boxtwo { width:30%;float:right;font-size:14px; }
.topbannercustom .boxtwo p {display:block;clear:both;margin:0 0 1em;}
.topbannercustom .boxtwo p a { color:#cc0000; }