By 56rosa on

Hello,

I cannot find where to change or modify the top row of the header. I have a local.css file saved as it is explained.

Here's the coding:

/* Header Top */

.header-top {
background-color: #ffffff; When I add this paragraph, there's no white color appearing anywhere.
}

.header-top-wrapper {
float: left;
min-height: 32px;
background-color: #ffcb05; But, I have like a yellow line appearing when I insert the paragraph above this one here.
}

.header-top {
overflow: visible;
position: relative;
}

If I take off the first paragraph, I have only the gray color appearing. So, it's strange.

I only need to figure out that bit. And I have been trying quite a lot. If someone could tell me where exactly it is. It would be great.

Thanks very much

⋅ Categories: Drupal 6.x

Comments

yuriy.babenko’s picture

yuriy.babenko commented

Do you have a link to the site that we can take a look at?

If you're using Firefox, have a look at the Firebug addon - it will make working with CSS (and finding the CSS rules you want to modify) a lot easier.

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

56rosa’s picture

56rosa commented

How can I attach a screenshot on this forum please?

mjohnq3’s picture

mjohnq3 commented

It looks like it's header-group-wrapper:

.header-group-wrapper {
  background: #383838;
}
56rosa’s picture

56rosa commented

Hello mjohnq3,

I have tried this several times but it doesn't work. I mean that it is changing the part below the one I want to change! It is the .header-top or .header-top-wrapper I think. But for some reasons, it doesn't change the part I want.

How can we include an image in the comment please? I could show you how it looks like.

mjohnq3’s picture

mjohnq3 commented

I don't know of any way to attach images here in the forums.

56rosa’s picture

56rosa commented

I'm working on a local host so it's pointless that I insert a link.

mjohnq3’s picture

mjohnq3 commented

It looks like you want a white center section with yellow sidebars, is that correct?

mjohnq3’s picture

mjohnq3 commented

If I do this:

.header-top {
  background: #ffffff;
  overflow: visible;
  position: relative;
}

.header-top-wrapper {
  float: left;
  min-height: 32px;
  background: #ffcb05;
}

I get a White center section with Yellow-ish sidebars. Is that what you're trying to get?

56rosa’s picture

56rosa commented

Thanks VERY MUCH! Yes, that's what I was trying to do. But for some reason, it wasn't working before. Was I supposed to enter the background color before the overflow and position then? Or was I supposed to have the .header-top paragraph before the .header-top-wrapper?

Anyway, thanks a lot. You see... I'm just trying to understand where everything is, in order to see if I can style it that way handy enough. Instead of creating a full theme from scratch ( which I'd love to of course! But I shall see about that!)

May be I had made too many changes in one day as well, and the system didn't understand. I had deleted everything to start again so much I couldn't get that bit to work.

So, that's good. I have managed more or less to see where each section is in the css which is a first step!

mjohnq3’s picture

mjohnq3 commented

Glad I could help. I just happened to playing around with Prosper and Fusion recently.

I think the position of the selectors (header-top and header-top-wrapper) is important. The position of the properties within is not so much, at least in this case. Most people put them in alphabetical order to make the code easier to read.

Experimenting with small parts of the code usually works best and sometimes you do need to rip up what you've done and start all over.

56rosa’s picture

56rosa commented

Ok I see. Yes, I'm glad that I finally found that section because I was starting to go mad! Besides, where do you change the inside of the buttons? I don't want them to be simple links. Do I need to change anything in the css of the fusion starter and fusion core or is it enough to modify the primary links in the local.css? Just asking since you seem to know well Acquia Prosper...

Thanks again

couturier’s picture

couturier commented

