Solved

Drupal css header

Posted on 2010-09-13
10
623 Views
Last Modified: 2012-05-10
We are thinking about switching our website over to Drupal. I have found a theme that I would like to use but the original header image is to small, so I have uplpaded the image from our current site but the way the css is set up the display and menu bars don't display correctly.

I'm guessing it has some thing to do with the css. I don't really know that much about css as I'm still learning. Is there a way to easily fix the header problem??

http://qgprocurement.com/drupal/

I would like the image along the top of the page with the black menu bar under it. I used to using tables and HTML
0
Comment
Question by:QGolden
  • 4
  • 4
  • 2
10 Comments
 
LVL 17

Expert Comment

by:Thomas4019
Comment Utility
CSS is the future and isn't going away, so dedicating some time to studying it will go very far.

First check the theme's settings to see if there is an option there.

Easiest solution, open up paint/photoshop/gimp and change/resize your logo.

The CSS rules are a little tricky to change the header's height. Open up each of themes css files and look for documentation.
0
 

Expert Comment

by:web2developer
Comment Utility
Size of your current logo image is 844px × 216px. So as per  dimension of your logo replace css code of your Pixture_reloaded theme's layout.css with following attached code (Code SnippetSnippet ID=1040747)-



#header {
  margin: 0 0 15px 0;
  padding: 0;
  height: 256px;
}
#logo {
  margin: 0 10px 0 0;
  padding: 0;
  height: 244px;
  float: left;
  overflow: hidden;
}
#head-elements {
position:absolute;
left:100px;
top:20px;
z-index:1;
}

Open in new window

0
 

Author Comment

by:QGolden
Comment Utility
web2developer:
The above code displays the full image but it messes up the rest of the page. The black header menu bar is hidden behind the image, the menu options seem to be in the right place but can't really see them, the page contents is shifted to the right of the page.

Thomas4019
I was hoping to use the same image as our current site but doesn't look likes that possible. I am planning to learn css very soon. css and Drupal seems very complex as it uses more than 1 style sheet, do most site use multipliable sheets ??
0
 
LVL 17

Expert Comment

by:Thomas4019
Comment Utility
I am sure it's possible to do what you want if you know enough CSS. Modifying an existing theme can be very complicated, as you said. Some Drupal themes use just 1-3 stylesheets while others go overboard with way to many around 10-20. It's normal for a site to have 1-5 CSS sheets. Drupal has an item to combine CSS stylesheets before sending them to the client, called "CSS Aggregation". This is a must for performance.

Tools like firebug help when working with complicated themes. GetFirebug.com
0
 
LVL 17

Expert Comment

by:Thomas4019
Comment Utility
If you're new to Drupal picking an good easy starting theme is essential. Maybe look for a theme that is more accommodating with large banners.

Really, I think you could just shrink you banner by 150% and then it would fit well.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:QGolden
Comment Utility
Thanks. I have checked out other themes and on some you can set the logo size so that it fits but I'm finding it hard to center the image, it's either left or right no middle.

I'm having a hard time getting my head around css and Drupal but I'll keep at it.
0
 
LVL 17

Expert Comment

by:Thomas4019
Comment Utility
Centering things should be easy with CSS.

Just keep studying, it will make perfect sense soon enough.
#id-of-header-element {

   text-align:center;

}

Open in new window

0
 

Expert Comment

by:web2developer
Comment Utility
@QGolden: try to alter my code with this
#header {
  margin: 0 0 15px 0;
  padding: 0;
  height: 256px;
}
#logo {
  margin: 0 10px 0 0;
  padding: 0;
  height: 244px;
  float: left;
  overflow: hidden;
}
#head-elements {
position:absolute;
left:100px;
top:244px;
z-index:1;
}

Open in new window

0
 

Accepted Solution

by:
QGolden earned 0 total points
Comment Utility
Unfortunately that code didn't seem to work either. I am looking for a new theme that will better suit the logo header as my css knowledge is limited and editing the theme at this time is to time consuming.

Thanks for the help and suggestion
home-page.png
0
 

Author Closing Comment

by:QGolden
Comment Utility
Used a different theme
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now