By carpman on

Hello, ok i am wondering how i can set the content/module alignment in 2 side columns in bluebreeze theme?

To see what i mean visit my site www.daisy-may.net and you will that the adsense module aligns to to left of column as does the recent and random image, i have been able to set the amazon ad to center as i created a block and added center tag around code.

I believe i need to do this in the css files but not sure where?

cheers

⋅ Categories: Drupal 5.x

Comments

benbruscella’s picture

benbruscella commented

Not exactly sure what you mean, but you should use firefox and grab the firebug plugin to sort out the css issues:

https://addons.mozilla.org/firefox/1843/

For example, the right bar code on your site is wrapped like this (using firebug):

carpman’s picture

carpman commented

Thanks for that but for some reason firebug does not seem to work?

Using FireFox 2 on Gentoo linux. I can open Firebug but it does not display any code and the most of option/control buttons don't work but i can get it to inspect code by clicking on image and it shows:

Style Information - http://www.daisy-may.net/
http://www.daisy-may.net/modules/system/defaults.css

img (line 18)
{
border-top-width: 0pt;
border-right-width: 0pt;
border-bottom-width: 0pt;
border-left-width: 0pt;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: -moz-use-text-color;
border-right-color: -moz-use-text-color;
border-bottom-color: -moz-use-text-color;
border-left-color: -moz-use-text-color;
}

http://www.daisy-may.net/themes/bluebreeze/style.css

img, a img (line 87)
{
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: -moz-use-text-color;
border-right-color: -moz-use-text-color;
border-bottom-color: -moz-use-text-color;
border-left-color: -moz-use-text-color;
}

img, a img (line 87)
{
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: -moz-use-text-color;
border-right-color: -moz-use-text-color;
border-bottom-color: -moz-use-text-color;
border-left-color: -moz-use-text-color;
}

What i want to do is what i have done with the amazon ads but as this a block i created and added content to it was easy but the gallery images thumbnails and adsense are module block that i cannot change?

cheers

tdimg’s picture

tdimg commented

IIRC, you can't put an alignment into the img, you need to put this into its parent div, currently, your structure there looks like

div#sidebar-right > div#block-image-1 > div.blockinner > div.content > img (that's your image)

# refers to an id, . to a class

now you need to put the alignment into the div.content but this class can be multiple times on your page, so in order to identify this absolutely, we'll need to put the div with the id infront of it:

div#sidebar-right div.content {
text-align: center;
}

Hope that helps

carpman’s picture

carpman commented

Hello, ok i found and added to

#sidebar-right {
float: right;
margin-left: -100%;
width: 174px;
padding: 5px 8px 20px 8px;
text-align: center;

Now the images align center but so does the text which looks wrong, see site to understand.

I only want to be able to center content of certain blocks that i put in left or right columns not the whole column?

tdimg’s picture

tdimg commented

... just make a new one at the very end of this css document: bluebreeze/style.css. And to make it even more precise, do it like this:

div#block-image-1 div.content {
text-align: center;
}

This piece of code refers than to a div container with the class name content that sits within a div container with the id block-image-1. You can only have one div container with this id on your page, so that refers directly to your image block. the div container with the class name container surrounds your actual image and not your heading. So that should work but only if you add it exactly like this to the end of said style.css document.

Edit: To explain what you did:
in your case you everything that is placed within the div with the id sidebar-right is now being centered aligned. You should get a feeling for what is placed within this div with the firebug extension (which version are you using by the way, the most recent is 1.0 but this is still in beta).

carpman’s picture

carpman commented

Hello and thanks for reply, ok that worked sort off !

It works on one image the bottom one but not the top one?

I have firebug working now, needed to add mozdevelop to compile options, but can't see that any common denominator?

cheers

tdimg’s picture

tdimg commented

I guess it is, you don't need a common denominator, just do the same thing again.

We've established this hierarchy for your first image: div#sidebar-right > div#block-image-1 > div.blockinner > div.content > img

For the other image it looks like this: div#sidebar-right > div#block-image-0 > div.blockinner > div.content > img

You should be able to see this with firebug.

So instead of only adding the following css code to your css document:

div#block-image-1 div.content {
text-align: center;
}

You also add:

div#block-image-0 div.content {
text-align: center;
}

You can combine both in this way:

div#block-image-1 div.content,
div#block-image-0 div.content {
text-align: center;
}

However, there is a common denominator, it's the class of the div#block-image-1, which is block-image (and additionally the class block is also assigned to it, so basically this div has two separate classes but we are only looking at the class block-image for this). So, that should do the same:

div.block-image div.content {
text-align: center;
}
carpman’s picture

carpman commented

Hello, many thanks for reply.

Sorry for being bit dim but i have not messed with css for a few years and even then only a bit.

I did try adding another one but used 2 instead of 0 which is why it did not work, you suggestion for combining worked a treat.

I will see if can do on my own for the adsense module on left side.

cheers

carpman’s picture

carpman commented

Ok got the hang of it now and have sorted left adsense block out as well.

many thanks all

tdimg’s picture

tdimg commented

good luck with everything and sorry for being a bit "strange" up there with my comments.

Thought Firebug can really help in figuring out everything, like finding out id names and classes of that div as well as giving you the structure of the html, so it was a good call by the other user. I'm using however Firebug 0.4 and haven't upgraded to the newest version which might have that stuff handled slightly differently but I've heard it's absolutely great.

Willdex’s picture

Willdex commented

I saw that you have adsense setup like this:

div.block-image div.content {
text-align: center;
}
div#block-adsense-0 {
text-align: center;
}

Are you using blocks? If you are, would you know how to use adsense tags with div?
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

Willdex’s picture

Willdex commented

Hey, guys, this post is wonderful. I've added float: left; to the <div style="border: 1px solid ; width: 125px; height: 125px;">AdSense</div> in FireBug. Everything works the way I want it to. My question is how to save this addition to the div layer? In which file?
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

Here's what you need to be doing:

find the parent of this div, Firebug should tell you this next to "Inspect Edit", the current div is bold, and everything to the left are its parents. find the next one with an id, e.g. div#content, then add this to styles.css of your theme as discussed above with the other examples.

Hope this helps

Willdex’s picture

Willdex commented

Ok, I'll try doing that tonight and will let you know of the outcome.
UPDATE: I read this post over and over again to see if I've described my problem correctly. What I can do is to edit the page "on the fly" using the above mentioned FireBug, but what I can't figure out is what should I put down when I actually create a page: I thought I'd have to write something like <div align="left">[adsense:125x125:1:1]</div> for the code to display toward the left side, but this isn't working. Moreover, as you can see, I'm not using blocks but tags instead. Hope you can still help me.
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

there are a couple of errors in that, e.g. never use align the way you did it there. If you write your div yourself then do it like that:

<div id="adsense">[adsense]</div>

P.S. I don't know how those tags actually work but don't include something there which you can write in your css file.

You can now go into your style.css and write a new rule:


div#adsense
{
boder: 1px solid black;
height: 125px;
width: 125px;
float: left;
}

In case you don't know css and how to use it, I suggest reading some tutorials, e.g. http://htmldog.com/ or http://w3schools.com/css/default.asp

Willdex’s picture

Willdex commented

What should I write if I want to place the next 125x125 on the right? Btw, thanks for the assistance.
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

float: right should work. if not, could you get a test somewhere online? it's easier to look at the whole thing and not just single lines of code. Sometimes the problem is not with the css but with the html.

Willdex’s picture

Willdex commented

Ok, I've tried that, and it works. However, the block is not displayed in the content [because there's no such setting in the block's configuration]. The reason I want to use tags is simply because it makes sense [to me]: while visitors read the content, they're presented with the ads related to what they're reading. Not only that, I control whether the visitors/guests see the ads or not by putting the tags manually! With blocks I'm not able to do that: it's either left/right sidebar, content top/bottom, the header or the footer, not the content itself, and it's always on like 7-11!
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

what I meant is, don't add any styling to them. You can do this all with your css, even without blocks and all. But I guess your knowledge of css isn't good enough yet to accomplish that. In the long run, it makes your life easier if you put all styling into the separate css file.

Willdex’s picture

Willdex commented

Ok, yes, no blocks. And I'm no expert in CSS, correct. The reason I want to use tags is to control the ad placement manually. If I use tags, do you know how to make the Adsense block float left?
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

