How to properly create a logo that fits correctly in the header bar

Events happening in the community are now at Drupal community events on www.drupal.org.
kpalaniuk's picture

Hi all!

I have seen many of your sites using the acquia slate theme and am quite impressed. I can only home soon that mine will look so impressive. especially on the site Cornerstone Gospel.

Thanks!

~Kyle

Comments

I got it to fit by making my

wretched sinner - saved by grace's picture

I got it to fit by making my logo the same physical size as the logo that was supplied with the theme. I had no end of trouble trying to get a larger logo in and keeping everything together. Having said that, I am not a CSS guru by any stretch of the imagination!

Soli Deo Gloria

Jerome
cgc.org.au

Here is what I did. In the

DarrinRich's picture

Here is what I did. In the Style.css file around line 325 I edited the #header-wrapper. Play around with the numbers to get it to align properly

#header-wrapper {
  background: #fff url('images/header.png') no-repeat left top;
  height: 55px;
  margin-bottom: 25px;
  overflow: hidden;
  padding: 2px 20px 32px 5px;
  position: relative;
}

Seemed the easiest for me. I kept adjusting the numbers and refreshing until it looked the way I wanted.

Very helpful :-)

Jonathan.m-1's picture

Thanks for sharing Darrin

Need Help....Please

jggarley's picture

I'm a newbabe and I have seen many of the sites using the Acquia Slate theme and they look beautiful and good. One of these site is the Cornerstone Gospel located at http://cgc.org.au/. The place of the login form and most important how the "Our weekly events are:" located right under the search box are placed. Can someone please show me how to get these two things? I'm more concern with the display of the shadow menu items like the follow on the Cornerstone Gospel site. What do I need to enable to get it display as on that site? My site is located at http://www.district-a-development.com/

Welcome to CGC

Our weekly events are:

Sunday

10:30am — Worship Service
6:00pm — Gospel Service
9:00pm — Impact Radio Show

Tuesday
.......

Thanks
Julu

Use a block

wretched sinner - saved by grace's picture

The Weekly Events section is simply a block which is placed into the Front Preface Sidebar region of the theme. This only shows on the front page.

I can't get at my CSS now to let you know how I set the login block to the right (adding it to the header top region does most of the work), but I can post that later if you still want, or use FireBug on the page to get the information too.

CSS to right-align Login Block

wretched sinner - saved by grace's picture

Assuming that you have placed the user login block in the header top region, the adding the following to your local.css will right align it:

/* User Links in Header Top */

#header-top #block-menu-menu-user-links ul {
    float: right;
}

#header-top #block-menu-menu-user-links ul li {
    background: transparent none repeat;
    display: inline;
    float: left;
    font-size: 85%;
    padding-left: 5px;
}

#header-top #block-menu-menu-user-links ul li a ,
#header-top #block-menu-menu-user-links ul li a:link ,
#header-top #block-menu-menu-user-links ul li a:visited {
    color: #DFB77C;
    font-weight: normal;
}

HTH

Soli Deo Gloria

Jerome

If I remember correctly it's

tommyent's picture

If I remember correctly it's a block for weekly events.

I also want to believe that

jggarley's picture

I also want to believe that it's a block but just don't know how to go about it so that it display as shown in the Cornerstone Gospel..
Jerome Brown - how did you get this done on your church website?

Yes, it's a block

wretched sinner - saved by grace's picture

As mentioned by other posters, I have set up the Weekly Events by creating a new block, which is then placed into the Front Preface Sidebar region. You can enter all the markup you need in the block page.

Thank you very Jerome Brown

jggarley's picture

Thank you very Jerome Brown much and everyone for your help. I was able to do exactly just that. Really appreciate it.

One more problem - It has come up that we don't want the "front preface sidebar" and also the big banner image on which the mission statement is placed is too long. What I want to do is make the width like 715px instead of the default width of 960px and has it float to the right and has the Navigation push up replacing the front preface sidebar position. I want it to be like the attached image.

The dev site is located at District-A Dev

Thanks for your help.
Julu

It is really quite easy to

websesame's picture

It is really quite easy to if you know how to edit the css files. If you haven't sorted this yet email me

I see that you have moved

websesame's picture

I see that you have moved the Navigation part up . You can change the overall width by altering the following around line 297 of your theme's style.css:
width: 715px;

This will of course make the main content area quite small so you might need to reduce the width of the sidebars. Adjust this around line 628 to your preferred width.

Just locate style css in the theme folder make adjustment and upload. That should do the trick

Hey

jggarley's picture

Hey Websesame,

Unfortunately, this is not working the way I want it to be. I tried editing the style.css and I got everything working except moving up the left navigation. Now I want to remove that empty black space from the left side bar...I know this might seem easy to you but it's frustrating me. Please take a look at the site again and see what I'm talking about.

Thanks,

Julu

Move your navigation up

Tanisha's picture

You can accomplish what you want with the navigation by duplicating the menu so that you have another instance of it available to your blocks. Set the new block to the front preface sidebar area and with your overall site navigation that is in the right sidebar configure it so that it does not show on the front page. You will then have navigation where you want it without having to mess too much with the theme's files. It looks like you may have already removed the black box I'm assuming that is the box for the preface sidebar. If not, you can disable it by going into your css file and either overriding the background to none if you have a custom css file or going into style.css and around line 405 editing the background there. I hope this helps you get what you're expecting to see. I've enjoyed working with this theme and seeing what others are doing with it.

Tanisha

Tanisha, I will take a look

jggarley's picture

Tanisha, I will take a look at it today and follow the steps as outlined. Will let you know the outcome!

TNT Themes

Group organizers

Group categories

Type of post

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: