Fix Logo and Text position in Top Header
Permalink
Hi c5-community,
I have started creating a website with c5 and I like it. Although I am an absolute beginner I found a solution to almost all problems through c5 community and forum. Thanks for that :)
I succeeded in creating a global scrapbook and editing a content blog, where I could place a logo and the site name of my project.
My problem is, that the black accent 2.0 theme i use is very much centered. When I zoom in or out the position of the logo is moving to the left or right. How can I fix its position to the middle of the page?
To explain it in more detail: To insert an image in a content block called "My_Site_Name" is easily done, but problems arise when trying to define its exact positioning. How can I do that? I tried to define its position via margin and padding in the design options, without any positive results. Indenting the image in the content block just helps, if no site visitor will ever make use of zooming which is quite unlikely, and I would like to avoid the effect described above.
Thanks in advance,
Lovic
I have started creating a website with c5 and I like it. Although I am an absolute beginner I found a solution to almost all problems through c5 community and forum. Thanks for that :)
I succeeded in creating a global scrapbook and editing a content blog, where I could place a logo and the site name of my project.
My problem is, that the black accent 2.0 theme i use is very much centered. When I zoom in or out the position of the logo is moving to the left or right. How can I fix its position to the middle of the page?
To explain it in more detail: To insert an image in a content block called "My_Site_Name" is easily done, but problems arise when trying to define its exact positioning. How can I do that? I tried to define its position via margin and padding in the design options, without any positive results. Indenting the image in the content block just helps, if no site visitor will ever make use of zooming which is quite unlikely, and I would like to avoid the effect described above.
Thanks in advance,
Lovic
Hey Laszlo,
thanks for your reply. I 've tried your solution but it does not work. The design option in edit mode is without any effect on the "My_Site_Name" block.
I also did clear&update cache after adding the code.
See bitmap screenshot below which shows the design options in edit mode where I added the code.
thanks for your reply. I 've tried your solution but it does not work. The design option in edit mode is without any effect on the "My_Site_Name" block.
I also did clear&update cache after adding the code.
See bitmap screenshot below which shows the design options in edit mode where I added the code.
Hey there!
I may be misunderstanding your problem then. I tried it and it works for me.
On the other hand, it is also possible, that the theme itself contains style properties that overwrite everything. In that case, you must modify the theme itself to suit your needs. Are you comfortable with HTML and CSS? You should install the Firebug plugin for Firefox. With that, we could see esactly what kind of style properties are affecting your logo image. You can install the plugin from Firefox easily through the extensions menu.
I may be misunderstanding your problem then. I tried it and it works for me.
On the other hand, it is also possible, that the theme itself contains style properties that overwrite everything. In that case, you must modify the theme itself to suit your needs. Are you comfortable with HTML and CSS? You should install the Firebug plugin for Firefox. With that, we could see esactly what kind of style properties are affecting your logo image. You can install the plugin from Firefox easily through the extensions menu.
Hi Laszlo,
thanks again for you reply. It took some time until I could proceed with my project, which is also the reason for not answering.
Meanwhile I have installed Firebug, but I did already dive into the depths of the css-files some time before. I have managed almost all of my problems now.
Lovic
thanks again for you reply. It took some time until I could proceed with my project, which is also the reason for not answering.
Meanwhile I have installed Firebug, but I did already dive into the depths of the css-files some time before. I have managed almost all of my problems now.
Lovic
Have you tried to edit the Header.php file? For that you will need, as suggested, the Firebug / Firefox plugin: using the inspect element button you can roll over the logo and see where the atributes are located.
You could also try to add a content block with the centered logo, instead of the logo itself. For that just build a content block, inser the logo image, center it, and then on the theme pages apply the block where it should be.
You could also try to add a content block with the centered logo, instead of the logo itself. For that just build a content block, inser the logo image, center it, and then on the theme pages apply the block where it should be.
Yeap, sounds like something in the theme. You'll need to do some CSS and HTML to get it to do what you want it to do. Do you have a link to live site? Then we can have a look at it and give you some code changes if you're not too familiar.
Try setting the following CSS property to the content block with the image:
You can set this by clicking on the content block in edit mode, selecting design, and then going on the CSS tab. I think there is a textarea where you can input these properties.