1

I'e been using joomla default template: Protostar. From template manager I set a logo and it appears at the left top of each page. How can I shift the logo 100px right?

I'm running joomla 3.2.1 in localhost.

Mostafiz Rahman
  • 8,169
  • 7
  • 57
  • 74
  • @CTravel I can't figure out what portion of the css file needs to be changed. – Mostafiz Rahman Jan 24 '14 at 15:31
  • try finding it out with the developertool from your browser, you can select te element and it will give you the class of id name and probably the row of the css file that you need to change.. – Carl0s1z Jan 24 '14 at 15:32

1 Answers1

3

Go to the following file:

root/templates/protostar/css/template.css

Search for the logo and edit or add the following:

#logo {
    position: relative;
    left: 100px;
}

or on line 6936, you will find the .site-title { } block, which you can replace with the following:

.site-title {
    font-size: 40px;
    font-weight: bold;
    left: 100px;
    line-height: 48px;
    position: relative;
}

In future, start getting used to your browser console and start inspecting elements. If you're using Firefox, then I would recommend using Firebug.

Lodder
  • 19,758
  • 10
  • 59
  • 100
  • The only thing I would say is that you should never edit the css directly any more, you should always edit the less and recompile, which is very easy in the template manager at this point. – Elin Jul 02 '14 at 09:43