The Acquia Prosper Theme's Header and Primary Menu Bar colors are controlled by Fireworks PNG Images in the Images folder of the Design Packs. These are bitmap images, so they can only be changed using the bitmap tools such as the brush (NOT the vector tools) in Fireworks. Of course, you can always switch to the Blue Design Pack if you like the Blue look better. You change this in the .info file. It works better to save the images in PNG 32 (rather than PNG 8 which is what the original solid colors utilize). Be sure to use the "Export" option rather than "Save" to prepare files for FTP to your server. "Export" results in a far smaller file size. "Image Preview" will help you see the difference in file sizes. I've been working for weeks to customize this theme, and I intend to write up a more detailed report of how to do this when I have time. Below is a copy of some of the most important lines from my CSS file that I named "Pink" with comments about what CSS code controls which elements. Also, I created a new design pack and redirected this in my .info file because trying to use local.css didn't allow all the images to load properly. I made a number of changes in a typography file, too, and will write about those later when I have time. I hope this helps you out immediately.

/* $Id: pink.css,v 1.1.2.1 2010/01/11 00:09:05 sociotech Exp $ */

/* Basic Typography & Colors
-------------------------------------------------------------- */

/* This controls color in a section of the footer area */
html {
background: #ffccff;
}

body {
background: #fbf5ff;
}

/* Links */
a:link {
color: 0000cc;
}

a:visited {
color: #551a8b;
}

a:hover,
a:focus,
a:active {
color: #0000cc;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #535353;
}

/* HTML Elements
-------------------------------------------------------------- */
/* Lists */
ul li {
list-style-image: url(images/list-level-1.png);
}

ul li ul li {
list-style-image: url(images/list-level-2.png);
}

ul li ul li ul li {
list-style-image: url(images/list-level-3.png);
}

/* Blockquotes */
blockquote {
background: #ececec url(images/blockquote-quote.png) no-repeat 8px 8px;
border-top: 1px solid #d8d8d8;
color: #6a6a6a;
}

/* Site Info
-------------------------------------------------------------- */
#site-name a:link,
#site-name a:visited {
color: #000;
}

#slogan {
color: #000;
}

/* Header Regions
-------------------------------------------------------------- */
/* Header Group */
.header-group-wrapper {
background: #ffccff url(images/pink-header.png) repeat-x top left;
}

.header-group-wrapper a:link,
.header-group-wrapper a:visited {
color: #0000cc;
}

/* Header Top */
.header-top-wrapper {
background: #ffccff url(images/secondary-menu-bg.png) repeat-x top left;
}

/* Header top region */
.header-top-region {
color: #ffccff;
}

.header-top-region a:link,
.header-top-region a:visited,
.header-top-region a:hover,
.header-top-region a:focus {
color: #0000cc;
}

/* Header Wrapper controls text color of search this site box */
.header-group .inner {
color: #535353;
}

/* Header Regions - Secondary menu
-------------------------------------------------------------- */
.secondary-menu-inner ul.links li a:link,
.secondary-menu-inner ul.links li a:visited {
border-left: none;
color: #0000cc;
}

.secondary-menu-inner ul.links li.last a {
border-right: none;
}

.secondary-menu-inner ul.links li a:hover,
.secondary-menu-inner ul.links li a:focus {
background: #fff;
}

.secondary-menu-inner ul.links li a.active {
background: #fff;
}

/* Header Regions - Search
-------------------------------------------------------------- */
.search-box-inner form#search-theme-form {
background: url(images/search-bg.png) no-repeat top center;
}

.search-box-inner input#edit-search-theme-form-header {
background: none;
color: #333;
}

/* Postscript & Footer Regions
-------------------------------------------------------------- */

/* This controls the color of the top footer area */
.postscript-bottom-wrapper {
background: #ffccff;
color: #343434;
}

.postscript-bottom h2.block-title,
.footer-message-wrapper h2.block-title {
color: #000;
}

/* The following two classes were combined, but I separated them to allow a different link and hover color */
.postscript-bottom a:link {
color: #000;
}

.postscript-bottom a:hover {
color: #0000cc;
}

.footer-message a:hover {
color: #0000cc;
}

.postscript-bottom a:visited {
color: #000;
}

/* This is a border at the top of the footer area */
.footer-wrapper {
border-top: none;
}

.footer-wrapper,
.footer-message-wrapper,
.store-footer,
.footer-wrapper h2.block-title {
color: #000;
}

