How do I change the left margin for the Left_left module?

Hi Happy New Year!

Please have a look at my development site -
dev.polomagazines.com
I need to run a column all the way from top to bottom and so I bought this template as I thought it would do this with the left_left module.
I have a few questions -

How can I make this left_left module look like a column that is flush with the left side of the screen?
If you look there is still about a cm gap to the edge of the screen.
I want to give the illussion this colum of ads is in full view but actually behind the template (even though it is not of course). Also I think this will free up my left_right module size abit too with the added space.

Also I am trying to create the impression the column runs the length of the screen which means it would run up into the menu at the top. I dont know if the designer that uploaded this template for me changed this but I can not find many of the menu modules you have listed in the template list. Nore does the the logo module work.
I have tested the modules top1 top7 topleft and the header to see if they too will contribute to this illusion for me but they leave large margins between the modules which breaks the effect some what.
Perhaps the easiest is to just break the top margin of Left_left module and send it into minus figures to reach up to the top of the screen. Is this an option? or will I create a mess?
Any sugestions are appreciated as the client wants this column for advertisers so its pretty essential I work out a solution.
Thanks for any help offered.
Happy New Year

let me see the site and I'll give you there css.. not all gavick templates are the same. some use Gavern and some don't.. it makes a difference.

Ok sure here is the link
http://dev.polomagazines.com/

its just a test site
the real one is with out the dev. and doesnt have the left_left activated

on the test site dev.polomagazines.com you can see my left_left column ads peeking out behind. I like the illusion that they are on a flat bed behind the site but ofcourse we need them to run all the way from top to bottom of screen and very flush to the left of screen. I am also hoping this will take my left_right module back to normal size which you can see at the real site www.polomagazines.com
Thanks for any help at all

Sorry bro you got my head spinning so here is the needed css and you can edit them as you need. But from the looks of it you dont need css, you need to look in the template under dimensions and do it the right way. Gavern gives you total control of the left modules.

This is a the css for left_left

Code: Select all

#gkLeftLeft

{

width: 37%;

}

This is the css for the left column but this should be set in the template. I'm guessing you don't know css so I wouldn't high-jack the css here because other parts of the template will also have to be edited or modules will fall off the side and be floating at the bottom.

Code: Select all

#gkLeft

{

width: 20%;

}

This is for that white space you have to the left of left_right.. you can minimize that with this css, change it as you need to. it's not a issue of margin.. just padding.

Code: Select all

#gkLeft

{

padding-right: 40px;

}

Sorry that I have your head spinning bro.
You are right I only know enough code to be dangerous so best to leave it if possible. As you say best to do things the right way. So where do I find this dimensions? I can not find it anywhere I look?

Yes can you give me the path to dimensions? Apparently you have a different view to many of us. I just have what is there on the joomla layout which isnt much and definately doesnt include it obviously anyway. So I have to use my cpanel and it is very complicated to me I need the pathway to it to ever find it.

Ok in this image is where you can control the width of the left side... all sides for that matter.

Left column width: is where you set the combined width of left_left & Left_right COMBINED.
be advised the % of this option is based on the width of the whole page.

Left2 column width: will determine the width of left2 and by proxy determine the width of left1. There is no individual setting for left1. This width is calculated based on left column's combined width so 51% or 52% will be about even.

You will still have to use the css I gave you to get rid of the spacing.. like I said it's actually padding, adjust as desired.

OK I ll give it my best and let you know.
Thank You

Well I now understand the above picture and have applied the % you recomended but after 3 hours I still am baffled at where you paste the 3rd suggestion #gkLeft

{

padding-right: 40px;

}


I have found similar code in the css files -"css/layout.css" in template "gk_myfolio"
#gkLeft {padding-right: 40px !important; } and tried adjusting it but it had no effect.

I still dont understand where to paste this code

The css fragment mentioned would probably be best applied via the templates override.css file. Make sure you activate it in the template advanced parameters section if you haven't done so already.

Use override.css = ON there is a blank file is in your templates css folder already.

If you apply the changes there they shouldn't get overwritten when you update the template. It's also an idea to add comments to the changes /* then you know why it was added */.

Well I went to template manager styles advanced settings and clicked css override to ON
Then went to templates and opened Edit css/override.css and pasted and saved the code snippet.

No change.
I then went back to template manager styles advanced settings and also added it to the box under the css overide ON and saved. Still No Change.
?

