Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.
Solved
Drupal css header
Posted on 2010-09-13
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
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
4-
4
2
10 Comments
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.
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.
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;
}
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 ??
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 ??
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
Tools like firebug help when working with complicated themes. GetFirebug.com
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.
Really, I think you could just shrink you banner by 150% and then it would fit well.
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.
I'm having a hard time getting my head around css and Drupal but I'll keep at it.
Centering things should be easy with CSS.
Just keep studying, it will make perfect sense soon enough.
Just keep studying, it will make perfect sense soon enough.
#id-of-header-element {
text-align:center;
}
@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;
}
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
Thanks for the help and suggestion
home-page.png
Featured Post
With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form. And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types
Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month9 days, 18 hours left to enroll
722 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.