Move Logo to the left.

What is the best way to move the Logo from the center all the way to the left?

Thank you.

Goto Template manager and click on "gk_twn2 - Default" and on the right towards bottom Select "Advanced Settings" and turn on CSS Override to "On"..

Find and open with a notepad

Code: Select all

Template Folder/gk_twn2/css/override.css

Add below contents into the file: Incase you update your template in the future make sure to take a backup of override.css file so you dont loose your changes.

Code: Select all

/* Moving logo and Sitename to left handside */
h1#gkLogo {
    height: 50px;
    margin: 0 auto;
    padding-left: 10px;
    float: left;
    top: 44px;
    width: 390px;
}
/* Logo as text and not image you can change add font-size here*/
h1.gkLogo.text {
    margin: 0;
    float: left;
    padding-top: 30px;
    padding-left: 10px;
    width: auto;
}


That that worked good with a few adjustments.
Question: I still need to move it all the way to the left 86px.any ideas?

Well below code moves from left side 10 pixel towards right side. so if you delete the line or make it 0px it should align with the line , can you take a screenshot so we can see as it should not be further away 86px to be honest. Thank you.

Code: Select all

padding-left: 10px;

After setting it at O its now 76px away.

logo_2011-08-11.jpg

Thank you

can you double check maybe its the image or even better if this is on live website if you can write down the url so i can have a look.

You were right it was the image. I forgot I centered the image since initially it was centered in the template.

Thank you for the fast help. I really appreciate it.

No problem glad it worked, see you around.

Find and open with a notepad

Code: Select all

Template Folder/gk_twn2/css/override.css

You can alternatively add this code by editing override.css using Template Manager / Customise Template in Joomla EXTENSION / TEMPLATE MANAGER / TEMPLATES / gk_twn2 Details / Edit css override.css - In my opinion it is a little bit easier...

By the way Thank You for solving this issue!

I copied this code into my override.css file and turned on the CSS Override but I can't get the font size of the "Logo as text" to change. Where and what exactly do I type in if I want to experiment with larger sizes? I did see a change in the "Moving logo" (first half of the override example above) when I experimented with that so I know settings are enabled for me to make changes. Also, I still can't change the logo image when I experimented with that as well. I understand that's a bug with this new News template. Please advise.

Thank you

This is the code I'm referring to...

/* Moving logo and Sitename to left handside */
h1#gkLogo {
height: 50px;
margin: 0 auto;
padding-left: 10px;
float: left;
top: 44px;
width: 390px;
}
/* Logo as text and not image you can change add font-size here*/
h1.gkLogo.text {
margin: 0;
float: left;
padding-top: 30px;
padding-left: 10px;
width: auto;
}

Add the last two sections in your override so it looks like below and experiment with font-size to your liking.

Code: Select all

/* Moving logo and Sitename to left handside */
h1#gkLogo {
    height: 50px;
    margin: 0 auto;
    padding-left: 10px;
    float: left;
    top: 44px;
    width: 390px;
}
/* Logo as text and not image you can change add font-size here*/
h1.gkLogo.text {
    margin: 0;
    float: left;
    padding-top: 30px;
    padding-left: 10px;
    width: auto;
}
/* Font size for the Main Logo text you can use percentage or px e.g 40px or 150%*/
h1.gkLogo.text a {
    padding: 0;
    width: auto !important;
    font-size:140%;
}
/* Font size for the Logo Slogan text you can use percentage or px e.g 40px or 150%*/
h1.gkLogo.text .gkLogoSlogan {
    color: #666666 !important;
    font-size: 25px !important;
    line-height: 10px;
    margin: 32px 0 18px;
}


Add the last two sections in your override so it looks like below and experiment with font-size to your liking.

I try to solve same issue but font size is not changeable even with last two section.
Help, please