There is no logical reason for the css given not to work. Aghost is correct in telling you to use the override.css. You might want to try cleaning your cache so the new css can take effect.

This page is a test page I play around with to see just how far I can take Gavern before it breaks. Go to http://base.8balla.com/ the top of this site is all custom module positions and widths. you can rip out the css to see how I did it. Until you get to the first black banner at the bottom, none of those module positions came with the template.

Perhaps I should start this question by asking it another way...
Please may I ask if one of you may have the time in your busy schedule to look at my development site for a live site that is demanding I sort out an ad column quick smart.
I am doing good! BUT I need to have the ad column FLUSH next to the left of everyones computer screen with a small buffer to the rest of the site. Perhaps 30px gap. Please may I have anyone suggestions on how to do this. Thank you in advance

I know I am not competent and sorry. But I am trying to sort out a problem with solutions I dont understand...sorry.please reply as if you are replyong to a beginner..that may help..

You could try this as a quick fix and then fix it properly on a dev site in your own time.

This should get you out of any dung heap you maybe heading for...

Code: Select all

#gkContent {
  width: 70%;
  margin-left: 10px;
}

#gkLeft {
    width: 28%;
}


Add that to your override file and then play with the numbers hopefully that will help you on your way to a better solution. I didn't do the maths or consider any impact this would have on other areas of your site.

The best thing would be to install firebug and use it to explore the template code.

I forgot to mention that the padding rules you have in your code to fix the alignment of the ads on the left isn't working because the issue is caused by this fragment...

Code: Select all

p {
    margin: 0.5em 0;
}


You could write a custom class to override it, wrap the images in a div or apply an in-line style rule to the p element.

Dont mistake my appreciation of your assistance. but I dont think I am explaining my self somehow.
The code you gave me didnt seem to do anything.
and when I changed it from 10px to 30 px and then 0 px to see what it would be affecting it seemed to move the contents.
I dont necessarily want to move the contents although they are alittle far away from the modules in left_right but that isnt really my major concern.

I am trying to move the left_left away from the Left_right and the contents. I am trying to get the Left_left column as far to the left as possibly possible then leaving a big gap between it and the rest of the site (left_right and then the contents)

The codes suggested dont seem to have an effect. I dont understand what you mean by -
"
I forgot to mention that the padding rules you have in your code to fix the alignment of the ads on the left isn't working because the issue is caused by this fragment...

Code: Select all
p {
margin: 0.5em 0;
}

"

The suggestions I made were to make the page look presentable with margins and alignments so it would look like the screen shot above. It should also have helped you see how the css is used to effect areas of the page. You would need to spend time developing the changes you want to make, if you can't do it using the template parameters and basic css override statements. That could mean adding a new module position for your ad column and css styling for that position.

mongo2006 has told you how to manage the dimensions of the templates module positions and css code.

Have you got firebug installed? If not install it in firefox and use it to see how the css effects the elements on the page. You can also use it to make changes to the page on the fly to see what a given changes would make.

The bit about the p { margin: 0.5em 0; } is because firebug showed that there were some padding statements which were being ignored which were being applied to the left column. I assumed that you had been trying to align the ads top with the other columns as you can see in the screen shot above. The difference isn't a padding issue it's because the images in the ad column are in a <p> tag with a top and bottom margin of 0.5em. To fix it put the images in a <div> tag with 0 margin.

very good now I get it about the p { margin: 0.5em 0; }

Ok I have found with the use of firebug that this piece of code will do all I need
<div id="gkPageWrap" style="margin-left: -40px; margin-top: -30px;">

but I have been looking for where to find it for 2 hours... Can anyone help me?

Hi
Did you try override.css ?

A few times, Yes nothing happenned

You have been making progress.

On your development site it would be better to disable the css cache in fact it's easier to develop with no caching whatsoever.

If you turn the css caching off you can check to see if the override css sheet is loading.

Have you considered using the banner component for your ad slots? You could manage them as clients and collect a record of clicks. It would also make it easier to manage them rather than coding in each image.

Glad I can give some one a laugh.
Its getting really droll for me I tell ya.
Thanks for the suggestion Aghost but its not a case of what would be good or what I want but what the client wants.
Is everyone on this site a volunteer?
Is working out where that code from difficult?
I dont get it.
Why is what Im asking so hard ?
Thank you for the suggestion Aghost css is turned off and has been all the while.
how do I check override is loading like you suggest? Clearly it isnt NOTHING has worked with it yet.