/* This controls color between the first footer above and the html background color below */
.footer-wrapper,
.footer-message-wrapper {
background: #ffccff;
}

/* This controls link text color below the upper footer area */
.footer-message a:link,
.footer-message a:visited,
.footer a:link,
.footer a:visited {
color: #000;
}

#store-footer {
background: #343434;
}

#store-footer a:link,
#store-footer a:visited {
color: #0000cc;
}

#store-footer {
color: #727171;
}

/* Primary Menu
/-------------------------------------------------------------- */
.header-primary-menu-wrapper {
background: #ffccff url(images/primary-menu-bg.png) repeat-x top left;
border-bottom: none;
border-top: none;
}

/* visited pseudo selector so IE6 applies text colour - this controls the side borders of link blocks and the main text in the bar menu prior to hover and active */
.primary-menu-inner ul.menu li a:link,
.primary-menu-inner ul.menu li a:visited {
border-left: 1px solid #ffb4ff;
color: #000;
}

/* styles for standard and Superfish primary menu */
.primary-menu-inner ul.menu li a:focus,
.primary-menu-inner ul.menu li a:hover,
.primary-menu-inner ul.menu li:hover a,
.primary-menu-inner ul.menu li.hover a,
.primary-menu-inner ul.menu li.active-trail a,
.primary-menu-inner ul.sf-menu li a:hover,
.primary-menu-inner ul.sf-menu li:hover a,
.primary-menu-inner ul.sf-menu li.hover a {
background: #ffebff;
color: #000;
}

.primary-menu-inner ul.menu li.active-trail a.active {
color: #000;
}

.primary-menu-inner ul li.last a,
.primary-menu-inner ul.sf-menu li.last {
border-right: 1px solid #ffb4ff;
}

/* 2nd Level */
.primary-menu-inner ul.sf-menu li ul {
background: #ffebff;
border-left: 1px solid #dadada;
}

/* This controls the dropdown from primary menu */
.primary-menu-inner ul.sf-menu li ul.menu {
border-bottom: 5px solid #939393;
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}

.primary-menu-inner ul.sf-menu li ul.menu li {
border-bottom: 1px solid #dcdcdc;
}

.primary-menu-inner ul.sf-menu ul li.last {
border-right: none;
}

.primary-menu-inner ul.sf-menu li ul.menu a:link,
.primary-menu-inner ul.sf-menu li ul.menu a:visited {
border-left: none;
color: #000;
}

.primary-menu-inner ul.sf-menu li:hover ul li a:link,
.primary-menu-inner ul.sf-menu li:hover ul li a:visited,
.primary-menu-inner ul.sf-menu li.hover ul li a:link,
.primary-menu-inner ul.sf-menu li.hover ul li a:visited {
color: #000;
}

.primary-menu-inner ul.sf-menu li.last a:link,
.primary-menu-inner ul.sf-menu li.last a:visited,
.primary-menu-inner ul.sf-menu li.last ul li a:link,
.primary-menu-inner ul.sf-menu li.last ul li a:visited {
border-right: none;
}

.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:visited {
background: #ffebff;
color: #343434;
}

.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:focus,
.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:hover {
background: #fff;
color: #343434;
}

LEFT OUT UNCHANGED MATERIAL HERE TO SAVE SPACE ON THIS POST

/* Gray Rounded - Plain */
.prosper-gray-rounded-plain .content {
background: #fff;
border-bottom: 2px solid #bfbfbf;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
color: #686868;
}

/* Next two items were together, but I separated to add a visited link color */
.prosper-gray-rounded-plain a:link {
color: 0000cc;
}

.prosper-gray-rounded-plain a:visited {
color: #551a8b;
}

.prosper-gray-rounded-plain a:hover,
.prosper-gray-rounded-plain a:focus,
.prosper-gray-rounded-plain a:active {
color: #0000cc;
}

.prosper-gray-rounded-plain ul.pager li.pager-current {
background-color: #fff;
}

LEFT OUT A FEW MORE LINES HERE TO SAVE SPACE ON THIS POST