All you need is CSS. Your tags will be converted to html at one point and then you can style it with CSS just like everything else. Firebug helps you to find out the resulting html structure. But you probably don't even need this. All you need is to change this line of code you mentioned before:

<div align="left">[adsense:125x125:1:1]</div>

into:

<div id="adsense">[adsense]</div>

All you need then is to edit your style.css file according to the examples above. Just look back a few posts, I said it before. And something else, if you need more help, provide me with an online version. And you should also probably start reading those css tutorials if you want to continue to develop some websites. Alternatively, you can always ask/hire someone else to create the websites for you.

Willdex’s picture

Willdex commented

I've tried putting <div id="adsense">[adsense]</div> into my content, but nothing is showing, except for "[adsense]." I did put 

div#adsense
{
border: 1px solid black;
height: 125px;
width: 125px;
float: left;
}

into my style.css of my theme. My guess is to allow the <div> layers into my input type, but as soon as I do it, the page breaks down badly. Also, I think I'd have to rename the div#adsense into div#a125l for the 125 pixel block along the left side and into div#a125r for the right side, simply because I won't be just using 125 pixel blocks all the time. I'd also like to use the unit links, and, in that case, it'd have to be something like div#a468l or div#a468r. Also, I've disabled the Adsense_Injector since it inserts the code automatically - not good for my needs.
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

I can't help as long as you don't provide any online version of what you are doing...

And the id adsense was just a suggestion, you can use whatever you want as long as it makes sense for you and it is according to the standard. And if you have more instances of something similar, use classes instead of id, you can also combine classes, so something like this could work:

<div class="adsense left w125">

and then

div.adsense {
}
div.left {
float: left;
}
div.w125 {
width: 125px;
}

also point me to a page where those tags are described.

Willdex’s picture

Willdex commented

my page is located here and the tags settings are described in the readme file, I'll populate:

Using tags

The tags feature allows placement of ads anywhere in the content. Please note that content here means any part that is passed through Drupal's filter system. Text in the slogan, mission, and footer is normally not filtered the same way as text in nodes, so you cannot put tags in those places.

To enable the tags feature, you have to enable the "AdSense tag" filter in the input format you are using (such as Full HTML or Filtered HTML) from Administer -> Site configuration -> Input formats. Then you have to insert the appropriate tag in your node where you would like the ad to appear.

Note that filters sometimes may have conflicts, and changing the order can make AdSense work in some cases.

The tag syntax comes in these variants:
1. [adsense:format:group:channel]

Where:

    * format: One of the supported ad formats (such as 468x60).
    * group: A number corresponding to the ad group this ad belongs to, determines colors.
    * channel: A number corresponding to the ad channel.

All fields are required, unlike when using the adsense_display() function above.

Example:

[adsense:468x60:1:2]

Display a 468x60 banner with the colors defined in group 1, and with channel ID 2

--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

Alright, use your tags as you've done before. It's obvious that they have to be used this way. As I said I haven't used adsense tags before so I had no clue why you needed those numbers and assumed that they were optional, like with other tags.

But now, with access to what you actually did, I can help you far better.

First, your implementation of the css rules is not correct, that's what you have:

div#[adsense:125x125:1:1]
{
border: 0px solid black;
height: 125px;
width: 125px;
float: left;
}

div# a125r
{
border: 0px solid black;
height: 125px;
width: 125px;
float: right;
}

1. [adsense:125x125:1:1] shouldn't be there. This is a tag used by the adsense module and not html code. These tags get replaced with actual html code. In your page, you have enclosed the adsense tag in a div with the class adsense, so use that and change div#[adsense:125x125:1:1] into div.adsense

2. there is never a space after the # (this indicates an id) or after a . (to indicate a class).

I'd suggest that you use your naming convention, i.e. a125r but not with ids rather with classes

Try now these changes and report back.

Willdex’s picture

Willdex commented

Ok, so I've changed my style.css according to what I've read from your post and changed the whole thing to

div.adsense
{
border: 0px solid black;
height: 125px;
width: 125px;
float: left;
}

div.a125r
{
border: 0px solid black;
height: 125px;
width: 125px;
float: right;
}

