Posted by obeahman on October 20, 2009 at 2:10am
Hello to all:
Can someone please exxpalin to me in simple laymaan's language how to remove the site slogan white rectangular bar in Acquia Slate theme.
Please see attached.
Thanks in anticipation of an quick response.
Regards
O
| Attachment | Size |
|---|---|
| Slogan bar.png | 181.28 KB |
Comments
what you need to do in layman's terms
I usually get alot of help from the mozilla browser. By highligting the slogan in mozilla and right clicking "view selection source", you can determine what attributes are being used in css to make the white rectangular bar that you want to remove (look before the text for a
<
div> statement- look for its class= value
Then go to the css file that is included with the acqia theme. control-f to search and paste the class name you found in the view source above... Once located in the style sheet, you can change the background color of the site slogan bar.
I hope this gets you a little closer!
Thanks for the information
Thank you very much for the quick response.
I will try your methodology and hopefully it should work
O
Site Slogan
If you are wanting to turn off the site slogan all together, you can do that on the theme config page under Admin->Site Building->Themes. If you want to overload the style settings for that box, you should do that by creating a file called "local.css" and putting your mods in there. If you change the base "style.css" it could get overwritten when theme updates are released.
If you are having trouble finding which CSS element to work with, try using the Web Developer toolbar in Firefox. I use the Information->Display Element Information option frequently.
White rectangular bar in Aquia Slate
I have been extremely busy with other things.
Now I can get back to this problem.
By the for those who replied, thanks very much.
I have been able to figure out how to remove the white bar using firebug.
The problem that I am having is as follows:
When I click on the index.php file I get a link which is in html. I open the html file in firebug. I remove the white bar using the html editor in Firebug. I save the file to my PC. The problem is where do I put this saved file? The index.php file looks nothing like the html file. I have gone through my file system and cannot locate the index html file.
I am confused.
By the way does anyone know of a html editor which can in live mode edit your website and save the file back to the website immediately?
Please help.
O
html vs php
"When I click on the index.php file I get a link which is in html. I open the html file in firebug. I remove the white bar using the html editor in Firebug. I save the file to my PC. The problem is where do I put this saved file? The index.php file looks nothing like the html file. I have gone through my file system and cannot locate the index html file."
Are you familiar with coding PHP? Do you have a clear understanding of how PHP creates a html page?
Except for some module help pages, to my knowledge, Drupal source must be in PHP. So, you would need to change the PHP or preferably the local.css as stated elsewhere.
"The best way to predict the future is to invent it." - Alan Kay
I am not sure what or why you
I am not sure what or why you are editing it to remove that box.
Is the site currently online? I assume so due to the Cpanel in the png attachment you have a URL.
I think your going about this all wrong or I am not fully understanding.
Oh and Dreamweaver is the first and probably most well known html/ftp in one that I think of.
There are a lot of them out there. I have always done it with two separate applications though (force of habit I guess) currently I am using Filezilla and Coda on my Mac even though I have Dreamweaver. Actually I think coda will do FTP.
Check it out with Firebug the #header-wrapper in the style.css in the Aquia Slate is what you should notice.
Make sure you add any changes to the local.css
Or are you trying to remove the section entirely?
Removing the white bar
Tommyent:
Thanks for replying.
Here's the link for you to see what I mean by removing the white bar which contains the site name Iz Teremka Kennel.
http://www.izteremka.com/drupal/1.x-6.x/
There is a c panel.
Basically what I want to do is to remove the white bar and if an update is done it would not interfere and cause the white bar to come back. I have already removed the default image.
I should tell you that my knowledge of css is zero.
Hope you can help
O
Here's all you need to
Here's all you need to do.
OK, first, to prevent any update's from altering the changes we're about to make, you need to do this:
Create a new css file and name it "local.css". To do this, just open Notepad on your pc, then hit "Save As". Choose "All Files" under the "Save as File Type" drop-down box and enter local.css. Save it to your desktop, then upload it to your server into the "Acquia Slate" folder. Once its uploaded, open to edit it, then open to edit your style.css. In the style.css, highlight everything, then copy and paste it into the open local.css. Close style.css.
Now let's make Drupal read the local.css and not the style.css:
At the top of your new local.css, change the name from "style.css" to "local.css". You now have a custom css stylesheet that will not change with theme updates. Go ahead and save it and close for now. Open the "acquia_slate.info" file to edit. Comment out "style.css" and uncomment "local.css". Do this by removing the semicolon ; from in front of local.css and putting it in front of style.css. Save .info and close. Clear theme cache in Drupal and test the site to make sure Drupal is reading the new local.css. If so, then we're on track!
Now let's get rid of the white space at the top:
Open the newly created local.css for editing. Scroll down till you find this:
header-wrapper {
background: #fff url('images/header.png') no-repeat left top;
height: 33px;
margin-bottom: 25px;
overflow: hidden;
padding: 26px 20px 32px 20px;
position: relative;
}
There are two things there creating the white space: 1 is the white background color (fff), the other is the header.png image. This is what you need to change. If you don't want the image, just remove the call to it and use a simple color. If you want to use an image, just replace the default header.png with yours.
That's it! You should now be able to get where you wanted.
If you need more help... ask away!
Chris
Problems commenting in/out
Hi Chris,
I followed your instructions on setting up my local.css and style.css files. When I go into my acquia_slate.info file to comment in and out the files it doesn't seem to work. As an experiment I commented out the style.css file and I was still able to make changes to my site altering the file. Any pointers?
Hi!
Sounds like you did everything right. I'm sure you already know this, but just in case: Commenting out to make inactive means putting a semicolon in front of the style.css, making sure there's not one in front of your local.
If that's all good, am I'm sure it is, then you just need to clear your cache and theme registry. The .info is cached is in a database. Just go to: "Administer > Site configuration > Performance" and clear cache. This will take care of clearing both. Or, if you're using the admin menu (admin menu bar at top), then you can hover your favicon on the top left, then click "Flush all Caches".
That should do it. If not, let me know.
Good luck!
Chris
Thanks for the timely help
Thanks for the timely help Chris. It turns out I just had to clear the cache. I am new to this and am still learning. So I changed the header image, but now the link to my site homepage that comes by default with the theme wont go away. My image is just over the top of it. Where in the code do I delete the original link. Here is a link to my frontpage to show what I mean. http://www.helloenglishteacher.com/home/
Thank you
Go into theme settings
/admin/build/themes/settings/
Toggle display
Should do it
Thanks for the help.
Thanks for the help.
I think the original theme
I think the original theme header image is gone... I checked with Web Developer. The image being called is chalkheader2. The issue is actually with your header image itself: it's a jpg. Images developed and saved as a jpg will have a colored background, usually white by default. This is what happened in your case. I downloaded the header. The link below shows what it looks like against a black bg; there you easily see the white.
http://www.cdn.tvdelicio.us/headerimage1.jpg
There's any easy way to fix this. Open the chalkheader2 image in Photoshop (or other image editing program) and turn it into a png with transparency. If you don't have the software, or aren't familiar with doing this, just let me know and I'll do it for you. You'll just need to edit your css to reflect the new png rather than the jpg.
That's it!
Chris
Issue
I installed the advanced profile kit module and was doing some trial and error clicking while trying to get it working. For whatever reason, changes I make to my local.css for my theme don't do anything now. Is there something I might have clicked on in the D6 administer settings that could do that?
What exactly are you trying
What exactly are you trying to edit?
Are you flushing the cache?
I am just trying to edit the
I am just trying to edit the font colors and adjust picture widths. basic stuff. I was doing it fine and then I undertook setting up the advanced profile kit module and I had some problems with it. so I started messing with settings trying to get it to work, now when I make changes to my local.css file, nothing happens. I have emptied the cache. To make sure that it is not a problem with my local.css file I am going to repaste my style.css info in and try to make it go back to the default. I just wonder if there is a setting somewhere in the administrator menu that would over ride my theme. Or if a module I installed is messing with it.
I deleted and re installed my
I deleted and re installed my theme. Now it appears to be working. Not really sure what happened, but it works for now. Thanks for the assistance.
I am no expert but you can do
I am no expert but you can do it a little easier and with better practice.
Aquia Slate already has a local.css it's I believe called local_sample.css you add your overrides and custom CSS here. Then you just rename that file and change only the section you want.
In this case being
#header-wrapper {-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF url(/drupal/1.x-6.x/themes/acquia_slate/images/header.png) no-repeat scroll left top;
height:33px;
margin-bottom:25px;
overflow:hidden;
padding:26px 20px 32px;
position:relative;
I would not comment out the style.css but do uncomment the local.css this will allow advantageous future changes to still take affect.
Lose the image and change the color from #FFFFFF to #292929 and tweak whatever else you would like in the above code. Add to the file stated above and your done. Oh and turn off CSS optimization while you edit like this.
I'm certainly not being
I'm certainly not being argumentative and definitely respect your opinion..... but you absolutely DO need to comment out style.css in the .info. If you don't, you could very well introduce issues with the style. You can't have Drupal calling two different core stylesheets: One will be custom w/no white header and BG, the other will be default... with the header image and white background. If different stylesheets work together and compliment each other, like Fusion and Prosper, then that's ok, because that's they way they were designed. Fusion is a base core theme and Prosper is the sub-theme. You don't have that going on in Slate... because there is no sub-theme, Slate is the core theme. So, two different "core" stylesheets WILL cause issues. Plus, it's just causing Drupal to make another css call when it's entirely unnecessary.
DO comment out style.css. Also, updates do not typically alter the default css unless there's some bug. TNT themes VERY seldom have bugs in the css or template files, so there's just no need what-so-ever to have both loading.
On the other hand, you're totally right about the local_sample.css being there. Guess I just missed it :). So yes, you can use that one... just rename to local.css. But the sample has no css in it, so you'll still have to copy and paste there from the style.css. Both ways will work, whichever you choose. Tommy's way would be a little quicker since the local_sample is already there.
Tommyent: You either have an older version of Slate or a tweaked one because the current Slate theme has no moz in the header and the padding is a bit different. Still the same section, but the one I listed is the default Slate.
And again, no offense intended, Tommy. I just don't agree with calling both stylesheets. I don't think there's ever a need to do that unless you're dealing with a core and sub-theme.
Best of luck!
Chris
@obeahman not sure how you
@obeahman not sure how you made out or if at all.
@sgprs no offense taken and none meant.
This is not to be argumentative or rude. But your wrong.
The local.css will override the style.css.
Your method defeats the entire purpose of the local.css file.
Why copy and paste? Why not just make the changes to the style.css and save. All your doing by doing it your way is changing the name from style.css to local.css
It's meant for overrides therefore overriding anything in the style.css file .
The local.css takes priority.
I am no expert by any means so you don't have to believe me.
So I include this link here from jwolf
http://drupal.org/node/320034#comment-1077566
Also there are updates if you look there currently is a dev version. To add the local_sample.css there was an update and so on.
Hope that helps
@Tommy: Yes, you are correct,
@Tommy: Yes, you are correct, the local will override... in all honesty, for some reason, I didn't know that. After years of doing this, seems I should have though, huh? But I've always used a custom css, so never "had" to know if one overrides the other. I never use more than one "core" css.
He said he had zero css knowledge, so I was trying to make it easier for him. Guess I muddied the waters a bit... that certainly wasn't my intention. I thought it would be easier for him to do it this way. Plus, that's the way I do it. I always copy the original style.css and paste into local (or whatever the custom css name is) and build custom from there. I do this because I always comment out the style. I have enough css loading, so I cut down as much as possible. Technically, both ways will work. Cut and paste is really not a time consuming thing to do; I mean, it takes what, like 3 seconds? Plus, by doing this and working with the entire stylesheet contained within the local, it gives him a chance to learn a bit more about css. And glad you didn't take offense; non taken here either. It's all a learning process, and I'm by no means an expert either. The more info out there, the better. This was a good conversation. Best of luck to ya, Tommy... I'm sure we'll meet again here on the forums :)
@obeahman: We're both interested, so let us know how it's going.
Chris
White Bar Removed
First of all, thanks to all who responded.
Using Tommy's instructions, I was able to remove the white bar. It was so simple.
Thanks again