/* Breadcrumbs
/-------------------------------------------------------------- */
.breadcrumbs .inner {
background: #fff;
border-bottom: 1px solid #929292;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #929292;
border-top: 1px solid #efefef;
color: #8e8e8e;
}

56rosa’s picture

56rosa commented

Hi Couturier,

Thanks A LOT for your long detailed explanation!

Which .info file are you talking about? Is it fusion-core.info file?

And I don't have Fireworks. But I want to have my own image as a background like a roll-over thing.

56rosa’s picture

56rosa commented

Hello,

I have tried to study your css coding above. And like you say, my images aren't loading properly. I think that I may need to create another design-pack file as well.

How do you name this file then, and where do you place it please?

As well, I wanted to play around to get the blue design to work. Then, it wasn't working for a while, then it worked. But I wanted to go back to the gray design, and it wouldn't work. So, I decided to delete Fusion themes files altogether from my sites/all/themes

I re-downloaded it. But now, I had selected the Fusion Starter Lite for themes, just to try out. And it was working, but now, it's showing the gray-design. And I did not touch anything in the meantime. On the other site, it shows well the Starter Lite, and I can change themes for ex Garland, and it's picking up fine. But when I'm changing themes for the other site, it doesn't show it. It just shows the gray design. Weird! I didn't expect that one, I must say... Any idea why this is happening!

Thanks

couturier’s picture

couturier commented

Hi 56rosa, I just replied to you through your account contact form to email me and I will give you all the customized files I've been working on that will help you see what I've done. As soon as I have time, I'm planning to write a handbook entry for customizing the Acquia Prosper theme, as I don't see much other documentation on it.

Dubber Dan’s picture

Dubber Dan commented

great info, thanks

claning’s picture

claning commented

Yes, couturier, please do!

couturier’s picture

couturier commented

Hi Acquia Prosper Theme Users,

Read the above posts to see my replies (from "couturier") for more instructions for customizing this theme.

I've been getting several requests for the customized files I've used for the Acquia Prosper Theme, so I'm going to go ahead and post them at my site, www.fashionbelle.com/careers/customizing-acquia-prosper-theme for you to download. Please be considerate of the brand colors I've chosen and customize the files for your own needs rather than using my colors exactly as shown (I'm guessing not many of you will want pink, anyway). Also note that I've done quite a bit of re-arranging of the primary menu CSS to eliminate extra border spacing, which you may not want to do. So, it would be best if you start with your own design pack, coping the Gray for the most neutral base of colors (but borrowing only the menu images from BLUE if you want color menu bar backgrounds), using the instructions I've written above in these posts. Again, I'd love to do a full handbook entry on this, maybe in January 2011 when I get a break with the development of my business. Would be super nice if Fusion Drupal Themes would give us their own documentation on this tricky-to-customize theme. The theme functions perfectly, but you'll have to be willing to spend time on the customization if you want your own colors. Remember, use bitmap tools on the menu bar images to create gradient colors, and soften them out with several repetitions of the gradient blur filter in Adobe Fireworks.

56rosa’s picture

56rosa commented

Thanks a lot. I'm getting back into this again.

couturier’s picture

couturier commented

Just to clarify, the CSS and Typography files at my site include my added comments in the code to identify which lines control which elements of the theme, information that will save developers hours of searching. Be sure to see these files if you are using the Acquia Prosper Theme.

www.fashionbelle.com/careers/customizing-acquia-prosper-theme

If needed, this page may also be accessed by clicking on the "Powered by Drupal" icon in the footer of the site.

renat_m’s picture

renat_m commented

(Acquia Prosper)
hi everyone,
When I write in any block any html table,

example:

555 555
555 555
555 555

it comes with a gray line at the top of the table (1px). I can not find a css style which is responsible for this, please help me find a solution for that would remove this line. Thank you.

I found the solution! thank you very much firebug! if you have same problem, you need see /modules/system/defaults.css

}
table {
border-collapse: collapsed;
}

change on
}
table {
border-collapse: none;
}