The code makes sense, but it's not working when I put down [adsense:125x125:1:1] or [a125r] or a125r; I've even tried <div style="[adsense:125x125:1:1]"></div> and <div style="[adsense]"></div>. Also, nothing changes in FireBug when I put the [adsense:125x125:1:1] code: it still has the 1px border, left side, but not aligned - looks like I've never even changed the darn style.css! I'm at a total loss :(
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

so I can't look at it and without looking at it I can't help really but:

why did you wrote<div style="[adsense:125x125:1:1]"></div>, this is always wrong. You don't put your adsense tags into an html tag => you always enclose them with a proper html tag. I mean that's logical. The [adsense...] tag is replaced with valid html by your adsense module not by your browser, as you should see when looking at it with Firebug and you would never put any such html code in style (only css) nor in the tag itself.

Once, you've changed your style.css you inspect your div element with firebug, on the left hand side of firebug you should select your div.adsense or div.a125r or whatever class name you gave it (or both if you wrote: <div class="adsense a125r">(but that wouldn't make sense here!) and on the right hand side you should see then the applied css attributes. If not, something is wrong.

Check whether you really used the right classname for the div that encloses your adsense tag on your page, see above. Make sure you're not using an ID.

Here's another advice, get rid of your div.adsense in your style.css, rename it to a125l => keep now to your naming code and keep it consistent.

You might also want to start looking at CSS tutorials (see the links above), I mean it's obvious that you seem to have no clue how to use it properly and I keep explaining you the same thing over and over again. I am patient but not that much.

Willdex’s picture

Willdex commented

This is a real pain in my ass: here's what I do not understand: how will the Adsense module know that div.a125l or whatever code I put refers to it? Even when I update my style.css with 

div.a125l {
  border: 1px solid black;
  height: 125px;
  width: 125px;
  float: left;
}

at the end, I still have to put [adsense:125x125:1:1] for the Adsense to appear. On the right side of the firebug I see the attributes, and here's what I see in there: 

element.style {
border-bottom-color:-moz-use-text-color;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:-moz-use-text-color;
border-left-style:solid;
border-left-width:1px;
border-right-color:-moz-use-text-color;
border-right-style:solid;
border-right-width:1px;
border-top-color:-moz-use-text-color;
border-top-style:solid;
border-top-width:1px;
height:125px;
width:125px;
}

However, , I am not able to save any changes, only play with the code. Also, I've searched for element.style, but didn't find anything.
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

tdimg’s picture

tdimg commented

It's getting a pain to explain everything to you, really. The Adsense module isn't interested in your css class. Why should it? The adsense module is in charge of getting you the right content in your div. Your CSS takes care of placing the div then how and where it should be. So, of course you need to continue to use your adsense tag, as I said that's for the actual content, the css class then takes care that it is displayed properly.

and the element.style, well if it isn't really self-explanatory, that is just a placeholder to indicate that you are now changing the style of the element you have selected in firebug. You'll have to copy that, place it in your css file and rename it so that it actually reflects the current selected element, e.g. by using it's classname or id. As I've now explained about a hundred times...

And of course can't you save what you do in Firebug, you don't have a connection to the files stored on your webspace. If that was possible everybody could just change your files and you don't want that now, do you?

To sum it up, you still use the classname adsense in your sample page you provided at the top, change that to a125l (the classname you now use in your css!) and you'll see that it works perfectly.

And again, start learning css! And if you feel you can't be bothered, well you can always hire me to do such simple stuff for you.

Willdex’s picture

Willdex commented

Sorry for the pain. I understand that if I'm not good in CSS I should either learn about it, or hire someone to do it for me. I apologize for basically wasting your time, as I should've explained in the first place that I'm not a coder, nor do I have a clue how to go about it. I'm just an end user. Unfortunately, we can't turn back the time, so, the most I can do is to apologize. And, if I encounter the problem[s] in the future, I'll definitely hire you in particular to do the job; these days I'm kinda tight on budget. I honestly thank you for all the help you've provided.
--
Billy | Major: Accounting | CityTech@CUNY | Student Block.

Grinch2171’s picture

Grinch2171 commented

To center the adsense block in your left sidebar add the following to your theme CSS:

#block-adsense-1 {text-align: center;}