I wasn't laughing it was a friendly smile! Poor choice obviously.

You have fixed the ad top margin and there is defiantly a space between the ad column and the other one. Which seems like progress to me.

This line in your page source suggest that you have caching enabled...

Your Dev Site Page Source Header:

Code: Select all

<link rel="stylesheet" href="/cache/gk/94e668b2513d499a7169908325108fee.css" type="text/css" />


If you turn off the CSS caching in the template parameters you should see this line at the bottom of the link rel tags for CSS style sheet loading.

Code: Select all

<link rel="stylesheet" href="http://localhost/cilentside_qs17/site/templates/gk_postnote/css/override.css" type="text/css" />


If you have caching off and don't see the line above in the page source double check that you have Override CSS set ON in the advanced section of the template parameters. The cache parameters are in the same place.

It just dawned on me that you maybe thinking of the Joomla/gkCache system and module cache which isn't the same thing!

I think some of the mods are paid support but most of the people chipping in aren't paid afasik.

I was serious I am happy to give some one a laugh its really true. I dont care about going mental trying to work this out Its all part of it.
But somehow I think we are on the wrong track. I checked as far as I understand the css cache is off in the template parameters according to the Template Manager Advanced settings.
I feel everyone presumes too much about my knowledge and is missing key BASIC instructions for a simply question..Where do I find this code..<div id="gkPageWrap" style="margin-left: xxx; margin-top: xxxpx;">
I know if I found where it is I could put in the values I want and get the result I am trying for.
Well it works with firebug.
Its just I can not understand where firebug is finding the code it is showing me.
I was hoping someone here at the template knew where it would be.
OR
After a hundred years of google for documetation on firebug and trying to find how to read where firebug is finding the files for the code it shows you I have given up and thought someone may know where the code came from.
See I have finally found the solution but dont know now where it came from!!! grrrr.. lol
I know Ill get there just hope Im not on the pension by then
I do appreciate the help and do have a large sense of humour too so go for it have a laugh while we are it Its great I mean it.

Your site is loading the override.css in the head which you can see by viewing the page source using your browser right-click > view source. You can also see the file names in the css pane on the right in FB now, instead of the cache file reference. Check out youtube a short guide there are loads of tutorials. Once you can use it you will find things much easier. Also check out the web developers tool bar plugin.

You should then do the maths to workout the dimensions/percentage widths of each area of the page making allowances for margins etc. Tidy up and remove any redundant or possibly conflicting changes you have made in earlier attempts. Set the template width and column percentage parameters as your baseline dimensions and then style the elements of the page. You already have the gist of the classes which you need to tweak. You just need enough space between each section to allow for correct spacing.

If you don't take the time to set a good foundation it will be harder to maintain in the long run.

These changes will give you an idea of spacing but it's just rough to get in the ball park. It's not a fix!

override.css

Code: Select all

#gkContent {
    width: 68%!important;
}

#gkLeft {
    width: 30%!important;
}

#gkLeftRight {
    margin-right: 10px!important;
    width: 64%!important;
}


I haven't changes whatever is setting the 30% applied to the gkLeftLeft position.

What that's doing is reducing the size of the gkContent area which leaves room to increase the gkLeft which in turn leaves room for the gkLeftRight to moved right with some padding added. If gkLeftRight is too big drop the percentage and increase it on gkContent. What you gain in one area you need to lose in another to maintain the overall max width. In firebug you will see a quick info panel popup you can see dimension info there. The Webdevelopers Tool Bar has a measuring tool. I think the issue you have had is because you weren't reducing the gkContent.

That's just a guide to help you see how things interact, there are other considerations to take into account. Changes like those will effect other elements of the design...if you use other positions for example.

I'm not an expert in template development but hopefully that makes some sort of sense. With a bit of luck one of the gavick team will correct any misleading information or offer a better explanation.

Correction: I used padding where margin was actually applied.

What that's doing is reducing the size of the gkContent area which leaves room to increase the gkLeft which in turn leaves room for the gkLeftRight to moved right with some margin added.

Mongo2006 explained the template width parameters earlier on in the thread. You will need to override the widths which can't be set via the template parameters.

Here's an image of what the changes above should be doing using a screen shot with those changes applied in FB.
The right hand margin or percentage of gkContent needs sorting. I missed it with the low contrast.

Ok Thanks Aghost I will take some time to read this all and apply it. Thank you for your help it is appreciated